49

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:

  • version - Set to 3
  • sources - very long array of strings that seem to be webpack paths to my files.
  • names - very long array of strings that seem to be random variables and functions.
  • mappings - very long string of seemingly random capitol letters and commas.
  • file - set to bundle.js
  • sourcesContent - Very Very long array of strings (over 10 million chars). All my source code.
  • sourceRoot - set to empty string

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:

  • I have tried this with webpack 2.2.1, webpack 2.3.2 and webpack 2.6.1.
  • Source maps work fine in IE 11 and Firefox.
  • If I inline my source maps, then they work fine in Chrome DevTools, but then my bundle.js goes from 3 MB (already too big) to 16 MB (WAY too big).
  • I have set "Enable JavaScript Source Maps" in settings (and the CSS one too).
  • I tried using Chrome Canary, but it had the same issue.
  • I am hosting in IIS.
Vaccano
  • 78,325
  • 149
  • 468
  • 850

4 Answers4

27

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.

Arthur Tsidkilov
  • 5,401
  • 2
  • 21
  • 18
  • 1
    Thanks for the solution but do you know why this fixes the warning? – dhahn Mar 09 '20 at 17:49
  • 2
    To debug js and scss minified files, this tells compiler where is source file actually mapped. – Arthur Tsidkilov Mar 14 '20 at 16:12
  • 1
    Thank you. This is what did it for me as well (just had to remember how to get to Developer Tool Settings in Chrome). View > Developer > Developer Tools (or ⌥ ⌘I) – Rico Rodriquez Collins Mar 26 '20 at 04:53
  • 9
    This only works if you don't use source maps. It's hardly a fix. – Zach Smith Apr 07 '20 at 05:45
  • @ZachSmith Using last versions of Webpack source-map work well, this warning happing for example using angular, and "sourceMap" should be set "true" in angular.json, or other way to disable it in browser if you don't use source-map'ing' – Arthur Tsidkilov Apr 16 '20 at 09:18
  • 1
    This isn't an answer. It's like asking why your car is smoking and being told to stop driving your car. Yes, not driving my car stops the car from smoking. – toxaq Apr 26 '20 at 01:08
  • @toxaq depends on each person’s personal search, in many cases this is the answer to a slightly different question, but with the same wording – Arthur Tsidkilov Apr 28 '20 at 20:32
  • @ArthurTsidkilov the OP wants source maps, your answers turns off the processing of them. If there is an error with them, fix the error, don't hide it. – toxaq Apr 30 '20 at 04:45
  • @toxaq the question written 2 years ago, in this forms it is not relevant any more, but some people need to hide sourceMap and how to enable sourceMap for example in angular i answered here. And i see there are people who need it. – Arthur Tsidkilov May 07 '20 at 11:03
  • @ArthurTsidkilov unfortunately StackOverflow ranks very highly in Google so your "solution" of not driving your car if the engine is running rough turns up very highly for people searching for rough running engines. Justify it to yourself all you like, this isn't an answer to the problem. – toxaq May 07 '20 at 22:21
  • @toxaq you are right, i don't answer a question but for some people searching this it is an answer for the problem they search to solve, do you want i remove it from here, i don't really understand what you want from me? ))) – Arthur Tsidkilov May 10 '20 at 06:40
  • @ArthurTsidkilov The comment you've added at the start of your answer is a good improvement. I would just have something like "This isn't a solution to the problem but if you just need the sourcemap errors to go away then you can disable sourcemap processing using the following instructions". As long as newbies can turn up and realise that there are downstream consequences to their actions they can make an informed choice. – toxaq May 13 '20 at 12:27
  • @toxaq nice) You are right, better to give more descriptions. I believe it is not so important to stay on it to much. Enough liki it is. If you want you can add other answer more complete. – Arthur Tsidkilov May 13 '20 at 15:31
10

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.

Brendan Gannon
  • 2,632
  • 15
  • 22
5

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

Luca Fagioli
  • 12,722
  • 5
  • 59
  • 57
0

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.

Ali
  • 484
  • 3
  • 5
  • 16