Source-maps not enabled by default

[lane-s]

Version

3.0.0-rc.3

Reproduction link

https://github.com/vuejs/vue-cli

Steps to reproduce

1. Run vue create test-project
2. Choose default options
3. Change a .vue component so that the javascript code will throw an exception
4. run npm run serve

What is expected?

The browser console should display the line number where the exception is being thrown in the .vue file

What is actually happening?

The browser console displays an unhelpful error message referencing only vue.runtime.esm.js

---

When creating a new project using vue-cli via create or UI, no vue.config.js file is created by default. In order to see the line number of an exception in your source code, you have to manually create vue.config.js and add the following:

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

It seems to me that everyone would like to be able to source their errors, so I feel that this should be done by default.

[haoqunjiang]

Can't reproduce.
Source maps are enabled by default in dev mode:

vue-cli/packages/@vue/cli-service/lib/config/dev.js

Lines 3 to 5 in e17f78c

	if (process.env.NODE_ENV === 'development') {
	webpackConfig
	.devtool('cheap-module-eval-source-map')

[LinusBorg]

What browser are you on?

[lane-s]

Chrome 67. The issue occurs consistently unless I add the config file I described.

[yyx990803]

Cannot reproduce. Working as intended in Chrome 67.

[cristianelias]

I'm having the same issue...

[motin]

Reproduced in Chrome 68.
Adding the devtool configuration as per this issue's top post solved it.
Happily seeing the real filenames of where errors occur now (albeit the line number corresponds to the js-compiled version of the .vue files and not the original .vue file)

[tvkit]

@lane-s Modifying vue.config.js as you instructed works for me

My @vue/cli-service is @ 3.0.1

[yarnball]

Hi,

My Vue developer experience has been suffering due to terrible debugging/source maps:

I've added:

configureWebpack: {
        devtool: 'source-map'
    }

Which helped (now when I console.log() somewhere- it knows the actual file!). However, it is still super unhelpful for generic errors.

Here's an example of a simple undefined error- and it NOT pointing to a file-

Does the above look right? How come it doesn't tell me the line/file the error came from?

[tomchiverton]

No vue.config.js created here either. Latest vue-cli from npm, Linux Ubuntu 18.04 LTS.

Reopen.

[LinusBorg]

Just create one. Not every initial configuration combination requires one, so it's not necessarily created for you.

[MikeMitterer]

The right way to enable source-map

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

[nicooprat]

This config was pretty slow on file change, this one seems to be faster (we can also use the simpler object notation):

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

Found here: symfony/webpack-encore#214. More config for Webpack, didn't try others: https://webpack.js.org/configuration/devtool/

+++ super fast, ++ fast, + pretty fast, o medium, - pretty slow, -- slow

[Drumstix42]

This was a huge help for me. Without 'source-map' I wasn't able to inspect import modules during debugging without jumping through hoops. Now I can, BUT only for normal .JS files. Doesn't seem to work with SFC .vue files...

I do have to note that 'eval-source-map' didn't seem to work for me. Unsure if that is the default value, but using that yielded the same results as not setting the devtool property.

[FoxDaxian]

@yarnball Has the problem been resolved?

[WhyNotHugo]

• The default yields no maps for my scss files, but does for my typescript files.
• "eval-source-map" does not yield maps for either scss or typescript.
• "source-map" yields source maps for both scss and typescript.

Any insight here?

[ashishb]

The right way to enable source-map

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

@nicooprat Which file? vue.config.js? Or a different file?

[iloveitaly]

I've noticed that sourcemaps are generated for my ts/js code, but are not generated if I use the --watch option. If I add the devtool = 'source-map' line mentioned above, sourcemaps are generated when using --watch. Any ideas how to fix this issue?

[jomofrodo]

I was seeing source maps in my production build, but not in my development build. Adding the config.devtool = 'source-map' into vue.config.js has fixed it so that I am now getting source maps in both prod and development.

https://vuejs.org/v2/cookbook/debugging-in-vscode.html

[warmfire540]

not sure if ultimately fixed but we have the same exact repro as @jomofrodo

we're going to add the fix to all of our Vue components which are all built using vue-cli-service build --mode development
this essentially is just setting NODE_ENV which according to @sodatea 's code snippet should add sourcemaps..

now we're getting them in dev too (prod was always ok) w/ the workaround