Sourcemaps off di una riga in Chrome, con Ruby on Rails, Webpack e React JS

Ho un problema in cui le mappe di origine generate da Webpack utilizzando l' inline-source-mapimpostazione di configurazione sono disattivate di una riga quando utilizzo il debugger di Chrome devtools. Webpack è impostato all'interno di un'applicazione Ruby on Rails per generare un file JavaScript concatenato e non minimizzato composto da un paio di dozzine di moduli. La maggior parte di questi moduli sono componenti ReactJS e vengono analizzati dal jsxcaricatore. L'output di Webpack viene quindi incluso nel application.jsfile insieme ad altre librerie JavaScript generate da gems.

Quando lo uso eval-source-map, non ci sono problemi. Qualcosa sull'uso di inline-source-mapfa sì che i numeri di riga vengano eliminati di uno.

L'ispezione di JavaScript che non è un componente React presenta ancora questo problema, quindi non penso sia correlato all'uso di jsx.

— paradasia
fonte

Sembra che una parte consideri la prima linea come linea 0e l'altra la consideri linea 1. Potrebbe essere necessario scegliere una definizione e regolare il valore per tutto ciò che funziona nell'altro modo.

— Carl Smith

Se esiste un modo per regolare il valore che il browser utilizza per i numeri di riga nelle mappe sorgente, questo potrebbe potenzialmente risolvere il problema. Inoltre da allora ho fatto un po 'di fatica, e sembra che quando si utilizza Rails senza Sprockets che elabora il JS generato da webpack, il problema scompare. Il numero di riga è disattivato solo quando si utilizzano sia webpack che sprockets.

— paradasia

Non ne ho idea. Stavo usando le mappe dei sorgenti di CoffeeScript con la libreria JS delle mappe dei sorgenti di Mozilla. Tutto è andato bene tranne che columnl'arg nel seguente codice viene passato in 1 troppo alta: window.onerror = function(message, url, line, column){}. Diminuirlo lo ha risolto. Nota: è specifico di Chrome, non conosco altri browser.

— Carl Smith

Questo sembra correlato: github.com/plumberjs/plumber-requirejs/commit/… in quanto questo ha risolto il problema per

— require.js

Potrebbe essere che aggiungi una riga di intestazione da qualche parte nel processo, ad esempio una dichiarazione di copyright?

— rogierschouten

C'era un bug in Chrome, prova l'ultima versione, anche sulla configurazione del tuo webpack prova a usare diverse mappe dei sorgenti su devtool prova tutte queste per vedere se una funziona per la mappa dei sorgenti inline:

inline-source-map
mappa-sorgente-inline-economica

per altre configurazioni differenti:

mappa-sorgente-economica
mappa-sorgente-modulo-economico
mappa-sorgente-di-valutazione-modulo-economico

sulla configurazione del webpack:

{

...

devtool:'source-map'

...

}

— Agamennon
fonte