I know JSX should be written in .jsx or .tsx files. But I just joined a project and want to migrate to vite, and they used .js for years now. There is not a single .jsx file in the project. How can I make vite accept jsx in .js files?
vite.config.js:
import {defineConfig} from 'vite';
import react from '@vitejs/plugin-react';
import checker from "vite-plugin-checker";
import svgr from 'vite-plugin-svgr';
export default defineConfig({
envDir: 'build-config',
build: {
outDir: '../dist',
rollupOptions: {
output: {
entryFileNames: 'client.min.js'
}
}
},
plugins: [
checker({typescript: true}),
react({
devTarget: "es2022",
jsxImportSource: '@emotion/react',
include: ['**/*.js', '**/*.jsx'], // Include both .js and .jsx files
babel: {
plugins: [
'@emotion/babel-plugin'
]
}
}),
svgr(),
{ // being desperate
name: 'custom-jsx',
enforce: 'pre',
transform(code, id) {
if (id.endsWith('.js')) {
return {
code: code.replace(//* @jsxImportSource *//, ''),
map: null
};
}
}
}
],
server: {
open: true,
hot: true,
port: 8080,
watch: {
usePolling: true
}
},
optimizeDeps: {
include: ['react', 'react-dom'] // Add any other dependencies you need to pre-bundle
},
esbuild: {
loader: {
'.js': 'jsx', // Set the loader for .js files to jsx
},
},
});
tsconfig.json
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true,
"moduleResolution": "node",
"sourceMap": true
},
"exclude": [
"node_modules"
]
}
I’d prefer swc, but the result was the same for both transpilers