Anonymous evals in Chrome when //# sourceMappingURL... is used.

[tanem]

Hey all. Feel a bit cheeky as this appears to be more of a browser issue than a webpack issue, but thought I'd mention it here to see if others had run into the same thing while using webpack, and had any workarounds I hadn't thought of 😄

We're bundling a big app that uses babel-loader for ES2015 -> ES5. In order to debug our source files and still get reasonably fast rebuilds, we're using the devtool: '#cheap-module-eval-source-map' option, which adds a //# sourceMappingURL... comment to the module eval blocks.

Unfortunately in Chrome, the eval blocks are anonymous for any Error.prototype.stack traces. We use Jasmine for testing, which outputs a stack trace when a test fails. Since this is anonymous, it makes debugging more difficult.

I tried hacking the EvalSourceMapDevToolModuleTemplatePlugin in order to name the eval blocks by adding a //# sourceURL... comment after the //# sourceMappingURL... comment. AFAIK this is what Coffeescript does? This had the desired effect in Firefox, but Firefox's slow load time was a big problem for us. In Chrome, the eval blocks were now named, but the DevTools console was showing the compiled source, so it seemed like it was just ignoring the //# sourceMappingURL... comment.

Any ideas or workarounds?

Some more relevant links:

• console.log does not sourcemap exception stack traces
• Feature Request: Sourcemap support

[adjavaherian]

Not sure what the problem is. Source maps should just work in the browser, with no additional help. devtool: '#eval-source-map' seems to work for me. Can you simplify the problem a bit?

[tanem]

@adjavaherian it's actually a specific issue with V8 not supporting source maps for stack traces. The situation is described in node-source-map-support's README.md. I came across numerous related issues in the V8 issue list too.

I've recently managed to get this working how I like, with a combination of node-source-map-support and devtool: #cheap-module-inline-source-map. Just had to work around a few things:

• Browser hangs on new Buffer(...).toString() for large source maps evanw/node-source-map-support#94
• Regex RangeError for large sourcemaps evanw/node-source-map-support#93
• Refused to get unsafe header "SourceMap" evanw/node-source-map-support#68

Hope this information is useful for others. Will close this issue over the weekend 😅

[jdeal]

@adjavaherian Did you have any CORS issues using node-source-map-support? For me, it complains about the webpack:/// protocol, so it's a no-go.

Crazy that in 2015 this is still a painful problem.

[adjavaherian]

What's adding the webpack:/// protocol? I've never seen that. All I do to add source maps is add devtool: '#eval-source-map' to the config, and all the modules get the right base64 source map.

[jdeal]

@adjavaherian That's webpack putting that in:

You can see it talking about that in the docs:

http://webpack.github.io/docs/configuration.html

But, when I just tried to reproduce the CORS problem, I couldn't, and it worked! Not sure what was going on, but assuming it doesn't pop up again, thanks! First time I've seen sourcemaps for stacktraces in Chrome!

It only seems to work with cheap-module-inline-source-map for me though.

Have that weird Synchronous XMLHttpRequest on the main thread error when there's an exception, but that's a known thing, and I think it's only when there's an exception, so I can live with that.

Still messed up that we have to jump through these hoops. But thanks again!

[tanem]

@jdeal node-source-map-support will look for the last sourceMappingURL, which is why we are using #cheap-module-inline-source-map as well.

Re the SJAX request, there's a bunch of useful information linked to in evanw/node-source-map-support#92.

And yea I agree, I'm hoping V8 helps us out sometime soon too 😄

[tanem]

Closing this as promised earlier. We have a working solution based on the information in this thread 👍