Sourcemaps off by one line in Chrome, with Ruby on Rails, Webpack, and React JS
google-chrome, javascript, ruby-on-rails, source-maps, webpack
Solution
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'
...
}
Problem
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.