Razzle: carregar css em node_modules falha no servidor em alguns casos

Você conseguiu encontrar uma solução @ ravikp7 ?

@Ekman Não, não olhei para cima por um tempo

Ainda estou tentando descobrir isso.

Migramos do CRA para o Razzle em duas etapas:

1. Migre nosso aplicativo CRA no estado em que se encontra, sem SSR e sem difusão extra. Faça testes de unidade e teste e2e verde.
2. Ativar SSR - esta é a etapa em que estamos atualmente

Tenho problemas para carregar um arquivo CSS de uma biblioteca externa que, por sua vez, é referenciada em uma biblioteca externa:

• O projeto principal inclui o componente x.js da biblioteca X
• O componente x.js requer y.css da biblioteca Y. A biblioteca X não agrupa y.css , apenas faz referência a ele.

O projeto principal é compilado perfeitamente após a etapa 1. Mas, quando tentamos habilitar o SSR, ele explode com este erro:

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

Tentamos comentar y.css na biblioteca X e incluímos o arquivo diretamente no projeto principal, ele funciona. Simplesmente não consigo descobrir onde está o problema.

obteve o mesmo erro. alguém encontrou solução?

Se isso ainda for um problema, alguém poderia dar um exemplo simples?

Alguém encontrou uma solução?

Não podemos reproduzir este problema. Você pode fazer um exemplo simples ou nos mostrar seu procedimento e configuração exatos. Se isso é um problema para muitas pessoas, queremos muito consertá-lo 😃

Vou tentar criar um repositório e postar aqui. Eu estava migrando um aplicativo CRA (privado), mas enfrentei esse problema. Ele falhou ao tentar compilar um pacote chamado modali, provavelmente porque esse pacote importa um arquivo css internamente. Resolvi * isso removendo config.externals em razzle.config.js seguindo uma sugestão de um dos problemas.

@fivethreeo Ei, criei um pequeno projeto que reproduz o bug. Dê uma olhada aqui: https://github.com/fa7ad/razzle-bug-test.

Passos para reproduzir:

• Clonar repo e instalar dependências
• yarn start
• vá para http: // localhost : 3000

O exemplo usa o razzle 3.1.0, há um 3.1.2 agora que pode corrigir esse problema.

Razzle atualizado para 3.1.3 , ainda com o mesmo problema 😞

PS. Eu também atualizo o repo, verifique novamente

@ fa7ad Descubra o porquê :) https://github.com/upmostly/modali/issues/34

@ ravikp7 Acho que seu problema pode ter sido algo que corrigimos recentemente.

Também estou enfrentando esse problema. Fiz um repositório básico que ilustra esse problema: https://github.com/christiannaths/razzle-css-example

nó v12.18.3
razzle 3.1.6

Esta é a mudança que quebra a compilação do servidor (o cliente parece compilar bem) https://github.com/christiannaths/razzle-css-example/commit/123e73fb31123f1615a96e3ef0567d887c7094ea

Li todos os problemas que encontrei aqui que pareciam relacionados a isso e, para ser honesto, não tenho 100% de certeza se estou perdendo algo em relação aos aplicativos SSR webpack / react - talvez este não deveria funcionar?

Quando eu console.log a configuração do webpack em um arquivo razzle.config.js , posso ver que os css-loaders para web e node são diferentes, embora eu ' Eu realmente não tenho certeza por que eles seriam. Não consigo descobrir qual seria a diferença entre importar um arquivo css local e importar um de node_modules ...

Uma resposta clara a esta questão seria muito apreciada 😕

Tente reset-css / reset.css

Obrigado pela resposta rápida. Sim, um momento um pouco luminoso, obrigado por isso.

Estou errado em pensar que isso ainda não é o ideal? Muitos pacotes não expõem esse tipo de informação em seu readme, então eu espero que meu repositório de exemplo funcione. Caso contrário, tenho que mergulhar no código-fonte de cada pacote e descobrir onde eles mantêm os vários arquivos CSS de que preciso.

ou seja,

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

Os pacotes em questão definem seus respectivos arquivos css em sua entrada package.json.main , então acho que esperaria que essas importações (sem direcionar diretamente para os arquivos css) funcionassem.

Eu acho que main deve ser um caminho para um módulo cjs. Não tenho certeza sobre o estilo. Portanto, seu index.js deve ter um reset.css require

Sim, isso faz sentido. Mas, honestamente, ainda estou confuso. Os exemplos que dei são _dificilmente_ os únicos pacotes que funcionam dessa maneira; esse tipo de coisa é encontrado em todo o lugar, e tudo funciona por padrão em muitos outros sistemas (next.js, create-react-app, react-static).

Acho que o cerne desse problema não é resolvido por soluções alternativas ou pedindo a pacotes de terceiros para fazer alterações. Há uma questão fundamental que ainda permanece.

1. Por que isso funciona no cliente e não no servidor?

Se você acha que este é um candidato à mudança, ficaria mais do que feliz em trabalhar nisso.

Se você puder encontrar uma solução, estou totalmente a favor :)

OK legal. Já que você parece sugerir que este é realmente um comportamento indesejado, você consideraria reabrir este problema para que possa ser rastreado melhor (e ajudar outras pessoas que vêm aqui a entender que é realmente um problema)?

O problema é que existem convenções para os campos principais, mas nem sempre são seguidas na natureza.

Olhe para nodeexternals, eu acho :)

Legal, sim, em minha breve olhada na configuração do webpack, parecia que era isso que estava faltando. Vou brincar um pouco com ele assim que puder

Acho que o nó externo é o que está causando isso, uma vez que só permite .css diretamente.

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

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

corrigido em dev

ainda recebendo erro, estou usando o razzle v3.3.13. quais mudanças exigem no arquivo 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)

Isso acontece porque o pacote é exteralizado do lado do servidor. Farei uma atualização do documento para mostrar como consertar isso.

Corrigido no razzle 3.4.2 e docs

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

@fivethreeo Muito obrigado pela resposta rápida e solução vc salvou o dia !!! funciona muito bem !!