Sourcemaps terputus satu baris di Chrome, dengan Ruby on Rails, Webpack, dan React JS

96

Saya mengalami masalah di mana peta sumber yang dibuat oleh Webpack menggunakan inline-source-mappengaturan konfigurasi tidak aktif satu baris saat saya menggunakan debugger Chrome devtools. Webpack diatur di dalam aplikasi Ruby on Rails untuk menghasilkan file JavaScript yang digabungkan dan tidak dikecilkan yang terdiri dari beberapa lusin modul. Sebagian besar modul tersebut adalah komponen ReactJS, dan diurai oleh jsxloader. Output dari Webpack kemudian dimasukkan ke dalam application.jsfile bersama dengan beberapa pustaka JavaScript lain yang dihasilkan oleh gem.

Saat saya gunakan eval-source-map, tidak ada masalah. Sesuatu tentang penggunaan inline-source-mapmenyebabkan nomor baris terlempar satu per satu.

Memeriksa JavaScript yang bukan merupakan komponen React masih mengalami masalah ini, jadi menurut saya ini tidak terkait dengan penggunaan jsx.

javascript ruby-on-rails google-chrome webpack source-maps paradasia
sumber
4
Kedengarannya seolah-olah satu sisi menganggap baris pertama sebagai garis 0dan yang lain menganggapnya sebagai garis 1. Anda mungkin hanya perlu memilih satu definisi, dan menyesuaikan nilainya untuk apa pun yang berfungsi sebaliknya.
Carl Smith
3
Jika ada cara untuk menyesuaikan nilai yang digunakan browser untuk nomor baris di peta sumber, itu berpotensi menyelesaikan masalah. Juga sejak saat itu saya telah melakukan sedikit percobaan, dan tampaknya saat menggunakan Rails tanpa Sprocket memproses JS yang dihasilkan oleh webpack, masalahnya hilang. Nomor baris hanya mati saat menggunakan webpack dan sprocket.
paradasia
1
Saya tidak tahu. Saya menggunakan peta sumber CoffeeScript dengan perpustakaan JS peta sumber Mozilla. Semuanya baik-baik saja kecuali bahwa columnarg dalam kode berikut dilewatkan dalam 1 terlalu tinggi: window.onerror = function(message, url, line, column){}. Decrementing itu memperbaikinya. Catatan: Itu khusus Chrome, saya tidak tahu tentang browser lain.
Carl Smith
2
Ini tampaknya terkait: github.com/plumberjs/plumber-requirejs/commit/… dalam hal ini memperbaiki prolblem untuk require.js
justingord
1
Mungkinkah Anda menambahkan baris header di suatu tempat dalam proses, misalnya pernyataan hak cipta?
rogierschouten

Jawaban:

3

Ada bug di chrome, coba versi terbaru, juga di konfigurasi webpack Anda coba gunakan peta sumber yang berbeda di devtool coba semua ini untuk melihat apakah ada yang berfungsi untuk peta sumber sebaris:

  • peta-sumber-sebaris

  • peta-sumber-inline-murah

untuk konfigurasi lain yang berbeda:

  • peta-sumber-murah

  • murah-modul-sumber-peta

  • murah-module-eval-source-map

pada konfigurasi webpack:

{

...

devtool:'source-map'

...

}
Agamennon
sumber