'Vue2 source maps referencing vue.runtime.esm.js file, not component file

Maybe I'm misinterpreting what source maps should do in a Vue app, but shouldn't I get the *.vue file line number where the error is occurring? I always get a refernce to a line number in a vue.runtime.esm.js file. It references the component, but the line number in the component file would be more helpful. Do I need to install additional source map modules?

My vue.config is below:

module.exports = {
  assetsDir: "",
  publicPath: "/",
  css: {
    sourceMap: true,
    loaderOptions: {
      sass: {
        sassOptions: {},
      },
    },
  },
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === "development") {
      config.devtool = "eval-source-map";

      config.output.devtoolModuleFilenameTemplate = (info) =>
        info.resourcePath.match(/^\.\/\S*?\.vue$/)
          ? `webpack-generated:///${info.resourcePath}?${info.hash}`
          : `webpack-yourCode:///${info.resourcePath}`;

      config.output.devtoolFallbackModuleFilenameTemplate =
        "webpack:///[resource-path]?[hash]";
    }
  },
};

This also doesn't work:

  configureWebpack: (config) => {
    config.devtool = "source-map";
  },

Solution 1:^[1]

I had to use 'cheap-module-source-map' instead of 'eval-source-map'. In the end it would look like this:

  configureWebpack: (config) => {
    if (process.env.NODE_ENV === "development") {
      config.devtool = "cheap-module-source-map";

      [...]
    }
  },

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Vinicius Bazanella

'Vue2 source maps referencing vue.runtime.esm.js file, not component file

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]