Razzle: cargar css en node_modules falla en el servidor en algunos casos

¿ Conseguiste encontrar una solución

@Ekman No, no he mirado hacia arriba en un tiempo

Todavía estoy tratando de resolver este.

Hemos migrado de CRA a Razzle en dos pasos:

1. Migre nuestra aplicación CRA tal cual, sin SSR y sin problemas adicionales. Haga que las pruebas unitarias y la prueba e2e sean verdes.
2. Habilitar SSR: este es el paso en el que estamos actualmente

Tengo problemas para cargar un archivo CSS desde una biblioteca externa a la que a su vez se hace referencia desde una biblioteca externa:

• El proyecto principal incluye el componente x.js de la biblioteca X
• El componente x.js requiere y.css de la biblioteca Y. La biblioteca X no incluye y.css , solo hace referencia a él.

El proyecto principal se compila bien después del paso 1. Pero cuando intentamos habilitar SSR, explota con este error:

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

Intentamos comentar y.css en la biblioteca X e incluimos el archivo directamente en el proyecto principal, funciona. Simplemente no puedo entender dónde está el problema.

obtuve el mismo error. ¿Alguien encontró una solución?

Si esto sigue siendo un problema, ¿alguien podría dar un ejemplo simple?

¿Alguien encontró una solución?

No podemos reproducir este problema. ¿Puede hacer un ejemplo simple o mostrarnos su procedimiento y configuración exactos. Si esto es un problema para muchas personas, queremos solucionarlo 😃

Intentaré crear un repositorio y publicarlo aquí. Estaba migrando una aplicación CRA (privada) pero luego me enfrenté a este problema. Falló al intentar compilar un paquete llamado modali, probablemente porque ese paquete importa un archivo css internamente. Lo resolví * eliminando config.externals en razzle.config.js siguiendo una sugerencia de uno de los problemas.

@fivethreeo Oye, creé un pequeño proyecto que reproduce el error. Eche un vistazo aquí: https://github.com/fa7ad/razzle-bug-test.

Pasos para reproducir:

• Clonar repositorio e instalar dependencias
• yarn start
• vaya a http: // localhost : 3000

El ejemplo usa razzle 3.1.0, ahora hay un 3.1.2 que podría solucionar este problema.

Razzle actualizado a 3.1.3 , todavía tiene el mismo problema 😞

PD. También actualizo el repositorio, vuelva a comprobarlo

@ fa7ad Descubrí por qué :) https://github.com/upmostly/modali/issues/34

@ ravikp7 Creo que su problema podría haber sido algo que

También estoy experimentando este problema. Hice un repositorio básico que ilustra este problema: https://github.com/christiannaths/razzle-css-example

nodo v12.18.3
razzle 3.1.6

Este es el cambio que rompe la compilación del servidor (el cliente parece compilar bien) https://github.com/christiannaths/razzle-css-example/commit/123e73fb31123f1615a96e3ef0567d887c7094ea

He leído todos los problemas que pude encontrar aquí que parecían relacionados con esto, y si soy sincero, no estoy 100% seguro de si tal vez me falta algo con respecto a las aplicaciones SSR webpack / react, tal vez esto ¿No se supone que realmente funcione?

Cuando console.log la configuración del paquete web en un archivo razzle.config.js , puedo ver que los cargadores de css para web y node son diferentes, aunque yo ' Realmente no estoy seguro de por qué lo estarían. No puedo averiguar cuál sería la diferencia entre importar un archivo css local e importar uno desde node_modules ...

Se agradecería enormemente una respuesta clara a este problema 😕

Intente reset-css / reset.css

Gracias por la rápida respuesta. Sí, un momento de bombilla allí, gracias por eso.

¿Me equivoco al pensar que esto todavía no es ideal? Muchos paquetes no exponen este tipo de información en su archivo Léame, por lo que esperaría que mi repositorio de ejemplo funcione. De lo contrario, tengo que sumergirme en la fuente de cada paquete y averiguar dónde guardan varios archivos CSS que necesito.

es decir,

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

Los paquetes en cuestión definen sus respectivos archivos css en su entrada package.json.main , así que supongo que esperaría que funcionen estas importaciones (sin ruta directa a los archivos css).

Creo que main debería ser una ruta de un módulo cjs. Estilo del que no estoy seguro. Entonces su index.js debería tener un reset.css require

Sí, eso tiene sentido. Pero honestamente, todavía estoy confundido. Los ejemplos que di son _ difícilmente_ los únicos paquetes que funcionan de esta manera; este tipo de cosas se encuentran en la naturaleza por todas partes, y todo funciona por defecto en muchos otros sistemas (next.js, create-react-app, react-static).

Creo que el meollo de este problema no se resuelve con soluciones alternativas o pidiendo a paquetes de terceros que realicen cambios. Hay una pregunta fundamental que aún permanece.

1. ¿Por qué funciona esto en el cliente y no en el servidor?

Si cree que este es un candidato para el cambio, estaría más que feliz de trabajar en él.

Si puedes encontrar una solución, estoy totalmente de acuerdo :)

Está bien. Dado que parece insinuar que este es un comportamiento no deseado, ¿considerará reabrir este problema para que se pueda rastrear mejor (y ayudar a otras personas que vienen aquí a entender que realmente es un problema)?

El problema es que existen convenciones para los campos principales, pero no siempre se siguen en la naturaleza.

Mira nodeexternals, creo :)

Genial, sí, en mi breve mirada a la configuración del paquete web, parecía que eso era lo que faltaba. Jugaré un poco con eso tan pronto como pueda

Creo que node-externals es lo que está causando esto, ya que solo permite .css directamente.

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

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

arreglado en dev

Sigo recibiendo el error Estoy usando razzle v3.3.13. ¿Qué cambios requieren en el archivo 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)

Esto sucede porque el paquete es del lado del servidor exteralizado. Haré una actualización del documento para mostrar cómo solucionar este problema.

Corregido en razzle 3.4.2 y documentos

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

@fivethreeo ¡ Muchas gracias por la respuesta rápida y la solución que salvó el día! funciona bastante bien !!