Closed vaynevayne closed 1 week ago
import react from '@vitejs/plugin-react-swc' import path from 'node:path' import { fileURLToPath } from 'url' import { defineConfig, transformWithEsbuild } from 'vite' import cdn from 'vite-plugin-cdn-import' const filename = fileURLToPath(import.meta.url) const _dirname = path.dirname(filename) // https://vitejs.dev/config/ export default defineConfig({ esbuild: { loader: 'jsx', }, optimizeDeps: { esbuildOptions: { loader: { '.js': 'jsx', }, }, }, plugins: [ cdn({ modules: [ { name: 'polyfill', var: 'Polyfill', path: 'http://polyfill.alicdn.com/v3/polyfill.min.js', }, { name: 'react', var: 'React', path: ``, }, { name: 'react-dom', var: 'ReactDOM', path: ``, }, ], }), { name: 'load+transform-js-files-as-jsx', async transform(code, id) { if (!id.match(/src\/.*\.js$/)) { return null; } // Use the exposed transform from vite, instead of directly // transforming with esbuild return transformWithEsbuild(code, id, { loader: 'jsx', jsx: 'automatic', // 👈 this is important }); }, }, react({ tsDecorators:true } ), ], resolve: { alias: [{ find: '@', replacement: path.resolve(_dirname, 'src') }], }, build: { outDir: 'build', rollupOptions: { external: ['react', 'react-dom'] output: { manualChunks: { lodash: ['lodash'], }, }, }, }, })
{ "compilerOptions": { "allowJs": true, "allowSyntheticDefaultImports": true, "baseUrl": ".", "checkJs": false, "experimentalDecorators": true, "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "isolatedModules": true, "jsx": "react-jsx", "lib": [ "dom", "dom.iterable", "ES2020" ], "strictNullChecks":true, "module": "ES2020", "moduleResolution": "node", "noFallthroughCasesInSwitch": true, "noEmit": true, "noImplicitAny": true, "noUnusedLocals": false, "paths": { "@/*": ["src/*"], }, "resolveJsonModule": true, "skipLibCheck": true, "strict": true, "target": "ES2022", }, "exclude": [ "dist", "node_modules", "public" ], "include": [ "./src", "**.ts", // "**.tsx", // "src/**/*.js", // "src/**/*.tsx", ] }
Using JSX in JS has been highly discouraged for years in Vite and I will not look into issue that have tens of lines of config to continue having non standard syntax into JS files.