Incomplete production sourcemaps for the HelloWorld app.

Peyruz — Fri, 10 Feb 2023 17:51:12 +0000

I am trying to generate sourcemaps for a production build for the HelloWorld App for Vite+Vue. Unfortunately it does not show all the components (only shows the WelcomeItem component). See snaphot from chrome devtools below:

When you inspect the sourcemap files, you see that it does not add App.vue, Helloworld.vue and TheWelcome.vue to sources:

{
    "version": 3,
    "file": "index-ecfc4d4f.js",
    "sources": [
        "../../node_modules/@vue/shared/dist/shared.esm-bundler.js",
        "../../node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js",
        "../../node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js",
        "../../node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js",
        "../../src/assets/logo.svg",
        "../../src/components/WelcomeItem.vue",
        "../../src/components/icons/IconDocumentation.vue",
        "../../src/components/icons/IconTooling.vue",
        "../../src/components/icons/IconEcosystem.vue",
        "../../src/components/icons/IconCommunity.vue",
        "../../src/components/icons/IconSupport.vue",
        "../../src/main.js"
    ],
    "sourcesContent": [ ...
    ], ...
}

The dev mode is working OK, I can see my source code.

Here is my config. All I did was add build.sourcemap=true.

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    sourcemap: true
  }
})

DEV Community: Peyruz

Incomplete production sourcemaps for the HelloWorld app.