Could not load content for webpack source file in Chrome sources tab

Question

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.

Craniometry

were you able to figure this out? – Fraser

Answer 1

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.

Ruche

Answer 2

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.

Chibcha

Answer 3

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.

Skater