search

vitejs / vite-plugin-vue

Vite Vue Plugins
MIT License
440 stars 138 forks source link

[Vue3] build + watch + sourcemap cause rollup conflicting error #35

Open Chen-jj opened 1 year ago

Chen-jj commented 1 year ago

Describe the bug

  1. Enable sourcemap support in Vite config:
build: {
  sourcemap: true,
}
  1. Run build command in watch mode: vite build --watch
  2. Change any contents in <template> of App.vue
  3. Got Rollup Error: Multiple conflicting contents for sourcemap source /home/projects/vitejs-vite-4gfbyh/src/App.vue

Every build when rollup calls addModuleSource method to process modules, it will figure out should use cache or not:

https://github.com/rollup/rollup/blob/27c0557f904321d649c9bd85f6fb670ca5700427/src/ModuleLoader.ts#L271-L275

During the second build which caused by the change of vue <template>, module /some_paths/index.vue?vue&type=script&lang.ts comes in addModuleSource method.But cachedModule.originalCode === sourceDescription.code is true this time, so rollup uses the cached version of this vue script module.

Finally, sourcemap source of module /some_paths/index.vue?vue&type=script&lang.ts is old template + old script, while sourcemap source of module /some_paths/index.vue is new template + old script.Becasue they all have the same source filename but having different source contents, thus the error comes from traceMappings method of rollup:

https://github.com/rollup/rollup/blob/69ff4181e701a0fe0026d0ba147f31bc86beffa8/src/utils/collapseSourcemaps.ts#L87-L89

Reproduction

https://stackblitz.com/edit/vitejs-vite-4gfbyh?file=vite.config.js

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh

Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm

npmPackages:
    @vitejs/plugin-vue: ^3.1.0 => 3.1.0 
    vite: ^3.1.3 => 3.1.3

Used Package Manager

pnpm

Logs

Click to expand! ```shell ~/projects/vitejs-vite-4gfbyh 40s ❯ npm run build:watch $ vite build --watch --debug vite:config bundled config file loaded in 1193.20ms +0ms vite:esbuild init tsconfck (root: /home/projects/vitejs-vite-4gfbyh) +0ms vite:esbuild init tsconfck (root: /home/projects/vitejs-vite-4gfbyh) +1ms vite:esbuild init tsconfck (root: /home/projects/vitejs-vite-4gfbyh) +1ms vite:esbuild init tsconfck (root: /home/projects/vitejs-vite-4gfbyh) +0ms vite:esbuild init tsconfck end +2ms vite:esbuild init tsconfck end +0ms vite:esbuild init tsconfck end +0ms vite:esbuild init tsconfck end +0ms vite:config using resolved config: { vite:config plugins: [ vite:config 'vite:ensure-watch', vite:config 'vite:build-metadata', 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:esbuild', vite:config 'vite:json', vite:config 'vite:wasm-helper', vite:config 'vite:worker', vite:config 'vite:asset', vite:config 'vite:vue', vite:config 'vite:wasm-fallback', vite:config 'vite:define', vite:config 'vite:css-post', vite:config 'vite:build-html', vite:config 'vite:worker-import-meta-url', vite:config 'vite:force-systemjs-wrap-complete', vite:config 'vite:ensure-watch', vite:config 'vite:watch-package-data', vite:config 'commonjs', vite:config 'vite:data-uri', vite:config 'vite:asset-import-meta-url', vite:config 'vite:dynamic-import-vars', vite:config 'vite:import-glob', vite:config 'vite:build-import-analysis', vite:config 'vite:esbuild-transpile', vite:config 'vite:terser', vite:config 'vite:reporter', vite:config 'vite:load-fallback' vite:config ], vite:config build: { vite:config target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ], vite:config polyfillModulePreload: true, vite:config outDir: 'dist', vite:config assetsDir: 'assets', vite:config assetsInlineLimit: 4096, vite:config cssCodeSplit: true, vite:config cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari13' ], vite:config sourcemap: true, vite:config rollupOptions: {}, vite:config minify: 'esbuild', vite:config terserOptions: {}, vite:config write: true, vite:config emptyOutDir: null, 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: true, vite:config w: true, vite:config commonjsOptions: { include: [Array], extensions: [Array] }, vite:config dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] } vite:config }, vite:config optimizeDeps: { vite:config disabled: 'build', vite:config force: undefined, vite:config esbuildOptions: { preserveSymlinks: undefined } vite:config }, vite:config define: { __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false }, vite:config ssr: { vite:config format: 'esm', vite:config target: 'node', vite:config external: [], vite:config optimizeDeps: { disabled: true, esbuildOptions: [Object] } vite:config }, vite:config configFile: '/home/projects/vitejs-vite-4gfbyh/vite.config.js', vite:config configFileDependencies: [ '/home/projects/vitejs-vite-4gfbyh/vite.config.js' ], 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 build: { watch: true, w: true } vite:config }, vite:config root: '/home/projects/vitejs-vite-4gfbyh', vite:config base: '/', vite:config resolve: { alias: [ [Object], [Object] ] }, vite:config publicDir: '/home/projects/vitejs-vite-4gfbyh/public', vite:config cacheDir: '/home/projects/vitejs-vite-4gfbyh/node_modules/.vite', vite:config command: 'build', vite:config mode: 'production', vite:config isWorker: false, vite:config mainConfig: null, vite:config isProduction: true, vite:config server: { vite:config preTransformRequests: true, vite:config middlewareMode: false, vite:config fs: { strict: true, allow: [Array], deny: [Array] } 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: 'production', DEV: false, PROD: true }, 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) { set: [Function (anonymous)] }, vite:config createResolver: [Function: createResolver], vite:config worker: { vite:config format: 'iife', vite:config plugins: [ vite:config 'vite:ensure-watch', vite:config 'vite:build-metadata', 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: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:build-html', vite:config 'vite:worker-import-meta-url', vite:config 'vite:force-systemjs-wrap-complete', vite:config 'vite:ensure-watch', vite:config 'vite:watch-package-data', vite:config 'commonjs', vite:config 'vite:data-uri', vite:config 'vite:asset-import-meta-url', vite:config 'vite:dynamic-import-vars', vite:config 'vite:import-glob', vite:config 'vite:build-import-analysis', vite:config 'vite:esbuild-transpile', vite:config 'vite:terser', vite:config 'vite:reporter', vite:config 'vite:load-fallback' 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 } +10ms vite v3.1.3 building for production... watching for file changes... build started... ✓ 12 modules transformed. dist/index.html 0.44 KiB dist/assets/index.c16bd851.css 1.01 KiB / gzip: 0.54 KiB dist/assets/index.6b8e1b06.js 51.67 KiB / gzip: 20.79 KiB dist/assets/index.6b8e1b06.js.map 570.62 KiB built in 1538ms. build started... ✓ 13 modules transformed. rendering chunks (1)...Multiple conflicting contents for sourcemap source /home/projects/vitejs-vite-4gfbyh/src/App.vue ```

