Razzle: 일부 경우에 node_modules의로드 CSS가 서버에서 실패합니다.

@ ravikp7 솔루션을

@Ekman 아니요, 한동안 찾아 보지 않았습니다.

나는 아직도 이것을 알아 내려고 노력하고있다.

두 단계를 거쳐 CRA에서 Razzle로 마이그레이션했습니다.

1. CRA 앱을있는 그대로, SSR 및 추가 퍼지없이 마이그레이션하십시오. 단위 테스트와 e2e 테스트를 녹색으로 만듭니다.
2. SSR 활성화-현재 진행중인 단계입니다.

외부 라이브러리에서 차례로 참조되는 외부 라이브러리에서 CSS 파일을로드하는 데 문제가 있습니다.

• 메인 프로젝트에는 라이브러리 X의 구성 요소 x.js 가 포함됩니다.
• 구성 요소 x.js 라이브러리 Y에서 y.css이 필요합니다. 라이브러리 X 는 y.css를 번들로 제공하지 않고 참조

주 프로젝트는 1 단계 후에 잘 컴파일됩니다.하지만 SSR을 활성화하려고하면 다음 오류가 발생합니다.

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

우리는 라이브러리 X 에서 y.css 를 주석 처리하고 메인 프로젝트에 직접 파일을 포함 시켰습니다. 문제가 어디인지 알 수 없습니다.

같은 오류가 발생했습니다. 아무도 해결책을 찾았습니까?

이것이 여전히 문제라면 누군가가 간단한 예를 만들 수 있습니까?

아무도 해결책을 찾았습니까?

이 문제를 재현 할 수 없습니다. 간단한 예제를 만들거나 정확한 절차와 구성을 보여줄 수 있습니까? 이것이 많은 사람들에게 문제라면 우리는 그것을 고치고 싶습니다 😃

여기에 리포지토리를 만들고 게시 해 보겠습니다. (비공개) CRA 앱을 마이그레이션하고 있었지만이 문제에 직면했습니다. modali라는 패키지를 컴파일하는 동안 실패했습니다. 아마도 해당 패키지가 내부적으로 CSS 파일을 가져 오기 때문일 것입니다. 문제 중 하나의 제안에 따라 razzle.config.js에서 config.externals를 제거하여 문제를 해결했습니다.

@fivethreeo 안녕하세요, 버그를 재현하는 작은 프로젝트를 만들었습니다. https://github.com/fa7ad/razzle-bug-test 에서 살펴보세요

재현 단계 :

• 저장소 복제 및 종속성 설치
• yarn start
• http : // localhost : 3000으로 이동

이 예제는 razzle 3.1.0을 사용하며, 이제이 문제를 해결할 수있는 3.1.2가 있습니다.

razzle 을 3.1.3 로 업데이트했지만 여전히 동일한 문제가 있습니다 😞

추신. 리포지토리도 업데이트합니다. 다시 확인 해주세요.

@ fa7ad 이유를 찾았습니다 :) https://github.com/upmostly/modali/issues/34

@ ravikp7 귀하의 문제가 최근에 수정 된 문제라고 생각합니다.

이 문제도 발생합니다. 이 문제를 설명하는 베어 본 저장소를 만들었습니다 : https://github.com/christiannaths/razzle-css-example

노드 v12.18.3
razzle 3.1.6

이것은 서버 컴파일을 중단시키는 변경 사항입니다 (클라이언트가 잘 컴파일되는 것 같습니다) https://github.com/christiannaths/razzle-css-example/commit/123e73fb31123f1615a96e3ef0567d887c7094ea

여기에서 찾을 수있는이 문제와 관련된 것으로 보이는 모든 문제를 읽었으며, 솔직히 말하자면 SSR 웹팩 / 리 액트 앱과 관련하여 뭔가 빠진 것이 있는지 100 % 확신 할 수는 없습니다. 실제로 작동하지 않아야 하는가 ??

사용자 지정 razzle.config.js 파일의 웹팩 구성을 console.log 하면 web 및 node 의 css-loader가 다른 것을 볼 수 있습니다. 왜 그런지 잘 모르겠습니다. 로컬 CSS 파일을 가져 오는 것과 node_modules 에서 가져 오는 것 사이의 차이점을 알아낼 수 없습니다.

이 문제에 대한 명확한 답변은 대단히 감사하겠습니다 😕

reset-css / reset.css 시도

빠른 답변 감사합니다. 네, 약간의 전구가 있습니다. 감사합니다.

이것이 여전히 이상적이지 않다고 생각하는 것이 잘못입니까? 많은 패키지가 readme에 이러한 유형의 정보를 표시하지 않으므로 예제 저장소가 작동 할 것으로 기대합니다. 그렇지 않으면 각 패키지의 소스를 살펴보고 필요한 다양한 CSS 파일이 어디에 있는지 찾아야합니다.

즉,

• node_modules/reset-css/rest.css
• node_modules/typeface-amiri/index.css
• 기타

문제의 패키지는 모두 package.json.main 항목에 각각의 CSS 파일을 정의하므로 이러한 가져 오기 (css 파일에 대한 경로 지정없이)가 작동 할 것으로 예상합니다.

main은 cjs 모듈의 경로 여야한다고 생각합니다. 스타일 잘 모르겠습니다. 따라서 index.js에는 reset.css가 있어야합니다.

네, 말이 되네요. 하지만 솔직히 아직도 혼란 스럽습니다. 내가 준 예제는 이런 식으로 작동하는 유일한 패키지입니다. 이런 종류의 것은 모든 곳에서 발견되며 기본적으로 다른 많은 시스템 (next.js, create-react-app, react-static)에서 모두 작동합니다.

이 문제의 핵심은 해결 방법이나 타사 패키지 변경 요청으로 해결되지 않는다고 생각합니다. 여전히 남아있는 근본적인 질문이 있습니다.

1. 이것이 서버가 아닌 클라이언트에서 작동하는 이유는 무엇입니까?

이것이 변화의 후보라고 생각하시면 기꺼이 노력하겠습니다.

해결책을 찾을 수 있다면 나는 그것을 위해 모두입니다 :)

그래요 좋아요. 이것이 정말로 바람직하지 않은 행동이라는 것을 암시하는 것 같으므로이 문제를 다시 열어서 더 잘 추적 할 수 있도록 고려 하시겠습니까 (그리고 여기에 오는 다른 사람들이이 문제가 진정 문제라는 것을 이해하도록 도와 주시겠습니까)?

문제는 메인 필드에 대한 규칙이 있지만 항상 야생에서 따르는 것은 아닙니다.

내가 생각하는 nodeexternals 좀 봐 :)

멋지다, 예, webpack 구성을 간략히 살펴보면 그것이 누락 된 것처럼 보였습니다. 내가 할 수있는 한 빨리 그것을 가지고 놀 것이다

나는 node-externals가 .css 만 직접 허용하기 때문에 이것이 원인이라고 생각합니다.

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

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

dev에서 수정

razzle v3.3.13을 사용하고 있습니다. 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)

이것은 패키지가 서버 측에서 구제되기 때문에 발생합니다. 이 문제를 해결하는 방법을 보여주기 위해 문서를 업데이트하겠습니다.

razzle 3.4.2 및 문서에서 수정 됨

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

@fivethreeo 빠른 응답과 솔루션에 감사드립니다. 꽤 잘 작동합니다 !!