I'm using webpack v4.16.2 as my bundle tool, and set devtool to 'source-map'. I'm trying to debug the source file through the Chrome sources tab. However, when I click the source file lie down webpack:// directory, an error occurred:
I'm not using webpack-dev-server, just build the source files into the dist/ folder, and load the page through Nginx.
What does this error mean? I'm pretty sure that the source map files are generated. How can I fix this?
Thanks in advance.
Alex is right,
source-map devtool mode generate .map file when minify the code in production mode, file lost sourcesContent property.
Another way to fix it is to uncheck the Enable JavaScript source maps in Chrome Dev Tool.
I have been the same issue this whole day:
try set webpack.prod.config
optimization: {
minimize: false
}
Here is what I found so far:
source-map devtool mode generate .map file lost sourcesContent property when minify the code which is default in production mode. And the 'webpack://XXXX' to locate the sourcesContent where the original code is, then the error happens.
I was getting exactly the same problem, same error message etc when trying to debug typescript / html in Google Chrome.
The solution is to empty your cache.
Press Control + H to load up your browser history, and press the Clear Data button.
The try pressing Control + O or Control + P to load/select a source file again.
