DEV Community

Peyruz
Peyruz

Posted on

Incomplete production sourcemaps for the HelloWorld app.

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:

enter image description here

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": [ ...
    ], ...
}


Enter fullscreen mode Exit fullscreen mode

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
  }
})

Enter fullscreen mode Exit fullscreen mode

Top comments (0)