Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
FrozenAlex opened this issue Jul 2, 2023 · 1 comment
Closed

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

FrozenAlex opened this issue Jul 2, 2023 · 1 comment

Comments

@FrozenAlex
Copy link

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!) 
➜  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/[email protected]/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/[email protected]/node_modules/vite/dist/client/env.mjs +19ms
  vite:import-analysis 0.63ms [1 imports rewritten] node_modules/.pnpm/[email protected]/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/[email protected]/node_modules/vite/dist/client/env.mjs +2ms
  vite:import-analysis 0.03ms [no imports] node_modules/.pnpm/[email protected]/node_modules/vite/dist/client/env.mjs +3ms
  vite:transform 0.25ms /node_modules/.pnpm/[email protected]/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/[email protected]/node_modules/vite/dist/client/env.mjs +2ms
  vite:time 0.46ms /node_modules/.pnpm/[email protected]/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/[email protected]/node_modules/vite/dist/client/env.mjs +2ms
  vite:time 1.48ms /node_modules/.pnpm/[email protected]/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!) 
[vite] connecting...
client.ts:133 [vite] connected.
client.ts:462 [vite] hot updated: /src/App.tsx
@FrozenAlex FrozenAlex changed the title Vite React+TS+SWC HMR breaks when base path is set to anything except '/' Vite React+TS+SWC HMR breaks when the base path is set to anything except '/' Jul 2, 2023
@ArnaudBarre ArnaudBarre mentioned this issue Jul 2, 2023
Merged
@ArnaudBarre
Copy link
Member

This is caused by pnpm/pnpm#6463

Update the plugin version to the will fix the issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@FrozenAlex @ArnaudBarre