🚅

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

2021/07/13に公開

JavaScript

概要

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

動機

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のパフォーマンスに関する問題について触れられています。

使い方

インストール

npm i -D vite-react-jsx

設定の変更

vite.config.ts

import reactJsx from 'vite-react-jsx'

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

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

概要

動機

vite-react-jsx プラグイン

使い方

インストール

設定の変更

Discussion