Sourcemaps off by one line in Chrome, with Ruby on Rails, Webpack, and React JS

Question

I'm having an issue where the sourcemaps generated by Webpack using the inline-source-map configuration setting are off by one line when I use the Chrome devtools debugger. Webpack is set up inside a Ruby on Rails application to generate a concatenated, unminified JavaScript file composed of a couple dozen modules. Most of those modules are ReactJS components, and are parsed by the jsx loader. The output from Webpack is then included in the application.js file along with some other JavaScript libraries generated by gems.

When I use eval-source-map, there is no problem. Something about the use of inline-source-map causes the line numbers to be thrown off by one.

Inspecting JavaScript that is not a React component still has this issue, so I don't think it's related to the use of jsx.

Enallage

It sounds as though one side considers the first line to be line 0 and the other considers it line 1. You may just have to pick one definition, and adjust the value for anything that works the other way. – Retroact

If there is a way to adjust the value the browser uses for line numbers in the sourcemaps, that could potentially solve the problem. Also since then I've done a bit of exerimenting, and it seems that when using Rails without Sprockets processing the JS generated by webpack, the problem goes away. The line number is only off when using both webpack and sprockets. – Enallage

I've no idea. I was using CoffeeScript's sourcemaps with Mozilla's source-map JS library. Everything was fine except that the column arg in the following code is passed in 1 too high: window.onerror = function(message, url, line, column){}. Decrementing it fixed that. Note: That's Chrome specific, I don't know about other browsers. – Retroact

This seems related: github.com/plumberjs/plumber-requirejs/commit/… in that this fixed the prolblem for require.js – Chalmers

man, getting sourcemaps to work at all with Rails is way ahead of how far i've ever gotten. – Behlau

Could it be that you add a header line somewhere in the process e.g. a copyright statement? – Lundberg

I'd recommend running a webpack dev server for js files, that way they don't have to go through sprockets. Also it will enable you to use gaearon.github.io/react-hot-loader on top of the dev server. – Miscreated

Answer 1

There was a bug in chrome, try the latest version, also on your webpack config try using different sourcemaps on devtool try all of these to see if one works for inline source map:

• inline-source-map

• cheap-inline-source-map

for other different configs:

• cheap-source-map

• cheap-module-source-map

• cheap-module-eval-source-map

on webpack config:

{

...

devtool:'source-map'

...

}

Kurtkurth

Answer 2

Configuring with devtool: 'inline-module-source-map' into webpack fixed my issues.

Hoboken