DevTools failed to parse SourceMap

javascript webpack google-chrome-devtools webpack-2
Vaccano picture Vaccano · May 30, 2017 · Viewed 58.7k times · Source

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.

Answer

Arthur Tsidkilov picture Arthur Tsidkilov · Feb 29, 2020

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.

Related questions

Getting Unexpected Token Export

I am trying to run some ES6 code in my project but I am getting an unexpected token export error. export class MyClass { constructor() { console.log("es6"); } }

Read More
Correct path for img on React.js

I have some problem with my images on my react project. Indeed I always thought that relative path into src attribute was built on the files architecture Here my files architecture: components file1.jsx file2.jsx file3.jsx container img …

Read More
Managing jQuery plugin dependency in webpack

I'm using Webpack in my application, in which I create two entry points - bundle.js for all my JavaScript files/codes, and vendors.js for all libraries like jQuery and React. What do I do in order to use …

Read More