Webpack’s cheap-module-eval-source-map requires a plugin

I’ve started experimenting with React and consequently Webpack. As a base I picked Cory House’s excellent "Building Applications with React and Redux in ES6" course on Pluralsight (disclaimer: as a MS MVP I get free subscription). BTW Pluralsight is a really good learning content delivery - so much good stuff there.

Anyway, I was building upon Cory's project and at some time I decided to update packages to their latest version (by updating versions in package.json, deleting node_modules and running npm update). Everything went smooth except that I noticed that debugging in browsers stopped for some reason. Breakpoints weren't observed, sources weren't shown. The later proved as hint what to look for - devtool settings in webpack.config.js that is.

It turns out that Cory was using cheap-module-eval-source-map which was working with the original version of webpack. However after updating it didn't work anymore.

The solution is rather simple: add a new plugin to webpack.config.js:

new webpack.EvalSourceMapDevToolPlugin()

Looks like that folks at webpack decided to put this functionality into a separate plugin at a certain point in time (I didn't follow its progress). And no, the solution isn't mine. Instead I found it at this stackoverflow thread.

Comments (1) -

  • Dan

    7.12.2016 13:53:03 | Reply

    This is not exactly a fix—it's equivalent to overriding the `devtool` setting to a different (slower) mode.

    The right fix was submitted in https://github.com/webpack/source-list-map/pull/2, and you can now update to Webpack 1.14.0 that includes it.

Loading