Webpacker: no source maps

[elbarto132]

If i create a project using for example "rails new myapp --webpack=react" (doesn't matter if i use react or vue) and then run ./bin/webpack-dev-server or ./bin/webpack it should generate source map files besides of the js files, right? I'm using rails 5.1.1 and with the default configuration it doesn't create any source map files. What do i have to change to get source maps?

Update:
If i change "cheap-eval-source-map" to "source-map" in config/webpack/development.js it's creating the source maps, but according to https://webpack.js.org/configuration/devtool/ that's probably not the desired option

[gauravtiwari]

@elbarto132 If you run NODE_ENV=production ./bin/webpack you will have sourcemaps files. The development environment uses -

//config/webpack/development.js
devtool: 'cheap-eval-source-map'

ref: https://webpack.js.org/configuration/devtool/#devtool

[elbarto132]

@gauravtiwari that's probably true, because production.js is setting devtool: 'source-map', and i didn't know i had to set NODE_ENV=production too

I tried all of the possible options for devtools in development.js
All the "development options", eval, cheap-eval-source-map, cheap-module-eval-source-map, eval-source-map don't produce source map files, but probably they should?

[gauravtiwari]

@elbarto132 Just use devtool: 'source-map' in development.js and it will output sourcemaps for you (a bit heavy for compiler though). No rest of the options outputs inline within JS bundle.

[elbarto132]

Yes, i will do this for now, i was just confused that the default configuration isn't working properly.
So maybe the default devtool option should be changed until the real issue, which seems to be this: https://github.com/webpack/webpack/issues/2145 is solved

[gauravtiwari]

@elbarto132 That's default for faster compilation but feel free to change it if you feel that works better for you.

[alex-benoit]

On a fresh rails new install (5.1.4), source map won't work in development on Chrome and Firefox. To switch to another devtool which actually work, you can do that:

// config/webpack/development.js
const environment = require('./environment')

const config = environment.toWebpackConfig();
config.devtool = 'sourcemap';

module.exports = config;

[gauravtiwari]

Yeah, we have changed the default source map option. Will make a new release soon

[edelgado]

Any idea why the source maps are showing ES5 code and not the source code as in my ES6 source?

[Stafie]

Having the same issue as @edelgado

[davidhatten]

Having the same issue as the above 2, if I set the devtool in webpacker.yml, it shows ES5. If I set devtool in thedevelopment.js, it behaves correctly and shows the source.