Validations

obrejla commented 1 year ago

Same here :(

marfous commented 1 year ago

Facing the same issue as described in the report.

i-platonov commented 1 year ago

@Chen-jj I found a workaround for this - just use <script setup> notation of the component - it should work

MarcelGeo commented 1 year ago

Same issue :( watching with sourcemap is not possible currently with vite (?)

MarcelGeo commented 6 months ago

Maybe in vite 5 will be fix for this. I

voodoobat commented 6 months ago

Same problem (

stephenhebert commented 5 months ago

I don't know if it's related, but there are similar errors even when not in watch mode in certain cases -- specifically for mac and linux platforms.

https://github.com/nuxt/nuxt/issues/14981 https://github.com/unocss/unocss/issues/3224 https://github.com/intlify/bundle-tools/issues/107

Ribeiro-Tiago commented 1 month ago

I also ran into this issue today randomly and have some maybe useful information after a lot of trial and error:

Versions im running

"@vue/compiler-dom": "^3.4.27",
"@vue/compiler-sfc": "^3.4.27",
"@vue/runtime-core": "^3.4.27",
"vite": "^5.2.12",
"vue": "^3.4.27",
"vue-tsc": "^2.0.19",
"typescript": "^5.4.5",

I have 3 build scripts for each env 

"build:dev": "vue-tsc --noEmit && NODE_ENV=development vite build --mode development",
"build:staging": "vue-tsc --noEmit && NODE_ENV=staging vite build --mode staging",
"build": "vue-tsc --noEmit && NODE_ENV=production vite build --mode production",

i have some env based config so i need to know which env its being built, so i have the NODE_ENV defined for each.

After some time I discovered that this issue was only happening when building for dev and staging envs, production would always work with no issues. After some more investigation I figured out that without the NODE_ENV variable, any environment would build correctly. I now ended up renaming NODE_ENV to ENV and it's now working.

My guess is that there's some behaviour somewhere under the hood (vite, rollup, some other dependecy) that there's some bundling that happens that does/doesn't take into account NODE_ENV?