Signature_pad: SignaturePad tidak berfungsi dengan Buat Aplikasi React
Menemukan bug saat mencoba menggunakan signature_pad dengan Webpack 2!
Proyek saya menggunakan versi terbaru dari Create React App . Menggunakan SignaturePad dengan versi sebelumnya dari Create React App bekerja seperti yang diharapkan, tetapi bug muncul ketika mereka meningkatkan ke Webpack 2. Oleh karena itu, saya cukup yakin bahwa ini secara khusus berkaitan dengan mekanisme impor / ekspor baru Webpack 2.
Bagaimana perilaku saat ini?
Saat mencoba membuat instance baru SignaturePad , aplikasi macet dengan kesalahan khusus terkait webpack:
Apa perilaku yang diharapkan?
Instance harus dibuat seperti yang diharapkan, tanpa crash.
Versi SignaturePad mana, dan browser / perangkat mana yang terpengaruh oleh masalah ini?
Ini tampaknya terjadi di Chrome dan Safari.
taylorlapeyre
Semua 11 komentar
@taylorlapeyre Terima kasih atas laporannya. Ini benar-benar aneh, karena sepertinya alih-alih mengembalikan kode JS yang sebenarnya, ia mengembalikan jalur ke file, yaitu
ini: __WEBPACK_IMPORTED_MODULE_1_signature_pad___default.a sama dengan ini: "/static/media/signature_pad.2ceae229.mjs" .
Saya akan mencoba mencari tahu apa yang salah, tetapi jika ada yang punya ide dan bisa membuat PR dengan perbaikan, itu akan luar biasa.
szimek
pada 26 Mei 2017
@taylorlapeyre Saya menemukan apa yang salah dan menurut saya itu sebenarnya bug di react-create-app , meskipun saya dapat dengan mudah memperbaikinya di sini juga. Masalahnya adalah Webpack 2 memuat versi ES6, yang ada di file signature_pad.mjs , tetapi saya kira konfigurasi Webpack di react-create-app tidak tahu cara menangani file dengan ekstensi .mjs - itulah mengapa ia mengembalikan nama file.
szimek
pada 26 Mei 2017
@szimek ahh, masuk akal. Saya pikir perbaikan mungkin harus ada di Buat Aplikasi React dalam kasus ini. Apakah Anda ingin membuat PR di sana? Saya juga bisa menerimanya jika Anda memberi saya titik awal untuk pergi dari 🙂
taylorlapeyre
pada 27 Mei 2017
Sebagai catatan - solusi bagi kami adalah langsung menyalin file signature_pad.js ke direktori src . Setelah kami melakukannya, kami dapat mengimpornya seperti yang diharapkan.
taylorlapeyre
pada 27 Mei 2017
Terima kasih banyak atas balasan cepat untuk ini, @szimek. Saya bekerja dengan @taylorlapeyre ... Hanya melakukan fork repo dan mengubah proses pembuatan untuk menulis file .js alih-alih file .mjs . Saya dapat mengonfirmasi bahwa sepenuhnya berfungsi dalam konteks buat-reaksi-aplikasi kami! Tapi ya, kedengarannya lebih seperti masalah di ujung mereka karena mjs adalah sesuatu.
jeffmicklos
pada 27 Mei 2017
sekali lagi, properti besar untuk @szimek karena sudah membawa ini ke CRA ... sepertinya mereka tidak tertarik untuk mendukung mjs ... guk.
Kita bisa membuat patch yang mengekspor build umd dengan nama yang berbeda, misalnya signature_pad.umd.js dan menggunakan signature_pad.js untuk pembuatan modul. Tidak yakin seberapa besar dampak yang akan terjadi pada distribusi Anda saat ini. Juga, tidak yakin seberapa umum kasus penggunaan ini saat ini ... Bagaimanapun, beri tahu kami bagaimana kami dapat membantu Anda!
jeffmicklos
pada 27 Mei 2017
Ya, namun mungkin masuk akal untuk mengganti nama file ini menjadi signature_pad.es6.js untuk memastikannya didukung di mana-mana. Namun, sekali lagi, mengganti nama file dist membutuhkan rilis utama, jadi ini mungkin perlu menunggu beberapa saat. Saya perlu memeriksa masalah lain terkait ekspor default vs bernama yang juga membutuhkan rilis utama (# 240). Mungkin saya akan melakukan keduanya pada saat bersamaan.
szimek
pada 27 Mei 2017
Solusi yang lebih baik adalah dengan mengimpor file js secara langsung
import SignaturePad from 'signature_pad/dist/signature_pad.js';
mlecoq
pada 3 Jun 2017
Terima kasih atas solusinya, mengimpor dari signature_pad/dist/signature_pad.js bekerja untuk kami atm.
Ada rekomendasi resmi dari Facebook tentang bagaimana ini bisa ditangani.
Pada dasarnya mereka menyarankan bahwa ES6 tidak dapat dianggap didukung penuh untuk beberapa tahun lagi, oleh karena itu perpustakaan harus menerbitkan kode ES5. Lihat bagian ini di readme:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm -run-build-failed-to-minify
Kupikir aku akan memberitahumu.
kreba
pada 12 Sep 2018
Saya belum mencobanya, tetapi create-react-app v2 juga harus mengkompilasi kode dalam node_modules - https://github.com/facebook/create-react-app/pull/3776. V3 (saat ini dalam versi beta) dari signature_pad tidak lagi menggunakan ekstensi mjs , jadi itu harus bekerja dengan create-react-app v2, meskipun akan sangat bagus untuk mengonfirmasi.
szimek
pada 12 Sep 2018
Harap buka kembali masalah ini jika masih menjadi masalah saat menggunakan CRA 2 dan versi beta terbaru dari pustaka ini.
szimek
pada 18 Jan 2019
Masalah terkait
hostcia
·
6Komentar
chitgoks
·
5Komentar
derUli
·
3Komentar
c2ofh
·
7Komentar
auam88
·
4Komentar
Komentar yang paling membantu
Solusi yang lebih baik adalah dengan mengimpor file js secara langsung
import SignaturePad from 'signature_pad/dist/signature_pad.js';