Razzle: memuat css di node_modules gagal di server dalam beberapa kasus

Apakah Anda berhasil menemukan solusi @ ravikp7 ?

@Ekman Tidak, sudah lama tidak melihat ke atas

Saya masih mencoba memikirkan yang satu ini.

Kami telah bermigrasi dari CRA ke Razzle dalam dua langkah:

1. Migrasikan aplikasi CRA kami apa adanya, tanpa SSR, dan tanpa fuzz tambahan. Buat tes unit dan tes e2e hijau.
2. Aktifkan SSR - ini adalah langkah yang kita lakukan saat ini

Saya mengalami masalah saat memuat file CSS dari pustaka eksternal yang pada gilirannya direferensikan dari pustaka eksternal:

• Proyek utama termasuk komponen x.js dari perpustakaan X.
• Komponen x.js membutuhkan y.css dari perpustakaan Y. Library X tidak memaketkan y.css , itu hanya mereferensikannya.

Proyek utama dikompilasi dengan baik setelah langkah 1. Tetapi ketika kami mencoba mengaktifkan SSR, ia meledak dengan kesalahan ini:

> razzle start

 WAIT  Compiling...

Using .babelrc defined in your app root
Using .babelrc defined in your app root

√ Client
  Compiled successfully in 7.13s

√ Server
  Compiled successfully in 1.95s

(node:15016) UnhandledPromiseRejectionWarning: C:\main-project\node_modules\react-dates\lib\css\_datepicker.css:1
.PresetDateRangePicker_panel {
^

SyntaxError: Unexpected token '.'
    at Module._compile (internal/modules/cjs/loader.js:895:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (C:\main-project\node_modules\@company\libraryY\dist\cjs\index.js:29:1)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
(node:15016) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:15016) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Kami telah mencoba mengomentari y.css di perpustakaan X dan menyertakan file langsung di proyek utama, itu berhasil. Saya tidak tahu di mana masalahnya.

mendapat kesalahan yang sama. apakah ada yang menemukan solusi?

Jika ini masih menjadi masalah, bisakah seseorang membuat contoh sederhana?

Apakah ada yang menemukan solusinya?

Kami tidak dapat mereproduksi masalah ini. Dapatkah Anda membuat contoh sederhana atau menunjukkan kepada kami prosedur dan konfigurasi yang tepat. Jika ini adalah masalah bagi banyak orang, kami sangat ingin memperbaikinya 😃

Saya akan mencoba membuat repo dan memposting di sini. Saya sedang memigrasi aplikasi CRA (pribadi) tetapi kemudian saya menghadapi masalah ini. Itu gagal ketika mencoba untuk mengkompilasi paket yang disebut modali, mungkin karena paket itu mengimpor file css secara internal. Saya menyelesaikannya * dengan menghapus config.externals di razzle.config.js mengikuti saran dari salah satu masalah.

@fivethreeo Hei, saya membuat proyek kecil yang mereproduksi bug. Lihat di sini: https://github.com/fa7ad/razzle-bug-test.

Langkah-langkah untuk mereproduksi:

• Gandakan repo dan instal dependensi
• yarn start
• buka http: // localhost : 3000

Contoh menggunakan razzle 3.1.0, ada 3.1.2 sekarang yang mungkin memperbaiki masalah ini.

Memperbarui razzle menjadi 3.1.3 , masih mengalami masalah yang sama 😞

PS. Saya juga memperbarui repo, harap periksa lagi

@ fa7ad Temukan alasannya :) https://github.com/upmostly/modali/issues/34

@ ravikp7 Saya rasa masalah Anda mungkin telah kami perbaiki baru-baru ini.

Saya juga mengalami masalah ini. Saya membuat repo tanpa tulang yang menggambarkan masalah ini: https://github.com/christiannaths/razzle-css-example

node v12.18.3
razzle 3.1.6

Ini adalah perubahan yang merusak kompilasi server (klien tampaknya mengkompilasi dengan baik) https://github.com/christiannaths/razzle-css-example/commit/123e73fb31123f1615a96e3ef0567d887c7094ea

Saya telah membaca setiap masalah yang dapat saya temukan di sini yang tampaknya terkait dengan ini, dan jika saya jujur, saya tidak 100% yakin apakah saya melewatkan sesuatu tentang aplikasi webpack / react SSR — mungkin ini seharusnya tidak bekerja ??

