Razzle: Das Laden von CSS in Node_Modules schlägt in einigen Fällen auf dem Server fehl

Haben Sie es geschafft, eine Lösung @ ravikp7 zu finden?

@ Ekman Nein, ich habe eine Weile nicht mehr

Ich versuche immer noch, das herauszufinden.

Wir sind in zwei Schritten von CRA auf Razzle migriert:

1. Migrieren Sie unsere CRA-App wie sie ist, ohne SSR und ohne zusätzlichen Flaum. Machen Sie Unit-Tests und e2e-Test grün.
2. SSR aktivieren - dies ist der Schritt, den wir derzeit ausführen

Ich habe Probleme beim Laden einer CSS-Datei aus einer externen Bibliothek, auf die wiederum aus einer externen Bibliothek verwiesen wird:

• Das Hauptprojekt enthält die Komponente x.js aus der Bibliothek X.
• Die Komponente x.js benötigt y.css aus der Bibliothek Y. Bibliothek X bündelt y.css nicht , sondern verweist nur darauf.

Das Hauptprojekt wird nach Schritt 1 einwandfrei kompiliert. Wenn wir jedoch versuchen, SSR zu aktivieren, explodiert es mit dem folgenden Fehler:

> 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.

Wir haben versucht, y.css in Bibliothek X auskommentieren und die Datei direkt in das Hauptprojekt aufgenommen. Es funktioniert. Ich kann einfach nicht herausfinden, wo das Problem liegt.

habe den gleichen Fehler. hat jemand eine Lösung gefunden?

Wenn dies immer noch ein Problem ist, könnte jemand ein einfaches Beispiel geben?

Hat jemand eine Lösung gefunden?

Wir können dieses Problem nicht reproduzieren. Können Sie ein einfaches Beispiel machen oder uns Ihre genaue Vorgehensweise und Konfiguration zeigen? Wenn dies für viele Menschen ein Problem ist, möchten wir es unbedingt beheben 😃

Ich werde versuchen, ein Repo zu erstellen und hier zu posten. Ich habe eine (private) CRA-App migriert, aber dann war ich mit diesem Problem konfrontiert. Beim Versuch, ein Paket namens modali zu kompilieren, ist ein Fehler aufgetreten, wahrscheinlich weil dieses Paket eine CSS-Datei intern importiert. Ich habe * es gelöst, indem ich config.externals in razzle.config.js nach einem Vorschlag aus einem der Probleme entfernt habe.

@fivethreeo Hey, ich habe ein kleines Projekt erstellt, das den Fehler reproduziert. Schauen Sie hier: https://github.com/fa7ad/razzle-bug-test.

Schritte zum Reproduzieren:

• Repo klonen und Abhängigkeiten installieren
• yarn start
• Gehen Sie zu http: // localhost : 3000

In diesem Beispiel wird Razzle 3.1.0 verwendet. Es gibt jetzt eine Version 3.1.2, mit der dieses Problem möglicherweise behoben wird.

Razzle wurde auf 3.1.3 aktualisiert und hat immer noch das gleiche Problem 😞

PS. Ich aktualisiere auch das Repo, bitte überprüfen Sie es erneut

@ fa7ad Finde heraus warum :) https://github.com/upmostly/modali/issues/34

@ ravikp7 Ich denke, Ihr Problem wurde möglicherweise kürzlich behoben.

Ich habe auch dieses Problem. Ich habe ein Bare-Bones-Repo erstellt, das dieses Problem veranschaulicht: https://github.com/christiannaths/razzle-css-example

Knoten v12.18.3
razzle 3.1.6

Dies ist die Änderung, die die Serverkompilierung unterbricht (der Client scheint gut zu kompilieren). Https://github.com/christiannaths/razzle-css-example/commit/123e73fb31123f1615a96e3ef0567d887c7094ea

