How can I activate the sourcemap for Vue-Cli 4?

Question

I believed the npm run serve command use the sourcemap by default for the js, but it seems not because I always see vue.runtime.esm.js:619.

I made a vue.config.js file at the root level project.

I try two things:

module.exports = {
    configureWebpack: config => {
          config.devtool = 'source-map'
    }
}

and:

module.exports = {
    configureWebpack: {
        devtool: 'source-map'
    }
}

None of them works. I still stuck with vue.runtime.esm.js:619 which is useless.

Does anyone know how really activate the source-map with vue-cli 4?

Answer 1

Using the generated vue.config.js from vue-cli v4 (generating a vue 3 project) It provided me this file:

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
})

I then modified it to this:

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    devtool: 'source-map',
  }
})

Which works enough for me to enable VSCode debugging in Chrome/Electron.

*Edit
The error you are getting may be unrelated to source-maps and related to warnings from vue itself. For example

runtime-core.esm-bundler.js:6584
[Vue warn]: Failed to resolve component: AMadeUpComponentName
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <MyView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <App>

Unfortunately this is a limitation of vue. However, improvements have been made between VueJS v2 and v3. Finally, I couldn't find an original source, but I read that improving the warning messages to track down the cause of warnings and errors is a high priority feature.

* Edit 10/12/2022

I had an older project that this answer didn't solve at all. After a yarn upgrade and @vue/cli upgrading, this configuration began working again!

Answer 2

You are looking for the ProjectOptions chainWebpack property.

  chainWebpack?: (config: ChainableWebpackConfig) => void;

---

Try the following in your vue.config.js file:

/** @type import('@vue/cli-service').ProjectOptions */

module.exports = {
  // https://github.com/neutrinojs/webpack-chain/tree/v4#getting-started
  chainWebpack(config) {
    config.devtool('source-map')
  },
}