Source Maps issues on Chrome for Webpack 1

I was trying to maintain an old React app built using Webpack 1.13. When starting the app, I couldn’t add breakpoints in Chrome’s developer tools. It turned out it’s a Webpack issue with latest version of Chrome, see this GitHub issue.

Solutions from this issue’s comments suggested to upgrade to Webpack 3, but I don’t want to do that for an old app. Here is how I fixed it for Webpack 1.

You need to upgrade some dependencies.

1
2
3
4
"source-list-map": "^2.0.0",
"source-map": "^0.5.6",
"source-map-support": "^0.4.15",
"webpack": "1.13.3",

Then update Webpack config to use cheap-module-source-map as the devtool.

1
devtool: 'cheap-module-source-map'
Comments