Search code examples
vue.jsvuejs3viterollup

Vite Vue Welcome App production sourcemaps are incomplete


See EDIT below for steps to reproduce.

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


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

EDIT: Steps to reproduce

npm init vue@latest
// pick No everywhere
cd vue-project
npm install
// add build.sourcemap = true in the vite.config.js file as shown above
npm run build
npm run preview

Solution

  • I have observed that if you add any code to the script tag in the component App.vue (other than components' imports), then it will appear in the sourcemaps.

    App.vue file:

    <script setup>
    import HelloWorld from './components/HelloWorld.vue'
    import TheWelcome from './components/TheWelcome.vue'
    
    console.log("Test");
    </script>
    ...
    

    enter image description here

    I hope it works for you too ^^