nuxt: Getting "Multiple conflicting contents for sourcemap source" when trying to build app with rc.10

Same issue on “nuxt”: “3.0.0”,

So I did some more debugging with the reproduction I shared. In my particular case there is only one component causing this issue - CardGroup.vue .

1. If CardGroup component is not used then error goes away and build is successful, indicating this is the only component involved in the error.

2. Removing the <script>...</script> from CardGroup.vue will make the error go away and build is successful. I’m only using it to name the component in this instance.

3. Removing xl:(grid-cols-4 mt-20 px-8) windi class from CardGroup.vue#L7 makes the error go away and build is successful.

Doing either 2 or 3 independently will make the error go away.

To clarify the above:

• <script> and no windi class = OK
• windi class and no <script> = OK
• <script> and windi class = ERROR

I put a breakpoint at Link.traceMappings (node_modules/vite/node_modules/rollup/dist/es/shared/rollup.js:13934:32) which is where the error is thrown.

class Link {
 ...
   traceMappings() {
    ...
 **   else if (content != null && sourcesContent[sourceIndex] !== content) {
        return error({
            message: `Multiple conflicting contents for sourcemap source ${filename}`
        });
    }
   ...
}

I noticed there is a difference in content and sourcesContent[sourceIndex] variables which triggers the error. I’m combining my classes via windicss such as xl:(mt-10 pt-10). Variable sourcesContent[sourceIndex] has them separated like xl:mt-10 xl:pt-10 (maybe a part of the windi build process?), but this does not match content which retains original string like xl:(mt-10 pt-10).

What doesn’t make sense is that I use these same windi class combinators in other components and they are fine. Also, why does removing the script and keeping the windi class build successfully?

This is about as far as I got and it’s a weird one, but hopefully this provides some help in resolving the issue.

I revisted my reproduction I posted in an earlier comment. Repo for my project is at https://github.com/ShaggyTech/dubsquared.

I’m now on Nuxt v3.4.3 with Nitro v2.3.3. I still receive the sourcemap error when trying to build the app via nuxt build.

I can make the error go away now by turning off server sourcemap in the nuxt config like so:

sourcemap: {
  server: false,
},

Previously I was also disabling client sourcemaps but the problem now seems isolated to only the server build, it does not error until the server build happens, client build is successful in any case.

The following is the error and trace I’m getting:

 ERROR  Multiple conflicting contents for sourcemap source /home/shaggy/git-repos/nuxt3/dubsquared/components/Layout/Page/Footer/CardGroup.vue 

  at error (node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:2125:30)
  at Link.traceMappings (node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:17163:32)
  at collapseSourcemaps (node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:17247:63)
  at transformChunk (node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:17342:15)
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  at async node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:17386:17
  at async Promise.all (index 50)
  at async transformChunksAndGenerateContentHashes (node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:17382:5)
  at async renderChunks (node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:17292:109)
  at async Bundle.generate (node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:17510:13)
  at async node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:25802:27
  at async catchUnfinishedHookActions (node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:24889:20)
  at async Module.build (node_modules/vite/dist/node/chunks/dep-a178814b.js:46426:22)
  at async buildServer (node_modules/@nuxt/vite-builder/dist/shared/vite-builder.1d3e962a.mjs:845:5)
  at async bundle (node_modules/@nuxt/vite-builder/dist/shared/vite-builder.1d3e962a.mjs:1155:3)
  at async build (node_modules/nuxt/dist/index.mjs:3175:5)
  at async Object.invoke (node_modules/nuxi/dist/chunks/build.mjs:55:5)
  at async _main (node_modules/nuxi/dist/cli.mjs:48:20)

Output from npx nuxi info:

Nuxt project info:                                                                                                                                                         4:45:00 PM

------------------------------
- Operating System: Linux
- Node Version:     v18.13.0
- Nuxt Version:     3.4.3
- Nitro Version:    2.3.3
- Package Manager:  yarn@3.3.1
- Builder:          vite
- User Config:      sourcemap, imports, css, runtimeConfig, modules, build, pwa, vite, vueuse, windicss
- Runtime Modules:  @formkit/nuxt@0.16.5, @kevinmarrec/nuxt-pwa@0.17.0, @pinia/nuxt@0.4.9, @vueuse/nuxt@10.1.0, @vueuse/motion/nuxt@2.0.0-beta.27, nuxt-windicss@2.6.1, unplugin-icons/nuxt, ~/modules/sitemap
- Build Modules:    -
------------------------------

Same issue on .rc13 It looks related to the <client-only/> Build fails when 2 or more <client-only/> are present in code with the following error Multiple conflicting contents for sourcemap source targeting one of the files containing it.

Build works when

• None or 1 <client-only/> present in the whole codebase OR
• experimental: { treeshakeClientOnly: false } in nuxt.config.ts

@zavvla Do you use <client-only/> blocks in there? If yes, can you try what happens if you remove it/them.

yes, it fixed problem

@danielroe when i run pnpm run build/generate Nuxt 3.4.3 also not work reproduction: https://github.com/Soya-xy/nuxt3-editor

@danielroe in Nuxt v3.3.2 this problem is gone on my end, thanks 🙏

Same issue caused when using multiple ClinetOnly (e.g. ImgComparisonSlider). This fixed it for me:

export default defineNuxtConfig({
    experimental:{
        treeshakeClientOnly: false
    }
})

Thanks for the debugging @ShaggyTech. The reason that commit triggers it is that previously, vite.build.sourcemap was set to false by default, and that is probably the best workaround for now i you are experiencing this. (You can also set sourcemap to false, but that will also disable nitro sourcemaps, which you may wish to have.)

As for the cause, it seems like it might possibly be an upstream vite issue that is triggered by the interactions between vite plugins. It is triggered in the reproduction here, if I can tell correctly, by a sourcemap generated by components loader plugin not including the changes to classes, as you note above.

I did some more investigation tonight.

• Removed all <ClientOnly> from the app = still errors
• Tried setting experimental.treeshakeClientOnly to false = still errors

I found that this commit introduced the error: https://github.com/nuxt/framework/commit/eab4706614199594006b2132f57e838718ac3e73

The commit preceding that one does not error on build: https://github.com/nuxt/framework/commit/ec210190d13f904440ff25c7c4260252e9af892a

You can test by using the following nuxt versions:

• "nuxt": "npm:nuxt3@3.0.0-rc.10-27709172.ec21019" has no errors
• "nuxt": "npm:nuxt3@3.0.0-rc.10-27709178.eab4706" has sourcemap errors

This change to Vite maybe related?

I’ve added experimental: { treeshakeClientOnly: true }, to nuxt.config.js and the build still failed.

I do have the same issue with rc.11 and it seems like <client-only></client-only> is the problem.

I’m getting the same error with RC 11

I had the same issue and solved it temporarily by adding this to my nuxt.config:

sourcemap: {
  server: false,
  client: false,
},

@danielroe This is not really a ‘minimal’ reproduction but maybe it will help:

Stackblitz Repo (branch: sourcemap-errors)

Running ‘yarn build’ will produce similar errors as to what @Bodokh described.