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.

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.