Vaccano
Vaccano

Reputation: 82291

DevTools failed to parse SourceMap

I am trying to get my Webpack project to have a source map file.

I finally got the settings right so that it would do that, but now I am getting this error:

DevTools failed to parse SourceMap: http://MyServer/MyApp/bundle.js.map

I go to the URL it states and I find a json file with these properties:

It all seems to be valid json. Unfortunally Chrome gives no reason why it failed to parse the source map.

Is there a way to get Chrome to say why it failed parsing the source map?

Or, failing that, does anyone know why my source map would fail? (My code is way too large to post, but here are my webpack.config.js and my package.json files.)

NOTES:

Upvotes: 49

Views: 66936

Answers (4)

Arthur Tsidkilov
Arthur Tsidkilov

Reputation: 5411

It is not an answer to this question, but i believe my answer can help some people.

This is due to the settings of chrome, for example in FF this error warnings not happens. To fix it go to Developer Tools Settings of Chrome, and uncheck:

  1. "Enable JavaScript source maps"
  2. "Enable CSS source maps"

Then refresh Chrome.

In order to debug js and scss minified files, this tells the compiler where the source file is actually mapped.

Using last versions of Webpack source-map work well, I tried to reproduce this bug, but without possibility to run a project, i can't see what a problem of author of a question.

This warning happening for example using angular, and sourceMap should be set true in angular.json, or other way if you don't use source-map'ing' and you don't want see this warning disable it in browser following my answer.

Upvotes: 27

Ali
Ali

Reputation: 514

It's possible that some chrome extensions are messing with DevTools.

Perhaps, you could try disabling the ones you do not need for your particular app and see if that "fixes" the problem.

Above is the approach that worked for me but I'm not really sure why it does.

Upvotes: 0

Luca Fagioli
Luca Fagioli

Reputation: 13349

In my case, I had to disable Adblock to get rid of the error.

Upvotes: 5

Brendan Gannon
Brendan Gannon

Reputation: 2652

From experience, I wouldn't expect a client to tell you why it couldn't parse a SourceMap (although that would be nice). I have run into issues with some tools being unable to parse large source maps (probably memory constraints), and given your large asset size, I would look at that first.

Webpack supports several different values for the devtool config field, and some of them are less faithful than the default. Have you tried, for example, 'cheap-module-source-map'? Getting line numbers only (no columns) is a fine trade off for a usable source map IMO.

But it will probably serve you better to reduce the asset size. Webpack's code splitting and 'chunk' management options make it pretty straightforward to split your code into multiple files that are loaded async at runtime. In this case you would have two or more JS files, and each would have its own source map, so the browser will no longer choke trying to process one big file.

Upvotes: 10

Related Questions