Ways to configure Vite to support using JSX syntax in JS files

Question

Vite does not allow the use of JSX syntax in .js files by default.

I have renamed my files to .jsx (or .tsx), but I have some external dependencies that cannot be renamed.

Vite error example:

✘ [ERROR] JSX syntax extension is not currently enabled

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

How to configure Vite to support JSX expressions in all .js files?

Answer 1

You can change the esbuild configuration by treating all js files as jsx using the loader option:

// 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",
    ],
  },
}));

Note: Using the .jsx loader to load .js files will cause performance losses.

The answer comes from this discussion on Vite's GitHub, marking the incorrect (old) answer as "correct".

Updated in March 2023

Original answer does not work properly in vite build, only in vite dev. The current version works with both in vite@^4.0.0.

A sample repository where you can clone and test your solution.