Razzle: le chargement de css dans node_modules échoue sur le serveur dans certains cas

Avez-vous réussi à trouver une solution @ ravikp7 ?

@Ekman Non, je n'ai pas levé les yeux depuis un moment

J'essaie toujours de comprendre celui-ci.

Nous avons migré de CRA vers Razzle en deux étapes:

1. Migrez notre application CRA telle quelle, sans SSR et sans fuzz supplémentaire. Rendre les tests unitaires et les tests e2e verts.
2. Activer SSR - c'est l'étape sur laquelle nous sommes actuellement

J'ai des problèmes pour charger un fichier CSS à partir d'une bibliothèque externe qui à son tour est référencée à partir d'une bibliothèque externe:

• Le projet principal comprend le composant x.js de la bibliothèque X
• Le composant x.js nécessite y.css de la bibliothèque Y. La bibliothèque X ne regroupe pas y.css , elle y fait simplement référence.

Le projet principal se compile très bien après l'étape 1. Mais lorsque nous essayons d'activer SSR, il explose avec cette erreur:

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

Nous avons essayé de commenter y.css dans la bibliothèque X et avons inclus le fichier directement dans le projet principal, cela fonctionne. Je n'arrive tout simplement pas à comprendre où est le problème.

a eu la même erreur. quelqu'un a-t-il trouvé une solution?

Si c'est toujours un problème, quelqu'un pourrait-il donner un exemple simple?

Quelqu'un a-t-il trouvé une solution?

Nous ne pouvons pas reproduire ce problème. Pouvez-vous faire un exemple simple ou nous montrer votre procédure et configuration exactes. Si c'est un problème pour beaucoup de gens, nous voulons vraiment le résoudre 😃

Je vais essayer de créer un dépôt et de publier ici. J'étais en train de migrer une application CRA (privée), mais j'ai ensuite rencontré ce problème. Il a échoué lors de la tentative de compilation d'un package appelé modali, probablement parce que ce package importe un fichier css en interne. Je l'ai résolu * en supprimant config.externals dans razzle.config.js suite à une suggestion de l'un des problèmes.

@fivethreeo Hé, j'ai créé un petit projet qui reproduit le bogue. Jetez un œil ici: https://github.com/fa7ad/razzle-bug-test.

Étapes à suivre pour reproduire:

• Cloner le dépôt et installer les dépendances
• yarn start
• aller à http: // localhost : 3000

L'exemple utilise razzle 3.1.0, il existe maintenant un 3.1.2 qui pourrait résoudre ce problème.

Razzle mis à jour à 3.1.3 , toujours avec le même problème 😞

PS. J'ai également mis à jour le dépôt, veuillez vérifier à nouveau

@ fa7ad J'ai découvert pourquoi :) https://github.com/upmostly/modali/issues/34

@ ravikp7 Je pense que votre problème est peut-être quelque chose que nous avons corrigé récemment.

Je rencontre également ce problème. J'ai fait un repo simple qui illustre ce problème: https://github.com/christiannaths/razzle-css-example

nœud v12.18.3
razzle 3.1.6

C'est le changement qui rompt la compilation du serveur (le client semble bien compiler) https://github.com/christiannaths/razzle-css-example/commit/123e73fb31123f1615a96e3ef0567d887c7094ea

J'ai lu tous les problèmes que j'ai pu trouver ici et qui semblaient liés à cela, et si je suis honnête, je ne suis pas sûr à 100% si je manque peut-être quelque chose en ce qui concerne les applications SSR webpack / react - peut-être ceci n'est pas censé fonctionner?

Quand je console.log la configuration du webpack dans un fichier personnalisé razzle.config.js , je peux voir que les chargeurs css pour web et node sont différents, bien que je '' Je ne sais vraiment pas pourquoi ils le seraient. Je ne peux pas déterminer quelle serait la différence entre importer un fichier css local et en importer un à partir de node_modules ...

Une réponse claire à ce problème serait massivement appréciée 😕

Essayez reset-css / reset.css

Merci pour la réponse rapide. Oui, un petit moment d'ampoule là-bas, merci pour cela.

Ai-je tort de penser que ce n'est toujours pas idéal? De nombreux packages n'exposent pas ce type d'informations dans leur fichier readme, donc je m'attendrais vraiment à ce que mon exemple de dépôt fonctionne. Sinon, je dois plonger dans la source de chaque paquet et savoir où ils conservent les divers fichiers CSS dont j'ai besoin.

c'est à dire,

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

Les packages en question définissent tous les deux leurs fichiers css respectifs dans leur entrée package.json.main , donc je suppose que je m'attendrais à ce que ces importations (sans chemin direct vers les fichiers css) fonctionnent.

Je pense que main devrait être un chemin vers un module cjs. Style dont je ne suis pas sûr. Donc, leur index.js devrait avoir un reset.css require

Ouais, ça a du sens. Mais honnêtement, je suis toujours confus. Les exemples que j'ai donnés sont _hardly_ les seuls packages qui fonctionnent de cette façon; ce genre de chose se trouve partout dans la nature, et tout fonctionne par défaut dans de nombreux autres systèmes (next.js, create-react-app, react-static).

Je pense que le cœur de ce problème n'est pas résolu par des solutions de contournement ou en demandant à des packages tiers d'apporter des modifications. Il y a une question fondamentale qui demeure.

1. Pourquoi cela fonctionne-t-il sur le client et non sur le serveur?

Si vous pensez que c'est un candidat pour le changement, je serais plus qu'heureux d'y travailler.

Si vous pouvez trouver une solution, je suis tout à fait pour :)

OK cool. Puisque vous semblez laisser entendre qu'il s'agit en effet d'un comportement indésirable, envisagerez-vous de rouvrir ce numéro afin qu'il puisse être mieux suivi (et aider les autres personnes qui viennent ici à comprendre que c'est vraiment un problème)?

Le problème est qu'il existe des conventions pour les champs principaux, mais ne sont pas toujours respectées à l'état sauvage.

Regardez nodeexternals je pense :)

Cool, oui, dans mon bref regard sur la configuration du Webpack, il semblait que c'était ce qui manquait. Je jouerai avec un peu dès que je pourrai

Je pense que les nœuds externes en sont la cause, car ils n'autorisent que .css directement.

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

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

corrigé dans le développement

toujours une erreur J'utilise razzle v3.3.13. quels changements nécessitent dans le fichier 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)

Cela se produit parce que le paquet est du côté du serveur extériorisé. Je vais faire une mise à jour de la documentation pour montrer comment résoudre ce problème.

Corrigé dans razzle 3.4.2 et docs

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

@fivethreeo Merci beaucoup pour la réponse rapide et la solution que vous avez sauvé la journée !!! fonctionne plutôt bien !!