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

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: /\.m?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"
  }),
...
],

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

  devtool: "eval-cheap-source-map"

Add this to your webpack config and that's it.

Add devtool: 'eval-source-map' to top most level of webpack.config

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

Add below line to your weback config

  devtool: 'source-map ./src',

If nothing helps, try to use different webpack devtool mode.

Related the project for me working good this modes:

devtool: 'inline-source-map'

or

devtool: 'eval-cheap-source-map'    

or

devtool: 'eval-cheap-module-source-map'

or

devtool: 'inline-cheap-module-source-map'

If you're here and you're using Typescript, make sure you've got sourceMap: true in compilerOptions in your tsconfig.

@Phương Nam's answer will solve this error but even after setting filename: "[name].js", webpack may warn us regarding the conflict of multiple assets emitting to the same filename.

To fix above warning we can use SourceMapDevToolPlugin.

This plugin enables more fine grained control of source map generation. It is also enabled automatically by certain settings of the devtool configuration option.

The following code to replace the configuration option devtool: inline-source-map with an equivalent custom plugin configuration:

    // ...
    plugins: [
        // ...
        new webpack.SourceMapDevToolPlugin({})
        // ...
    ],
    devtool: false
    // ...

More examples of SourceMapDevToolPlugin

I am using webpack to build and get that same browser error if I build in development mode.

For example in my package.json:

 "scripts": {
    "dev": "npx webpack --mode development",
    "prod": "npx webpack --mode production"
  }

However, if I build with production mode instead of development mode that error goes away, most likely for reasons mentioned in above answers.