JS ファイルでの JSX 構文の使用をサポートするように Vite を設定する方法

Question

<p>Vite では、デフォルトでは .js ファイルでの JSX 構文の使用が許可されていません。 </p> <p>ファイルの名前を <code>.jsx</code> (または <code>.tsx</code>) に変更しましたが、名前を変更できない外部依存関係がいくつかあります。 </p> <p>Vite エラーの例:</p> <pre class="brush:php;toolbar:false;">✘ [エラー] JSX 構文拡張機能は現在有効になっていません。 ノードモジュール/somelib/src/someFile.js:122:11: 122 │ 戻り

<p>すべての .js ファイルで JSX 式をサポートするように Vite を設定するにはどうすればよいですか? </p>

P粉571233520459日前683

Answer 1

loader オプションを使用してすべての js ファイルを jsx として扱うことで、esbuild 構成を変更できます。

リーリー

注: .jsx ローダーを使用して .js ファイルをロードすると、パフォーマンスが低下します。

答えは、Vite の GitHub でのディスカッションから得られ、間違った (古い) 答えを「正しい」とマークします。

2023年3月更新

元の回答は vite build では正しく動作せず、vite dev でのみ動作します。現在のバージョンは、vite@^4.0.0 の両方で動作します。

ソリューションのクローンを作成してテストできる サンプル リポジトリ 。