🚅

ViteでReact17以降のJSXトランスフォームに対応する

1 min read

概要

Viteで、React17以降のJSXトランスフォームに対応する方法です。

https://ja.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

動機

React16以前では、JSXを利用するには明示的にReactをインポートする必要がありましたが、React 17以降は新しいトランスフォームの方法が提供され(現在は16以前のバージョンでも提供されています)、babelやtsconfigの設定を変更することで明示的にReactをインポートせずともJSXが利用できるようになりました。

しかし、Viteでは現状、このトランスフォームに対応していないため、明示的にReactをインポートする必要があります。
また、以下のようにesbuildのjsxInjectでインポート文を注入するといった方法もあります。

vite.config.ts
export default defineConfig({
  esbuild: {
    jsxInject: "import React from 'react';",
  },
});

しかし、これは対象ファイル全てにインポート文を注入してしまうため、既にインポートしているファイルでは2重インポートのエラーが出てしまうといった問題がありました。

vite-react-jsx プラグイン

先述の問題を解消したのが、vite-react-jsx プラグインです。
これはReactのインポート有無を判定し自動でインポート文を注入する他、Build時にはReactのJSXトランスフォームと同様に、React.createElement ではなく、react/jsx-runtimeを用いた構文に置き換えるため、全体のバンドルサイズの削減や将来的なパフォーマンスの改善といったメリットを享受できる可能性があります。

rfcでReact.createElementのパフォーマンスに関する問題について触れられています。

https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md#motivation

使い方

インストール
npm i -D vite-react-jsx
設定の変更
vite.config.ts
import reactJsx from 'vite-react-jsx'

export default {
  plugins: [
    reactJsx(),
  ]
}

導入も非常に簡単なので利用してみると良いかもしれません。

Discussion

ログインするとコメントできます