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

Chen-jj · 2022-09-27T03:33:21Z

Describe the bug

Enable sourcemap support in Vite config:

build: {
  sourcemap: true,
}

Run build command in watch mode: vite build --watch
Change any contents in <template> of App.vue
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!

~/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

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.

The text was updated successfully, but these errors were encountered:

obrejla · 2022-11-15T13:52:16Z

Same here :(

marfous · 2022-11-15T21:32:11Z

Facing the same issue as described in the report.

i-platonov · 2022-11-16T17:23:09Z

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

vitejs/vite-plugin-vue#35

MarcelGeo · 2023-05-29T08:50:41Z

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

…lugin-vue#35

MarcelGeo · 2024-01-04T23:49:19Z

Maybe in vite 5 will be fix for this. I

voodoobat · 2024-01-10T07:08:49Z

Same problem (

stephenhebert · 2024-02-02T21:01:31Z

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.

nuxt/nuxt#14981
unocss/unocss#3224
intlify/bundle-tools#107

Ribeiro-Tiago · 2024-06-07T12:10:42Z

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?

bugaio · 2024-08-18T14:56:48Z

Same problem (

logaretm · 2024-12-06T14:28:08Z

We started seeing this as well after upgrading a lot of dependencies. I upgraded our deps one by one until I have narrowed it to:

vitejs/plugin-vue 5.0.4 -> 5.2.1

I tried vitejs/[email protected] and it fails to build with this error, 5.0.4 works perfectly.

it happens in random files in each build. Changing a file content a little bit makes it pass the file it was failing at but it fails in another one.

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.

I can confirm this, passing NODE_ENV with a value of anything but production works, which explains why our CI only caught this during building production assets for the CDN and not the E2E tests. But this workaround won't work for us as it will affect the bundled code negatively.

susnux · 2025-01-11T10:07:08Z

I can confirm this, passing NODE_ENV with a value of anything but production works

Same issue here, but also with NODE_ENV=development

edison1105 · 2025-01-14T06:17:24Z

Edit:
I've made a PR for this one, please try this pre-release package #505 (comment)

Here is a workaround

function vueNoCachePlugin() {
  let config

  return {
    name: 'vue-no-cache',
    configResolved(resolvedConfig) {
      config = resolvedConfig
    },
    shouldTransformCachedModule({ id }) {
      // `vite build --watch`
	  // always transform cached modules for vue sfc
      if (
        config.command === 'build' && 
        config.build.watch && 
		config.build.sourcemap &&
        id.includes('.vue')
      ) {
        return true
      }
      return false
    }
  };
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueNoCachePlugin()
  ],
  build: {
    sourcemap: true,
  },
});

dkamins · 2025-01-20T04:37:55Z

This hit me twice over several months on separate projects, where I forgot about the workaround the first time 🤦‍♂️ and had to troubleshoot all over again.

Problem: vite watch mode builds properly, then logs "Multiple conflicting contents for sourcemap..." after you force a rebuild (even by adding a blank line to a .vue file and saving).

Workaround: Disable build.sourcemap in Vite config.

@edison1105's PR looks simple (just a few lines). Hopefully a maintainer can review and merge for an upcoming minor/patch release.

Chen-jj added the pending triage label Sep 27, 2022

haoqunjiang transferred this issue from vitejs/vite Dec 4, 2022

Chen-jj added a commit to NervJS/taro that referenced this issue Mar 14, 2023

fix(vite): 针对 Vue3 默认关闭 sourcemap

36d3624

vitejs/vite-plugin-vue#35

MarcelGeo added a commit to MerginMaps/server that referenced this issue May 29, 2023

Disable source map for watching: Based on issue in vite vitejs/vite-p…

8c96316

…lugin-vue#35

sapphi-red mentioned this issue May 30, 2023

Multiple conflicting contents for sourcemap source vitejs/vite#13376

Closed

7 tasks

edison1105 added bug Something isn't working and removed pending triage labels Sep 25, 2024

edison1105 linked a pull request Jan 14, 2025 that will close this issue

fix(plugin-vue): resolve sourcemap conflicts in build watch mode with cached modules #505

Open

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Chen-jj commented Sep 27, 2022 •

edited

Loading

obrejla commented Nov 15, 2022

marfous commented Nov 15, 2022

i-platonov commented Nov 16, 2022 •

edited

Loading

MarcelGeo commented May 29, 2023

MarcelGeo commented Jan 4, 2024

voodoobat commented Jan 10, 2024

stephenhebert commented Feb 2, 2024

Ribeiro-Tiago commented Jun 7, 2024 •

edited

Loading

bugaio commented Aug 18, 2024

logaretm commented Dec 6, 2024 •

edited

Loading

susnux commented Jan 11, 2025

edison1105 commented Jan 14, 2025 •

edited

Loading

dkamins commented Jan 20, 2025

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

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

Comments

Chen-jj commented Sep 27, 2022 • edited Loading

Describe the bug

Reproduction

System Info

Used Package Manager

Logs

Validations

obrejla commented Nov 15, 2022

marfous commented Nov 15, 2022

i-platonov commented Nov 16, 2022 • edited Loading

MarcelGeo commented May 29, 2023

MarcelGeo commented Jan 4, 2024

voodoobat commented Jan 10, 2024

stephenhebert commented Feb 2, 2024

Ribeiro-Tiago commented Jun 7, 2024 • edited Loading

bugaio commented Aug 18, 2024

logaretm commented Dec 6, 2024 • edited Loading

susnux commented Jan 11, 2025

edison1105 commented Jan 14, 2025 • edited Loading

dkamins commented Jan 20, 2025

Chen-jj commented Sep 27, 2022 •

edited

Loading

i-platonov commented Nov 16, 2022 •

edited

Loading

Ribeiro-Tiago commented Jun 7, 2024 •

edited

Loading

logaretm commented Dec 6, 2024 •

edited

Loading

edison1105 commented Jan 14, 2025 •

edited

Loading