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.

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.

• javascript
• ruby-on-rails
• google-chrome
• webpack
• source-maps

• 4 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. – Carl Younger Commented Jun 7, 2014 at 13:35
• 3 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. – paradasia Commented Jun 8, 2014 at 15:56
• 1 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. – Carl Younger Commented Jun 8, 2014 at 16:34
• 2 This seems related: github.com/plumberjs/plumber-requirejs/commit/… in that this fixed the prolblem for require.js – justingordon Commented Sep 13, 2014 at 20:11
• 1 Could it be that you add a header line somewhere in the process e.g. a copyright statement? – rogierschouten Commented May 11, 2015 at 21:06

2 Answers 2

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'

...

}

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