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
How to configure Vite to support JSX expressions in all .js files?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You can change the esbuild configuration by treating all js files as jsx using the
loaderoption:// 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 fromthis 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 invite dev. The current version works with both invite@^4.0.0.Asample repositorywhere you can clone and test your solution.