Sourcemaps de una línea en Chrome, con Ruby on Rails, Webpack y React JS

96

Tengo un problema en el que los mapas de origen generados por Webpack usando la inline-source-mapconfiguración de configuración están desviados en una línea cuando uso el depurador de Chrome devtools. Webpack se configura dentro de una aplicación Ruby on Rails para generar un archivo JavaScript concatenado y no minificado compuesto por un par de docenas de módulos. La mayoría de esos módulos son componentes de ReactJS y el jsxcargador los analiza . La salida de Webpack se incluye en el application.jsarchivo junto con otras bibliotecas de JavaScript generadas por gems.

Cuando lo uso eval-source-map, no hay problema. Algo sobre el uso de inline-source-maphace que los números de línea se desvíen en uno.

La inspección de JavaScript que no es un componente de React todavía tiene este problema, por lo que no creo que esté relacionado con el uso de jsx.

javascript ruby-on-rails google-chrome webpack source-maps paradasia
fuente
4
Parece que un lado considera que la primera línea es una línea 0y el otro la considera una línea 1. Es posible que solo tenga que elegir una definición y ajustar el valor para cualquier cosa que funcione al revés.
Carl Smith
3
Si hay una forma de ajustar el valor que usa el navegador para los números de línea en los mapas de origen, eso podría resolver el problema. También desde entonces he hecho algunos experimentos, y parece que al usar Rails sin Sprockets procesando el JS generado por el paquete web, el problema desaparece. El número de línea solo está desactivado cuando se utilizan webpack y piñones.
paradasia
1
No tengo idea. Estaba usando los mapas de origen de CoffeeScript con la biblioteca JS de mapas de origen de Mozilla. Todo estaba bien, excepto que el columnarg en el siguiente código se pasa demasiado alto 1: window.onerror = function(message, url, line, column){}. Decrementarlo solucionó eso. Nota: Eso es específico de Chrome, no conozco otros navegadores.
Carl Smith
2
Esto parece relacionado: github.com/plumberjs/plumber-requirejs/commit/… ya que esto solucionó el problema de
require.js
1
¿Podría ser que agregue una línea de encabezado en algún lugar del proceso, por ejemplo, una declaración de derechos de autor?
rogierschouten

Respuestas:

3

Hubo un error en Chrome, pruebe la última versión, también en la configuración de su paquete web, intente usar diferentes mapas de origen en devtool, pruebe todos estos para ver si uno funciona para el mapa de origen en línea:

  • mapa-fuente-en-línea

  • mapa-fuente-en-línea-barato

para otras configuraciones diferentes:

  • mapa-fuente-barata

  • mapa-fuente-módulo-barato

  • módulo-barato-eval-source-map

en la configuración del paquete web:

{

...

devtool:'source-map'

...

}
Agamennon
fuente