Sourcemaps em uma linha no Chrome, com Ruby on Rails, Webpack e React JS

96

Estou tendo um problema em que os mapas de origem gerados pelo Webpack usando a inline-source-mapdefinição de configuração estão desativados em uma linha quando uso o depurador de devtools do Chrome. O Webpack é configurado dentro de um aplicativo Ruby on Rails para gerar um arquivo JavaScript concatenado e não minimizado composto de algumas dezenas de módulos. A maioria desses módulos são componentes ReactJS e são analisados ​​pelo jsxcarregador. A saída do Webpack é então incluída no application.jsarquivo junto com algumas outras bibliotecas JavaScript geradas por gems.

Quando eu uso eval-source-map, não há problema. Algo sobre o uso de inline-source-mapfaz com que os números das linhas sejam desviados em um.

A inspeção de JavaScript que não é um componente React ainda apresenta esse problema, portanto, não acho que esteja relacionado ao uso de jsx.

javascript ruby-on-rails google-chrome webpack source-maps paradasia
fonte
4
Parece que um lado considera a primeira linha uma linha 0e o outro a considera linha 1. Você pode apenas ter que escolher uma definição e ajustar o valor para qualquer coisa que funcione de outra maneira.
Carl Smith
3
Se houver uma maneira de ajustar o valor que o navegador usa para números de linha nos mapas de origem, isso poderia potencialmente resolver o problema. Além disso, desde então tenho feito um pouco de esforço, e parece que ao usar Rails sem Sprockets processando o JS gerado pelo webpack, o problema desaparece. O número da linha só fica desativado ao usar webpack e rodas dentadas.
paradasia de
1
Não faço ideia. Eu estava usando os mapas de origem do CoffeeScript com a biblioteca JS de mapas de origem da Mozilla. Tudo estava bem, exceto que o columnarg no código a seguir é passado em um muito alto: window.onerror = function(message, url, line, column){}. Decrementar consertou isso. Nota: Isso é específico do Chrome, não sei sobre outros navegadores.
Carl Smith
2
Isso parece relacionado: github.com/plumberjs/plumber-requirejs/commit/… em que corrigiu o prolblem para require.js
justingordon
1
Será que você adiciona uma linha de cabeçalho em algum lugar do processo, por exemplo, uma declaração de direitos autorais?
rogierschouten

Respostas:

3

Houve um bug no Chrome, tente a versão mais recente, também na configuração do seu webpack, tente usar mapas de origem diferentes no devtool, tente todos eles para ver se um funciona para o mapa de origem inline:

  • mapa de origem inline

  • mapa de origem barato inline

para outras configurações diferentes:

  • mapa-fonte-barato

  • mapa-fonte-módulo-barato

  • mapa de origem-eval-módulo-barato

na configuração do webpack:

{

...

devtool:'source-map'

...

}
Agamennon
fonte