Microsoft の aspnetcore-spa ジェネレーターを使用して React+Redux で新しい ASP.NET Core SPA を生成し、ant-design とbabel-plugin-importで使用しようとしましたが、初回はページが正常にレンダリングされますが、更新すると、dotnet アプリケーションを再起動した後でも、毎回次のエラーがスローされます。
リクエストの処理中に未処理の例外が発生しました。
例外: Node モジュールの呼び出しが次のエラーで失敗しました: エラーが原因で事前レンダリングに失敗しました: エラー: モジュール "../../style/index.css" が webpackMissingModule (C:\Users\viccrubs\Documents\Projects\QuestionSample1\) で見つかりませんClientApp\dist\main-server.js:595:66) オブジェクトで。(C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main-server.js:595:164) webpack_require (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main- server.js:20:30) オブジェクトで。(C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main-server.js:387:13) webpack_requireで (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main-server.js:20:30) Object.defineProperty.value (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\) dist\main-server.js:168:14) のwebpack_require (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main-server.js:20:30) オブジェクト。(C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main-server.js:65:16) webpack_requireで (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main-server.js:20:30) Object.defineProperty.value (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\) dist\main-server.js:40:18) 現在のディレクトリ: C:\Users\viccrubs\Documents\Projects\QuestionSample1 Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance+d__7.MoveNext()
このバベル プラグインは、純粋な react+webpack+typescript プロジェクトでうまく機能します。babel-plugin-import を使用せずに antd からコンポーネントを手動でインポートすると、同じエラーが発生します。間違った作業ディレクトリの問題のようで、../../style/index.cssantd コンポーネントを含むディレクトリの下に存在しますが、webpack によって処理されているはずです。また、最初のレンダリングがうまく機能するのも奇妙です。
サンプル: https://github.com/viccrubs/QuestionSample1
または、次のようにして再現します。
- その yeoman ジェネレーターを使用して、React+Redux プロジェクトで ASP.NET Core を生成します。
- npm install --save antd babel-plugin-import
ThunkAction/ClientApp/store の下のファイルからすべてのインポートを削除します"plugins":[["import", { "libraryName": "antd", "style": "css" }]].babelrcに追加- Home.tsx に任意の antd コンポーネントを追加します。
"allowSyntheticDefaultImports": true,tsconfig.jsonに追加します- dotnet を実行して localhost:5000 を開きます
- 最初のレンダリングではエラーが発生しないはずですが、更新すると上記のエラーが表示されます。