Ich habe alle Probleme gelesen, die ich hier finden konnte und die damit zusammenhängen, und wenn ich ehrlich bin, bin ich mir nicht 100% sicher, ob mir in Bezug auf SSR-Webpack- / Reaktions-Apps etwas fehlt - vielleicht dies soll eigentlich nicht funktionieren ??

Wenn ich console.log die webpack config in einer benutzerdefinierten razzle.config.js Datei, kann ich sehen , dass die CSS-Lader für web und node unterschiedlich ist, obwohl ich‘ Ich bin mir wirklich nicht sicher, warum sie es sein würden. Ich kann nicht herausfinden, was der Unterschied zwischen dem Importieren einer lokalen CSS-Datei und dem Importieren einer von node_modules ... wäre.

Eine klare Antwort auf dieses Problem wäre sehr dankbar 😕

Versuchen Sie reset-css / reset.css

Danke für die schnelle Antwort. Ja, ein bisschen wie eine Glühbirne, danke dafür.

Bin ich falsch zu denken, dass dies immer noch nicht ideal ist? Viele Pakete stellen diese Art von Informationen in ihrer Readme-Datei nicht zur Verfügung, daher würde ich sehr erwarten, dass mein Beispiel-Repo funktioniert. Ansonsten muss ich in die Quelle jedes Pakets eintauchen und herausfinden, wo sich verschiedene CSS-Dateien befinden, die ich benötige.

dh

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

Die fraglichen Pakete definieren beide ihre jeweiligen CSS-Dateien in ihrem package.json.main -Eintrag. Ich würde also erwarten, dass diese Importe (ohne direkt zu den CSS-Dateien zu wechseln) funktionieren.

Ich denke, main sollte ein Pfad eines cjs-Moduls sein. Stil, bei dem ich mir nicht sicher bin. Daher sollte für ihre index.js eine reset.css erforderlich sein

Ja, das macht Sinn. Aber ehrlich gesagt bin ich immer noch verwirrt. Die Beispiele, die ich gegeben habe, sind kaum die einzigen Pakete, die auf diese Weise funktionieren; Diese Art von Dingen ist überall in der Natur zu finden und funktioniert standardmäßig in vielen anderen Systemen (next.js, create-react-app, react-static).

Ich denke, das Herz dieses Problems wird nicht durch Problemumgehungen oder das Auffordern von Paketen von Drittanbietern gelöst, Änderungen vorzunehmen. Es bleibt eine grundlegende Frage offen.

1. Warum funktioniert das auf dem Client und nicht auf dem Server?

Wenn Sie der Meinung sind, dass dies ein Kandidat für Veränderungen ist, würde ich gerne daran arbeiten.

Wenn Sie eine Lösung finden können, bin ich alles dafür :)

OK Cool. Da Sie anscheinend darauf hinweisen, dass dies tatsächlich ein unerwünschtes Verhalten ist, werden Sie in Betracht ziehen, dieses Problem erneut zu öffnen, damit es besser nachverfolgt werden kann (und anderen Personen, die hierher kommen, helfen, zu verstehen, dass es sich wirklich um ein Problem handelt)?

Das Problem ist, dass es Konventionen für Hauptfelder gibt, die jedoch nicht immer in freier Wildbahn befolgt werden.

Schau dir Nodeexternals an, denke ich :)

Cool, ja, in meinem kurzen Blick auf die Webpack-Konfiguration schien das zu fehlen. Ich werde ein bisschen damit spielen, sobald ich kann

Ich denke, Node-Externals ist das, was dies verursacht, da es nur .css direkt erlaubt.

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

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

behoben in dev

Immer noch Fehler Ich verwende Razzle v3.3.13. Welche Änderungen sind in der Datei razzle.config.js erforderlich?

√ 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)

Dies geschieht, weil das Paket serverseitig exteralisiert ist. Ich werde ein Dokument-Update durchführen, um zu zeigen, wie dies behoben werden kann.

In Razzle 3.4.2 und Docs behoben

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

@fivethreeo Vielen Dank für die schnelle Antwort und Lösung. Du hast den Tag gerettet !!! funktioniert ziemlich gut !!