search

vitejs / vite-plugin-react-swc

Speed up your Vite dev server with SWC
MIT License
778 stars 50 forks source link

Vite React+TS+SWC HMR breaks when the base path is set to anything except '/' #125

Closed FrozenAlex closed 1 year ago

FrozenAlex commented 1 year ago

I set up a project using react and typescript with swc, changed base url and it broke auto reloading of components using hmr. The bug seems to not be present on non swc template.

Minimal reproducible example https://github.com/FrozenAlex/SWCViteBugExample

Steps to reproduce

Run

pnpm install
pnpm dev

And change App.tsx to see the results. Last commit is the only change it needs (adding base option to vite.config.ts)

Logs

Vite dev log (Click to expand!) ```shell ➜ SWCViteBugExample git:(main) pnpm vite dev --debug vite:config bundled config file loaded in 34.48ms +0ms vite:config using resolved config: { vite:config plugins: [ vite:config 'vite:optimized-deps', vite:config 'vite:watch-package-data', vite:config 'vite:pre-alias', vite:config 'alias', vite:config 'vite:modulepreload-polyfill', vite:config 'vite:resolve', vite:config 'vite:html-inline-proxy', vite:config 'vite:css', vite:config 'vite:json', vite:config 'vite:wasm-helper', vite:config 'vite:worker', vite:config 'vite:asset', vite:config 'vite:react-swc', 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 base: '/react-vite-swc/', vite:config optimizeDeps: { vite:config disabled: 'build', vite:config force: undefined, vite:config include: [ 'react/jsx-dev-runtime' ], vite:config esbuildOptions: { preserveSymlinks: false } vite:config }, vite:config server: { vite:config preTransformRequests: true, vite:config sourcemapIgnoreList: [Function: isInNodeModules], vite:config middlewareMode: false, vite:config fs: { strict: true, allow: [Array], deny: [Array] } vite:config }, vite:config esbuild: false, vite:config configFile: '/home/alex/foss/SWCViteBugExample/vite.config.ts', vite:config configFileDependencies: [ '/home/alex/foss/SWCViteBugExample/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: '/home/alex/foss/SWCViteBugExample', vite:config rawBase: '/react-vite-swc/', 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: '/home/alex/foss/SWCViteBugExample/public', vite:config cacheDir: '/home/alex/foss/SWCViteBugExample/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 build: { vite:config target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ], vite:config cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ], 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 ssrEmitAssets: 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 cssMinify: 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 envDir: '/home/alex/foss/SWCViteBugExample', vite:config env: { vite:config BASE_URL: '/react-vite-swc/', vite:config MODE: 'development', vite:config DEV: true, vite:config PROD: false vite:config }, 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(1) { vite:config 'fnpd_/home/alex/foss/SWCViteBugExample' => { vite:config dir: '/home/alex/foss/SWCViteBugExample', vite:config data: [Object], vite:config hasSideEffects: [Function: hasSideEffects], vite:config webResolvedImports: {}, vite:config nodeResolvedImports: {}, vite:config setResolvedCache: [Function: setResolvedCache], vite:config getResolvedCache: [Function: getResolvedCache] vite:config }, vite:config set: [Function (anonymous)] vite:config }, vite:config createResolver: [Function: createResolver], vite:config worker: { vite:config format: 'iife', vite:config plugins: [ vite:config 'vite:optimized-deps', vite:config 'vite:watch-package-data', vite:config 'vite:pre-alias', vite:config 'alias', vite:config 'vite:modulepreload-polyfill', vite:config 'vite:resolve', vite:config 'vite:html-inline-proxy', vite:config 'vite:css', 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 } +5ms vite:deps Hash is consistent. Skipping. Use --force to override. +0ms VITE v4.3.9 ready in 161 ms ➜ Local: http://localhost:5173/react-vite-swc/ ➜ Network: use --host to expose ➜ press h to show help vite:html-fallback Rewriting GET / to /index.html +0ms vite:resolve 1.94ms /src/main.tsx -> /home/alex/foss/SWCViteBugExample/src/main.tsx +0ms vite:time 19.44ms /index.html +0ms vite:load 1.71ms [fs] /src/main.tsx +0ms vite:resolve 1.70ms ./App.tsx -> /home/alex/foss/SWCViteBugExample/src/App.tsx +37ms vite:resolve 1.91ms ./index.css -> /home/alex/foss/SWCViteBugExample/src/index.css +1ms vite:resolve 3.20ms react/jsx-dev-runtime -> /home/alex/foss/SWCViteBugExample/node_modules/.vite/deps/react_jsx-dev-runtime.js?v=4de22e1b +0ms vite:resolve 2.42ms react -> /home/alex/foss/SWCViteBugExample/node_modules/.vite/deps/react.js?v=4de22e1b +0ms vite:resolve 2.47ms react-dom/client -> /home/alex/foss/SWCViteBugExample/node_modules/.vite/deps/react-dom_client.js?v=4de22e1b +0ms vite:import-analysis /react-vite-swc/node_modules/.vite/deps/react_jsx-dev-runtime.js?v=4de22e1b needs interop +0ms vite:import-analysis /react-vite-swc/node_modules/.vite/deps/react.js?v=4de22e1b needs interop +8ms vite:import-analysis /react-vite-swc/node_modules/.vite/deps/react-dom_client.js?v=4de22e1b needs interop +1ms vite:optimize-deps load /home/alex/foss/SWCViteBugExample/node_modules/.vite/deps/react_jsx-dev-runtime.js +0ms vite:optimize-deps load /home/alex/foss/SWCViteBugExample/node_modules/.vite/deps/react.js +0ms vite:optimize-deps load /home/alex/foss/SWCViteBugExample/node_modules/.vite/deps/react-dom_client.js +0ms vite:import-analysis 18.27ms [5 imports rewritten] src/main.tsx +2ms vite:transform 46.38ms /src/main.tsx +0ms vite:resolve 0.50ms /@vite/client -> /home/alex/foss/SWCViteBugExample/node_modules/.pnpm/vite@4.3.9/node_modules/vite/dist/client/client.mjs +15ms vite:load 4.86ms [plugin] /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=4de22e1b +50ms vite:resolve 0.21ms ./chunk-ZLG4WENO.js -> /home/alex/foss/SWCViteBugExample/node_modules/.vite/deps/chunk-ZLG4WENO.js?v=4de22e1b +4ms vite:optimize-deps load /home/alex/foss/SWCViteBugExample/node_modules/.vite/deps/chunk-ZLG4WENO.js +8ms vite:import-analysis 2.39ms [1 imports rewritten] node_modules/.vite/deps/react_jsx-dev-runtime.js?v=4de22e1b +7ms vite:transform 3.10ms /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=4de22e1b +6ms vite:load 8.38ms [plugin] /node_modules/.vite/deps/react.js?v=4de22e1b +4ms vite:import-analysis 1.41ms [1 imports rewritten] node_modules/.vite/deps/react.js?v=4de22e1b +2ms vite:transform 1.70ms /node_modules/.vite/deps/react.js?v=4de22e1b +2ms vite:load 19.87ms [fs] /src/App.tsx +2ms vite:load 20.35ms [fs] /src/index.css +0ms vite:hmr [self-accepts] src/index.css +0ms vite:import-analysis 0.54ms [0 imports rewritten] src/index.css +3ms vite:transform 2.41ms /src/index.css +3ms vite:load 9.47ms [fs] /@vite/client +3ms vite:resolve 1.11ms ./assets/react.svg -> /home/alex/foss/SWCViteBugExample/src/assets/react.svg +11ms vite:resolve 1.24ms ./App.css -> /home/alex/foss/SWCViteBugExample/src/App.css +0ms vite:import-analysis /react-vite-swc/node_modules/.vite/deps/react_jsx-dev-runtime.js?v=4de22e1b needs interop +6ms vite:import-analysis /react-vite-swc/node_modules/.vite/deps/react.js?v=4de22e1b needs interop +1ms vite:cache [memory] /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=4de22e1b +0ms vite:cache [memory] /node_modules/.vite/deps/react.js?v=4de22e1b +0ms vite:hmr [self-accepts] src/App.tsx +8ms vite:load 0.98ms [plugin] /src/assets/react.svg +9ms vite:import-analysis 5.23ms [6 imports rewritten] src/App.tsx +2ms vite:load 1.13ms [plugin] /vite.svg +0ms vite:load 1.19ms [plugin] /@react-refresh +0ms vite:transform 12.09ms /src/App.tsx +9ms vite:import-analysis 0.08ms [no imports] src/assets/react.svg +1ms vite:transform 0.58ms /src/assets/react.svg +1ms vite:import-analysis 0.03ms [no imports] /vite.svg +0ms vite:import-analysis 0.19ms [no imports] /@react-refresh +0ms vite:transform 0.60ms /vite.svg +0ms vite:transform 0.67ms /@react-refresh +0ms vite:load 23.80ms [plugin] /node_modules/.vite/deps/react-dom_client.js?v=4de22e1b +1ms vite:import-analysis 5.41ms [1 imports rewritten] node_modules/.vite/deps/react-dom_client.js?v=4de22e1b +8ms vite:transform 7.62ms /node_modules/.vite/deps/react-dom_client.js?v=4de22e1b +8ms vite:load 26.58ms [plugin] /node_modules/.vite/deps/chunk-ZLG4WENO.js?v=4de22e1b +11ms vite:import-analysis 0.40ms [no imports] node_modules/.vite/deps/chunk-ZLG4WENO.js?v=4de22e1b +4ms vite:transform 0.85ms /node_modules/.vite/deps/chunk-ZLG4WENO.js?v=4de22e1b +4ms vite:resolve 0.07ms @vite/env -> /home/alex/foss/SWCViteBugExample/node_modules/.pnpm/vite@4.3.9/node_modules/vite/dist/client/env.mjs +19ms vite:import-analysis 0.63ms [1 imports rewritten] node_modules/.pnpm/vite@4.3.9/node_modules/vite/dist/client/client.mjs +2ms vite:transform 0.87ms /@vite/client +2ms vite:time 34.65ms /@vite/client +86ms vite:load 17.09ms [fs] /src/App.css +4ms vite:hmr [self-accepts] src/App.css +17ms vite:import-analysis 0.20ms [0 imports rewritten] src/App.css +1ms vite:transform 0.49ms /src/App.css +1ms vite:cache [304] /src/main.tsx +0ms vite:time 0.29ms /src/main.tsx +2ms vite:load 3.35ms [fs] /node_modules/.pnpm/vite@4.3.9/node_modules/vite/dist/client/env.mjs +2ms vite:import-analysis 0.03ms [no imports] node_modules/.pnpm/vite@4.3.9/node_modules/vite/dist/client/env.mjs +3ms vite:transform 0.25ms /node_modules/.pnpm/vite@4.3.9/node_modules/vite/dist/client/env.mjs +4ms vite:cache [304] /@react-refresh +18ms vite:time 1.17ms /@react-refresh +18ms vite:cache [memory] /src/App.tsx +39ms vite:time 0.81ms /src/App.tsx +3ms vite:cache [304] /src/index.css +6ms vite:time 0.87ms /src/index.css +3ms vite:cache [304] /node_modules/.pnpm/vite@4.3.9/node_modules/vite/dist/client/env.mjs +2ms vite:time 0.46ms /node_modules/.pnpm/vite@4.3.9/node_modules/vite/dist/client/env.mjs +2ms vite:cache [304] /@react-refresh +8ms vite:time 0.49ms /@react-refresh +8ms vite:cache [304] /src/assets/react.svg +2ms vite:time 0.70ms /src/assets/react.svg?import +2ms vite:cache [304] /vite.svg +3ms vite:time 0.31ms /vite.svg?import +3ms vite:cache [304] /src/App.css +1ms vite:time 0.53ms /src/App.css +1ms vite:time 0.48ms /vite.svg +29ms vite:time 0.87ms /src/assets/react.svg +2ms vite:time 0.32ms /vite.svg +161ms vite:time 0.28ms / +5s vite:html-fallback Rewriting GET / to /index.html +5s vite:cache [memory] /src/main.tsx +5s vite:time 6.18ms /index.html +38ms vite:cache [memory] /@vite/client +33ms vite:time 0.74ms /@vite/client +33ms vite:cache [memory] /src/main.tsx +4ms vite:time 1.00ms /src/main.tsx +3ms vite:cache [memory] /@react-refresh +49ms vite:time 0.90ms /@react-refresh +49ms vite:cache [memory] /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=4de22e1b +3ms vite:time 0.77ms /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=4de22e1b +3ms vite:cache [memory] /node_modules/.vite/deps/react.js?v=4de22e1b +1ms vite:time 0.59ms /node_modules/.vite/deps/react.js?v=4de22e1b +2ms vite:cache [memory] /node_modules/.vite/deps/react-dom_client.js?v=4de22e1b +1ms vite:time 0.44ms /node_modules/.vite/deps/react-dom_client.js?v=4de22e1b +0ms vite:cache [memory] /src/App.tsx +5ms vite:time 0.64ms /src/App.tsx +5ms vite:cache [memory] /src/index.css +1ms vite:time 0.46ms /src/index.css +1ms vite:cache [memory] /node_modules/.pnpm/vite@4.3.9/node_modules/vite/dist/client/env.mjs +2ms vite:time 1.48ms /node_modules/.pnpm/vite@4.3.9/node_modules/vite/dist/client/env.mjs +3ms vite:cache [memory] /node_modules/.vite/deps/chunk-ZLG4WENO.js?v=4de22e1b +2ms vite:time 0.64ms /node_modules/.vite/deps/chunk-ZLG4WENO.js?v=4de22e1b +1ms vite:cache [memory] /@react-refresh +5ms vite:time 0.90ms /@react-refresh +6ms vite:cache [memory] /src/assets/react.svg +2ms vite:time 1.51ms /src/assets/react.svg?import +2ms vite:cache [memory] /vite.svg +4ms vite:time 1.09ms /vite.svg?import +3ms vite:cache [memory] /src/App.css +2ms vite:time 1.70ms /src/App.css +3ms vite:time 3.58ms /node_modules/.vite/deps/react_jsx-dev-runtime.js.map +35ms vite:time 2.60ms /node_modules/.vite/deps/react.js.map +0ms vite:time 4.48ms /node_modules/.vite/deps/chunk-ZLG4WENO.js.map +2ms vite:time 30.49ms /node_modules/.vite/deps/react-dom_client.js.map +27ms vite:time 4.72ms /vite.svg +11ms vite:time 3.59ms /src/assets/react.svg +1ms vite:time 1.21ms /vite.svg +187ms vite:hmr [file change] src/App.tsx +13s 1:22:17 AM [vite] hmr update /src/App.tsx vite:load 0.68ms [fs] /src/App.tsx +13s vite:cache [memory] /src/assets/react.svg +8s vite:cache [memory] /src/App.css +0ms vite:import-analysis /react-vite-swc/node_modules/.vite/deps/react_jsx-dev-runtime.js?v=4de22e1b needs interop +13s vite:import-analysis /react-vite-swc/node_modules/.vite/deps/react.js?v=4de22e1b needs interop +1ms vite:cache [memory] /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=4de22e1b +1ms vite:cache [memory] /node_modules/.vite/deps/react.js?v=4de22e1b +0ms vite:cache [memory] /vite.svg +0ms vite:cache [memory] /@react-refresh +0ms vite:hmr [self-accepts] src/App.tsx +324ms vite:import-analysis 2.83ms [6 imports rewritten] src/App.tsx +0ms vite:transform 4.82ms /src/App.tsx +13s vite:time 6.51ms /src/App.tsx +8s vite:time 6.13ms /src/App.tsx +0ms ```
Browser logs (Click to expand!) ```shell [vite] connecting... client.ts:133 [vite] connected. client.ts:462 [vite] hot updated: /src/App.tsx ```
ArnaudBarre commented 1 year ago

This is caused by https://github.com/pnpm/pnpm/issues/6463

Update the plugin version to the will fix the issue.