Razzle: node_modulesのロードcssがサーバーで失敗する場合があります

解決策@ ravikp7を見つけることができましたか？

@Ekmanいいえ、しばらく調べていません

私はまだこれを理解しようとしています。

2つのステップで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ファイルを内部的にインポートしているためです。 問題の1つからの提案に従って、razzle.config.jsのconfig.externalsを削除することで解決しました*。

@fivethreeoねえ、私はバグを再現する小さなプロジェクトを作成しました。 こちらをご覧ください： //github.com/fa7ad/razzle-bug-test。

再現する手順：

• リポジトリのクローンを作成し、依存関係をインストールします
• yarn start
• http：// localhost ：3000に移動し

この例ではrazzle3.1.0を使用していますが、この問題を修正する可能性のある3.1.2があります。

ラズルを3.1.3に更新しましたが、まだ同じ問題があります😞

PS。 リポジトリも更新しますので、もう一度確認してください

@ fa7ad理由がhttps://github.com/upmostly/modali/issues/34

@ ravikp7あなたの問題は私たちが最近修正したものだったのではないかと思います。

私もこの問題を経験しています。 この問題を説明する最低限のリポジトリを作成しました： https ：

ノードv12.18.3
ラズル3.1.6

これはサーバーのコンパイルを中断する変更です（クライアントは正常にコンパイルされているようです） https://github.com/christiannaths/razzle-css-example/commit/123e73fb31123f1615a96e3ef0567d887c7094ea

ここで見つけた、これに関連していると思われるすべての問題を読みました。正直なところ、SSR webpack / reactアプリに関して何かが足りないのかどうかは100％わかりません。おそらくこれです。実際に動作するはずではないのですか？

カスタムrazzle.config.jsファイルでwebpack構成をconsole.logすると、 webとnodeのcssローダーが異なることがわかります。 mなぜそうなるのか本当にわかりません。 ローカルのcssファイルをインポートすることとnode_modulesからインポートすることの違いが何であるかを理解することはできません...

この問題への明確な答えは大いにありがたいです😕

reset-css /reset.cssを試してください

早速のお返事ありがとうございます。 うん、ちょっとした電球の瞬間、ありがとう。

しかし、これはまだ理想的ではないと考えるのは間違っていますか？ 多くのパッケージは、readmeでこのタイプの情報を公開していないため、サンプルリポジトリが機能することを非常に期待しています。 それ以外の場合は、各パッケージのソースを調べて、必要なさまざまなCSSファイルがどこに保存されているかを確認する必要があります。

すなわち、

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

問題のパッケージは両方とも、それぞれのcssファイルをpackage.json.mainエントリで定義しているので、これらのインポート（cssファイルに直接パスすることなく）が機能することを期待していると思います。

mainはcjsモジュールのパスであるべきだと思います。 スタイルはよくわかりません。 したがって、index.jsにはreset.cssが必要です。

ええ、それは理にかなっています。 しかし、正直なところ、私はまだ混乱しています。 私が挙げた例は、このように機能するパッケージはほとんどありません。 この種のものはいたるところに見られ、他の多くのシステム（next.js、create-react-app、react-static）ではデフォルトですべて機能します。

この問題の核心は、回避策やサードパーティのパッケージに変更を依頼することでは解決されないと思います。 まだ残っている根本的な問題があります。

1. これがサーバーではなくクライアントで機能するのはなぜですか？

これが変更の候補であると思われる場合は、喜んで取り組んでいきます。

あなたが解決策を見つけることができれば私はそれのためにすべてです:)

うんいいね。 これは本当に望ましくない動作であるとほのめかしているようですが、この問題を再度開いて追跡しやすくすることを検討しますか（そして、ここに来る他の人々がそれが本当に問題であることを理解できるようにします）。

問題は、メインフィールドには規則がありますが、実際には常に守られているわけではないということです。

私が思うnodeexternalsを見てください:)

かっこいい、ええ、webpack構成を簡単に見てみると、それが欠けているように見えました。 できるだけ早く遊んでみます

.cssを直接許可するだけなので、node-externalsがこれを引き起こしていると思います。

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

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

開発で修正

それでもエラーが発生する私はrazzlev3.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)

これは、パッケージがサーバー側で外部化されているために発生します。 これを修正する方法を示すために、ドキュメントを更新します。

razzle3.4.2およびドキュメントで修正されました

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

@fivethreeo迅速な対応と解決策をありがとうございました。 かなりうまくいきます!!