97

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.

Markus Köhler
  • 764
  • 2
  • 8
  • 20
paradasia
  • 1,081
  • 7
  • 7
  • 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 Smith Jun 07 '14 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 Jun 08 '14 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 Smith Jun 08 '14 at 16:34
  • 2
    This seems related: https://github.com/plumberjs/plumber-requirejs/commit/765b3d815ead8461c46e8877a59effece8418b21 in that this fixed the prolblem for require.js – justingordon Sep 13 '14 at 20:11
  • man, getting sourcemaps to work at all with Rails is way ahead of how far i've ever gotten. – jrochkind Nov 06 '14 at 15:57
  • 1
    Could it be that you add a header line somewhere in the process e.g. a copyright statement? – rogierschouten May 11 '15 at 21:06
  • 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 http://gaearon.github.io/react-hot-loader/ on top of the dev server. – Petr Bela Jun 01 '15 at 08:37

2 Answers2

3

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'

...

}
Agamennon
  • 186
  • 7
0

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

Thibaut G
  • 31
  • 1
  • 5