Ketika saya console.log konfigurasi webpack dalam file kustom razzle.config.js , saya dapat melihat bahwa css-loader untuk web dan node berbeda, meskipun saya ' Saya benar-benar tidak yakin mengapa mereka begitu. Saya tidak tahu apa perbedaan antara mengimpor file css lokal dan mengimpor dari node_modules ...

Jawaban yang jelas untuk masalah ini akan sangat dihargai 😕

Coba reset-css / reset.css

Terima kasih atas balasan cepatnya. Ya, sebentar lagi, terima kasih.

Apakah saya salah dalam berpikir bahwa ini masih belum ideal? Banyak paket tidak mengekspos jenis info ini di readme mereka, jadi saya sangat berharap repo contoh saya berfungsi. Jika tidak, saya harus menyelami sumber setiap paket dan mencari tahu di mana mereka menyimpan berbagai file CSS yang saya butuhkan.

yaitu,

• node_modules/reset-css/rest.css
• node_modules/typeface-amiri/index.css
• dll

Paket yang dimaksud keduanya mendefinisikan file css masing-masing di entri package.json.main , jadi saya kira saya akan mengharapkan impor ini (tanpa jalur langsung ke file css) untuk bekerja.

Saya pikir main harus jalur modul cjs. Gaya yang saya tidak yakin. Jadi index.js mereka harus memiliki kebutuhan reset.css

Ya, itu masuk akal. Tapi sejujurnya, saya masih bingung. Contoh yang saya berikan adalah _hardly_ satu-satunya paket yang bekerja dengan cara ini; hal semacam ini ditemukan di alam liar di semua tempat, dan semuanya bekerja secara default di banyak sistem lain (next.js, create-react-app, react-static).

Saya pikir inti dari masalah ini tidak diselesaikan dengan solusi atau meminta paket pihak ketiga untuk membuat perubahan. Ada pertanyaan mendasar yang masih tersisa.

1. Mengapa ini berfungsi di klien dan bukan di server?

Jika Anda merasa ini adalah kandidat untuk perubahan, saya akan dengan senang hati mengerjakannya.

Jika Anda dapat menemukan solusi, saya mendukungnya :)

OK keren. Karena Anda sepertinya mengisyaratkan bahwa ini memang perilaku yang tidak diinginkan, apakah Anda akan mempertimbangkan untuk membuka kembali masalah ini agar dapat dilacak dengan lebih baik (dan membantu orang lain yang datang ke sini memahami bahwa ini benar-benar sebuah masalah)?

Masalahnya adalah ada konvensi untuk bidang utama, tetapi tidak selalu diikuti di alam liar.

Lihatlah nodeexternals saya pikir :)

Keren, ya, sekilas saya melihat konfigurasi webpack, sepertinya itulah yang hilang. Saya akan bermain dengannya secepat mungkin

Saya pikir node-eksternal adalah penyebabnya karena hanya mengizinkan .css secara langsung.

https://github.com/jaredpalmer/razzle/pull/1370

https://github.com/vercel/next.js/blob/canary/packages/next/build/webpack-config.ts#L512

diperbaiki di dev

masih mendapatkan kesalahan saya menggunakan razzle v3.3.13. perubahan apa yang dibutuhkan dalam file razzle.config.js?

√ Client
  Compiled successfully in 46.33s

√ Server
  Compiled successfully in 46.04s

G:\razzle-webapp\node_modules\react-images-upload\index.css:1
.fileUploader {
^

SyntaxError: Unexpected token '.'
    at wrapSafe (internal/modules/cjs/loader.js:1072:16)
    at Module._compile (internal/modules/cjs/loader.js:1122:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (G:\Webelight\adamsea-web-Fix-mansi-mar-10-add-razzle\node_modules\react-images-upload\compiled.js:17:1)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)

Hal ini terjadi karena paket tersebut berada di sisi server yang dieksteralisasi. Saya akan membuat pembaruan dokumen untuk menunjukkan cara memperbaikinya.

Diperbaiki di razzle 3.4.2 dan dokumen

https://razzlejs.org/getting-started#common -issues
https://razzle-git-canary-jared.vercel.app/getting-started#common -issues

@fivethreeo Terima kasih banyak atas tanggapan cepat dan solusi yang Anda selamatkan hari ini !!! bekerja dengan cukup baik !!