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.

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'

...

}