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

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.

— paradasia
fonte

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

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

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

Isso parece relacionado: github.com/plumberjs/plumber-requirejs/commit/… em que corrigiu o prolblem para require.js

— justingordon

Será que você adiciona uma linha de cabeçalho em algum lugar do processo, por exemplo, uma declaração de direitos autorais?

— rogierschouten

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