Façons de configurer Vite pour prendre en charge l'utilisation de la syntaxe JSX dans les fichiers JS

Question

Vite n'autorise pas l'utilisation de la syntaxe JSX dans les fichiers .js par défaut.

J'ai renommé mes fichiers en .jsx (ou .tsx), mais certaines dépendances externes ne peuvent pas être renommées.

Exemple d'erreur Vite :

✘ [ERREUR] L'extension de syntaxe JSX n'est pas actuellement activée

    node_modules/somelib/src/someFile.js:122:11 :
      122 │ retour <div/>

Comment configurer Vite pour prendre en charge les expressions JSX dans tous les fichiers .js ?

Answer 1

Vous pouvez modifier la configuration d'esbuild en traitant tous les fichiers js comme jsx en utilisant l'option loader :

// vite.config.ts
import {defineConfig} from 'vite'

// https://vitejs.dev/config/
export default defineConfig(() => ({
  esbuild: {
    loader: "tsx", // OR "jsx"
    include: [
      // Add this for business-as-usual behaviour for .jsx and .tsx files
      "src/**/*.jsx",
      "src/**/*.tsx",
      "node_modules/**/*.jsx",
      "node_modules/**/*.tsx",

      // Add the specific files you want to allow JSX syntax in
      "src/LocalJsxInJsComponent.js",
      "node_modules/bad-jsx-in-js-component/index.js",
      "node_modules/bad-jsx-in-js-component/js/BadJSXinJS.js",
      "node_modules/bad-jsx-in-js-component/ts/index.ts",
      "node_modules/bad-jsx-in-js-component/ts/BadTSXinTS.ts",

      // --- OR ---

      // Add these lines to allow all .js files to contain JSX
      "src/**/*.js",
      "node_modules/**/*.js",

      // Add these lines to allow all .ts files to contain JSX
      "src/**/*.ts",
      "node_modules/**/*.ts",
    ],
  },
}));

Remarque : il y aura une pénalité de performances lors de l'utilisation du chargeur .jsx pour charger des fichiers .js.

La réponse vient de cette discussion sur le GitHub de Vite, marquant la (ancienne) réponse incorrecte comme "correcte".

Mise à jour en mars 2023

La réponse originale en vite build中无法正常工作，只能在vite dev中正常工作。当前版本在vite@^4.0.0 fonctionne pour les deux.

Un exemple de référentiel que vous pouvez cloner et tester votre solution.