JSX transform works in preview mode, but not in dev #10685
Description
Describe the bug
Running vite preview works fine and loads the page. Running vite dev gives the following error:
[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
Reproduction
Steps to reproduce
Click Devtools icon on the navbar (before your user avatar) and go to preview --> log. Try the same with dev
System Info
System:
OS: Linux 5.4 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
CPU: (4) x64 AMD EPYC
Memory: 2.66 GB / 3.85 GB
Container: Yes
Shell: 5.1.4 - /bin/bash
Binaries:
Node: 16.17.0 - /usr/local/bin/node
Yarn: 1.22.19 - /opt/pitcher/bin/yarn
npm: 8.15.0 - /opt/pitcher/bin/npm
Watchman: 20220528.183901.0 - /usr/local/bin/watchman
npmPackages:
vite: ^3 => 3.2.0Used Package Manager
npm
Logs
Click to expand!
> [email protected] dev
> vite --debug
vite:config bundled config file loaded in 58.53ms +0ms
vite:esbuild init tsconfck (root: /project/MithrilTS-JSX) +0ms
vite:esbuild init tsconfck (root: /project/MithrilTS-JSX) +1ms
vite:esbuild init tsconfck end +1ms
vite:esbuild init tsconfck end +0ms
vite:config using resolved config: {
vite:config esbuild: { jsx: 'transform', jsxFactory: 'm', jsxFragment: "'['" },
vite:config optimizeDeps: {
vite:config disabled: 'build',
vite:config force: undefined,
vite:config esbuildOptions: { preserveSymlinks: false }
vite:config },
vite:config server: {
vite:config preTransformRequests: true,
vite:config middlewareMode: false,
vite:config fs: { strict: true, allow: [Array], deny: [Array] }
vite:config },
vite:config configFile: '/project/MithrilTS-JSX/vite.config.ts',
vite:config configFileDependencies: [ '/project/MithrilTS-JSX/vite.config.ts' ],
vite:config inlineConfig: {
vite:config root: undefined,
vite:config base: undefined,
vite:config mode: undefined,
vite:config configFile: undefined,
vite:config logLevel: undefined,
vite:config clearScreen: undefined,
vite:config optimizeDeps: { force: undefined },
vite:config server: {}
vite:config },
vite:config root: '/project/MithrilTS-JSX',
vite:config base: '/',
vite:config resolve: {
vite:config mainFields: [ 'module', 'jsnext:main', 'jsnext' ],
vite:config browserField: true,
vite:config conditions: [],
vite:config extensions: [
vite:config '.mjs', '.js',
vite:config '.mts', '.ts',
vite:config '.jsx', '.tsx',
vite:config '.json'
vite:config ],
vite:config dedupe: [],
vite:config preserveSymlinks: false,
vite:config alias: [ [Object], [Object] ]
vite:config },
vite:config publicDir: '/project/MithrilTS-JSX/public',
vite:config cacheDir: '/project/MithrilTS-JSX/node_modules/.vite',
vite:config command: 'serve',
vite:config mode: 'development',
vite:config ssr: {
vite:config format: 'esm',
vite:config target: 'node',
vite:config optimizeDeps: { disabled: true, esbuildOptions: [Object] }
vite:config },
vite:config isWorker: false,
vite:config mainConfig: null,
vite:config isProduction: false,
vite:config plugins: [
vite:config 'vite:pre-alias',
vite:config 'alias',
vite:config 'vite:modulepreload-polyfill',
vite:config 'vite:optimized-deps',
vite:config 'vite:resolve',
vite:config 'vite:html-inline-proxy',
vite:config 'vite:css',
vite:config 'vite:esbuild',
vite:config 'vite:json',
vite:config 'vite:wasm-helper',
vite:config 'vite:worker',
vite:config 'vite:asset',
vite:config 'vite:wasm-fallback',
vite:config 'vite:define',
vite:config 'vite:css-post',
vite:config 'vite:worker-import-meta-url',
vite:config 'vite:asset-import-meta-url',
vite:config 'vite:dynamic-import-vars',
vite:config 'vite:import-glob',
vite:config 'vite:client-inject',
vite:config 'vite:import-analysis'
vite:config ],
vite:config build: {
vite:config target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ],
vite:config cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ],
vite:config outDir: 'dist',
vite:config assetsDir: 'assets',
vite:config assetsInlineLimit: 4096,
vite:config cssCodeSplit: true,
vite:config sourcemap: false,
vite:config rollupOptions: {},
vite:config minify: 'esbuild',
vite:config terserOptions: {},
vite:config write: true,
vite:config emptyOutDir: null,
vite:config copyPublicDir: true,
vite:config manifest: false,
vite:config lib: false,
vite:config ssr: false,
vite:config ssrManifest: false,
vite:config reportCompressedSize: true,
vite:config chunkSizeWarningLimit: 500,
vite:config watch: null,
vite:config commonjsOptions: { include: [Array], extensions: [Array] },
vite:config dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
vite:config modulePreload: { polyfill: true }
vite:config },
vite:config preview: {
vite:config port: undefined,
vite:config strictPort: undefined,
vite:config host: undefined,
vite:config https: undefined,
vite:config open: undefined,
vite:config proxy: undefined,
vite:config cors: undefined,
vite:config headers: undefined
vite:config },
vite:config env: { BASE_URL: '/', MODE: 'development', DEV: true, PROD: false },
vite:config assetsInclude: [Function: assetsInclude],
vite:config logger: {
vite:config hasWarned: false,
vite:config info: [Function: info],
vite:config warn: [Function: warn],
vite:config warnOnce: [Function: warnOnce],
vite:config error: [Function: error],
vite:config clearScreen: [Function: clearScreen],
vite:config hasErrorLogged: [Function: hasErrorLogged]
vite:config },
vite:config packageCache: Map(0) {},
vite:config createResolver: [Function: createResolver],
vite:config worker: {
vite:config format: 'iife',
vite:config plugins: [
vite:config 'vite:pre-alias',
vite:config 'alias',
vite:config 'vite:modulepreload-polyfill',
vite:config 'vite:optimized-deps',
vite:config 'vite:resolve',
vite:config 'vite:html-inline-proxy',
vite:config 'vite:css',
vite:config 'vite:esbuild',
vite:config 'vite:json',
vite:config 'vite:wasm-helper',
vite:config 'vite:worker',
vite:config 'vite:asset',
vite:config 'vite:wasm-fallback',
vite:config 'vite:define',
vite:config 'vite:css-post',
vite:config 'vite:worker-import-meta-url',
vite:config 'vite:asset-import-meta-url',
vite:config 'vite:dynamic-import-vars',
vite:config 'vite:import-glob',
vite:config 'vite:client-inject',
vite:config 'vite:import-analysis'
vite:config ],
vite:config rollupOptions: {},
vite:config getSortedPlugins: [Function: getSortedPlugins],
vite:config getSortedPluginHooks: [Function: getSortedPluginHooks]
vite:config },
vite:config appType: 'spa',
vite:config experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false },
vite:config getSortedPlugins: [Function: getSortedPlugins],
vite:config getSortedPluginHooks: [Function: getSortedPluginHooks]
vite:config } +11ms
vite:deps Hash is consistent. Skipping. Use --force to override. +0ms
Port 5173 is in use, trying another one...
Port 5174 is in use, trying another one...
VITE v3.2.0 ready in 280 ms
➜ Local: http://localhost:5175/
➜ Network: use --host to expose
vite:html-fallback Rewriting GET / to /index.html +0ms
vite:time 22.47ms /index.html +0ms
vite:resolve 1.84ms /@vite/client -> /project/MithrilTS-JSX/node_modules/vite/dist/client/client.mjs +0ms
vite:load 1.19ms [fs] /@vite/client +0ms
vite:resolve 0.41ms @vite/env -> /project/MithrilTS-JSX/node_modules/vite/dist/client/env.mjs +28ms
vite:resolve 0.12ms /node_modules/vite/dist/client/env.mjs -> /project/MithrilTS-JSX/node_modules/vite/dist/client/env.mjs +0ms
vite:import-analysis 4.09ms [1 imports rewritten] node_modules/vite/dist/client/client.mjs +0ms
vite:transform 26.49ms /@vite/client +0ms
vite:time 33.72ms /@vite/client +266ms
vite:resolve 0.30ms /src/index.ts -> /project/MithrilTS-JSX/src/index.ts +4ms
vite:load 1.62ms [fs] /node_modules/vite/dist/client/env.mjs +31ms
vite:load 0.90ms [fs] /src/index.ts +0ms
vite:import-analysis 0.06ms [no imports] node_modules/vite/dist/client/env.mjs +5ms
vite:transform 1.23ms /node_modules/vite/dist/client/env.mjs +5ms
vite:resolve 0.21ms mithril -> /project/MithrilTS-JSX/node_modules/.vite/deps/mithril.js?v=f2dff326 +7ms
vite:resolve 0.06ms /node_modules/.vite/deps/mithril.js?v=f2dff326 -> /project/MithrilTS-JSX/node_modules/.vite/deps/mithril.js?v=f2dff326 +0ms
vite:import-analysis /node_modules/.vite/deps/mithril.js?v=f2dff326 needs interop +5ms
vite:resolve 3.23ms ./App -> /project/MithrilTS-JSX/src/App.tsx +5ms
vite:resolve 0.10ms /src/App.tsx -> /project/MithrilTS-JSX/src/App.tsx +1ms
vite:import-analysis 6.54ms [2 imports rewritten] src/index.ts +6ms
vite:transform 11.70ms /src/index.ts +11ms
vite:time 13.59ms /src/index.ts +15ms
vite:optimize-deps load /project/MithrilTS-JSX/node_modules/.vite/deps/mithril.js +0ms
vite:load 0.76ms [plugin] /node_modules/.vite/deps/mithril.js?v=f2dff326 +14ms
vite:import-analysis 1.18ms [no imports] node_modules/.vite/deps/mithril.js?v=f2dff326 +3ms
vite:transform 1.74ms /node_modules/.vite/deps/mithril.js?v=f2dff326 +3ms
vite:load 2.77ms [fs] /src/App.tsx +2ms
Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
vite:cache [304] /src/index.ts +0ms
vite:time 0.32ms /src/index.ts +139ms
vite:cache [304] /@vite/client +14ms
vite:time 0.33ms /@vite/client +14ms
vite:deps ✨ static imports crawl ended +8s
vite:cache [memory] /node_modules/vite/dist/client/env.mjs +0ms
vite:time 0.70ms /node_modules/vite/dist/client/env.mjs +258ms
vite:load 0.43ms [fs] /src/App.tsx +424ms
8:29:11 AM [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
Plugin: vite:import-analysis
File: /project/MithrilTS-JSX/src/App.tsx:12:11
6 | view: () => {
7 | return <>
8 | <h1>My Mithril App</h1>
| ^
9 | <Counter />
10 | <Friends />
at formatError (file:///project/MithrilTS-JSX/node_modules/vite/dist/node/chunks/dep-61d2428a.js:42899:46)
at TransformContext.error (file:///project/MithrilTS-JSX/node_modules/vite/dist/node/chunks/dep-61d2428a.js:42895:19)
at TransformContext.transform (file:///project/MithrilTS-JSX/node_modules/vite/dist/node/chunks/dep-61d2428a.js:39696:22)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Object.transform (file:///project/MithrilTS-JSX/node_modules/vite/dist/node/chunks/dep-61d2428a.js:43148:30)
at async loadAndTransform (file:///project/MithrilTS-JSX/node_modules/vite/dist/node/chunks/dep-61d2428a.js:39539:29)
vite:time 16.21ms /src/App.tsx +33ms
vite:cache [memory] /node_modules/.vite/deps/mithril.js?v=f2dff326 +34ms
vite:time 0.50ms /node_modules/.vite/deps/mithril.js?v=f2dff326 +1ms
vite:cache [304] /node_modules/vite/dist/client/env.mjs +416ms
vite:time 0.82ms /node_modules/vite/dist/client/env.mjs +125ms
vite:load 0.51ms [fs] /src/App.tsx +165ms
8:29:11 AM [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
Plugin: vite:import-analysis
File: /project/MithrilTS-JSX/src/App.tsx:12:11
6 | view: () => {
7 | return <>
8 | <h1>My Mithril App</h1>
| ^
9 | <Counter />
10 | <Friends />
at formatError (file:///project/MithrilTS-JSX/node_modules/vite/dist/node/chunks/dep-61d2428a.js:42899:46)
at TransformContext.error (file:///project/MithrilTS-JSX/node_modules/vite/dist/node/chunks/dep-61d2428a.js:42895:19)
at TransformContext.transform (file:///project/MithrilTS-JSX/node_modules/vite/dist/node/chunks/dep-61d2428a.js:39696:22)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Object.transform (file:///project/MithrilTS-JSX/node_modules/vite/dist/node/chunks/dep-61d2428a.js:43148:30)
at async loadAndTransform (file:///project/MithrilTS-JSX/node_modules/vite/dist/node/chunks/dep-61d2428a.js:39539:29) (x2)
vite:time 4.87ms /src/App.tsx +27ms
vite:html-fallback Not rewriting GET /favicon.ico because the path includes a dot (.) character. +1s
vite:time 0.63ms /favicon.ico +341msValidations
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- The provided reproduction is a minimal reproducible example of the bug.