DevTools failed to load SourceMap for webpack:///node_modules//…js.map HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

Question

I created a simple webpack based project to learn snabbdom. Everything was OK except that sourcemap failed loading:

I don\'t know whose issue(webpack, chrome) i

Answer 1

Perhaps in each of those js files there is something like url commented: /*# sourceMappingURL=dsggdgdg.fdgdfn.dfg.map */

remove that

Answer 2

Update webpack.config.js

module.exports = {
    // ...
    entry: {
      "app": "src/app.js"
    },
    output: {
      path: path.join(__dirname, 'dist'),
      filename: "[name].js",
      sourceMapFilename: "[name].js.map"
    },
    devtool: "source-map"
    // ...
};

Detailed in https://blog.sentry.io/2018/10/18/4-reasons-why-your-source-maps-are-broken

Answer 3

1. Go to Dev Tools in browser

2. Click to settings

3. Disable "Enable JavaScript source maps"

Answer 4

The source map you are trying to load is in node_modules and not part of webpack bundle. "If not extracted and processed into the source map of the webpack bundle, browsers may misinterpret source map data" ref. When app is loaded that causes "ERR_UNKNOWN_URL_SCHEME" in chrome dev tools console.

To process node_module source maps to webpack bundle, use source-map-loader loader. That will fix console warnings.

Add dependency to package.json:

"devDependencies": {
        "source-map-loader": "^1.0.0",
        ...
      }

Update webpack.config.js:

module: {
rules: [
  {
    test: /\.js$/,
    enforce: 'pre',
    use: ['source-map-loader'],
  },
],

},

To generate source maps for snabbdom-test project in general you can use SourceMapDevToolPlugin.

Update webpack.config.js:

const { SourceMapDevToolPlugin } = require("webpack");

plugins: [
  new SourceMapDevToolPlugin({
    filename: "[file].map"
  }),
...
],

Answer 5

If you want to just turn these off, you can use a webpack devtool option that ignores them. Detailed in my related question here