ASP.NET Core SPA server rendering not working with react+redux+ant-design+babel-plugin-import

Question

I generated a new ASP.NET Core SPA with React+Redux using the aspnetcore-spa generator from Microsoft and tried to use it with ant-design and babel-plugin-import, and the first time the page will be rendered successfully, but once refreshing, it will throw the following error every time, even after restarting the dotnet application.

An unhandled exception occurred while processing the request.

Exception: Call to Node module failed with error: Prerendering failed because of error: Error: Cannot find module "../../style/index.css" at webpackMissingModule (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main-server.js:595:66) at Object. (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main-server.js:595:164) at webpack_require (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main-server.js:20:30) at Object. (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main-server.js:387:13) at webpack_require (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main-server.js:20:30) at Object.defineProperty.value (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main-server.js:168:14) at webpack_require (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main-server.js:20:30) at Object. (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main-server.js:65:16) at webpack_require (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main-server.js:20:30) at Object.defineProperty.value (C:\Users\viccrubs\Documents\Projects\QuestionSample1\ClientApp\dist\main-server.js:40:18) Current directory is: C:\Users\viccrubs\Documents\Projects\QuestionSample1 Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance+d__7.MoveNext()

This babel plugin works well in a pure react+webpack+typescript project. Manually importing a component from antd without the help of babel-plugin-import will also result in the same error. It looks like an issue of wrong working directory, and the ../../style/index.css does exist under the directory containing antd components, but it should have been processed by webpack. And it's also strange that the first render works fine.

Sample: https://github.com/viccrubs/QuestionSample1

or do the following to reproduce it:

1. Generate an ASP.NET Core with React+Redux project with that yeoman generator
2. npm install --save antd babel-plugin-import
3. Delete all the ThunkAction import from the files under /ClientApp/store
4. Add "plugins":[["import", { "libraryName": "antd", "style": "css" }]] in .babelrc
5. Add any antd component in the Home.tsx
6. Add "allowSyntheticDefaultImports": true, in the tsconfig.json
7. dotnet run and open localhost:5000
8. It should be that the first render will cause no error, but once refreshing, the error above will show up.