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) it is. Is there anyone who know it?

Reproduction steps:

git clone https://github.com/tomwang1013/snabbdom-test.git
npm install
npm run dev

score 69 · Answer 1 · edited May 04 '23 at 08:38

69

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"
  }),
...
],

edited May 04 '23 at 08:38

Henrik Karlsson

5,559
4
25
42

answered Jun 05 '20 at 19:02

Rokas Lengvenis

945
7
15

Hi, @Rokas Lengvenis. I'm having the same message at my console in a project with TypeScript. Just to certify I'll do correctly: Do I have to install `source-map-loader` with any package manager (like npm, yarn, etc.)? Or do I have to enter in `package.json` and in `webpack.config.js` and type it manually? Regards. – jose-renato-m Jun 26 '20 at 21:30
1

@jose-renato-m, you can install it directly with `yarn add source-map-loader` or `npm install`. Then add this loader manually to `webpack.config.js` file as that will allow to use source-map 'extracting' from `node_modules` while making a bundle. – Rokas Lengvenis Jun 29 '20 at 11:44
That helped me fixing at least 1 of the two dev tool errors I have. Thanks a lot. The other one is a chromium bug I [heard](https://github.com/storybookjs/storybook/issues/10469) they'll fix that in the next browser patch, so yah.. annoying but at least it doesn't have to do anything with my own code. – Thielicious Jul 07 '20 at 13:38
1

FYI, I used https://stackoverflow.com/q/64842607 with webpack 5. – dfrankow Apr 14 '21 at 13:55
Thank you, I used the updated version with my project and it actually removed a few other violations that occured. Thank you again! – Theodore Howell Mar 02 '23 at 20:24

score 45 · Answer 2 · answered Sep 12 '20 at 22:22

45

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

answered Sep 12 '20 at 22:22

Phương Nam

458
4
4

2

This just includes the source content in the source map it does not allow the browser to fetch the source itself as the value in the `sources` array will still start with `webpack://`. – steinybot Feb 03 '21 at 23:03
This was the best answer for me. Solved it straight away – ptdecker Feb 07 '23 at 04:17

score 28 · Answer 3 · answered Feb 15 '21 at 14:24

28

  devtool: "eval-cheap-source-map"

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

answered Feb 15 '21 at 14:24

Almedin Hodžić

375
3
10

2

See the [Webpack docs](https://webpack.js.org/configuration/devtool/) for details on this and other `devtool` settings. – rinogo Oct 21 '21 at 20:53

score 18 · Answer 4 · answered May 19 '21 at 03:38

18

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

answered May 19 '21 at 03:38

Nafis

1,020
17
36

3

See the [Webpack docs](https://webpack.js.org/configuration/devtool/) for details on this and other `devtool` settings. – rinogo Oct 21 '21 at 20:53
2

Easiest solution for modern Webpack – FirstVertex Dec 10 '21 at 16:39
This got rid of the warnings in Chrome devtools console. I was using `'eval'` but I guess that didn't satisfy Chrome but `'eval-source-map'` did the trick. This is what I did inside the function exported for a webpack v5 config: `const isProduction = argv.mode === 'development' ? false : true;` `devtool: isProduction ? undefined : 'eval-source-map',` – RcoderNY Jun 21 '23 at 02:39

score 3 · Answer 5 · answered Jul 21 '20 at 20:06

3

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

answered Jul 21 '20 at 20:06

Marty Kane

374
2
8

score 3 · Answer 6 · answered Mar 22 '21 at 11:33

3

Add below line to your weback config

  devtool: 'source-map ./src',

answered Mar 22 '21 at 11:33

n9n

121
1
1
8

See the [Webpack docs](https://webpack.js.org/configuration/devtool/) for details on this and other `devtool` settings. – rinogo Oct 21 '21 at 20:54

score 1 · Answer 7 · answered Jul 12 '21 at 14:07

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'

score 1 · Answer 8 · answered Feb 18 '22 at 09:01

1

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

answered Feb 18 '22 at 09:01

Raph117

3,441
7
29
50

chankruze · Answer 9 · 2021-05-14T19:06:14.297

@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

score 0 · Answer 10 · answered Nov 27 '22 at 19:11

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.

CodeToLife · Answer 11 · 2021-01-06T19:58:30.227

-4

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

remove that

edited Jan 06 '21 at 19:58

answered Jan 06 '21 at 19:53

CodeToLife

3,672
2
41
29

That's autogenerated lines, even if you remove them, they will be regenerated once you recompile project, so no use. – AidOnline01 Jun 09 '21 at 22:13
@AidOnline01 what recompiling . I use ready to use js libs. Removed those strings once. Putting the libs into a separate public folder. How to recompile ? Wasnt js a native language for browsers, or did you talk about some higher level script languages? – CodeToLife Jun 26 '21 at 16:57

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

11 Answers11

Linked