ASP.NET Core SPA服务器渲染无法使用react + redux + ant-design + babel-plugin-import

时间:2017-01-28 16:02:36

标签: typescript asp.net-core react-redux server-rendering antd

我使用来自Microsoft的aspnetcore-spa生成器使用React + Redux生成了一个新的ASP.NET Core SPA,并尝试将其与ant-design和babel-plugin-import一起使用,并且首次使用该页面成功渲染,但一旦刷新,它每次都会抛出以下错误,即使在重新启动dotnet应用程序之后也是如此。

  

处理请求时发生未处理的异常。

     

异常:调用节点模块失败并显示错误:预渲染失败   因为错误:错误:无法找到模块“../../style/index.css”   webpackMissingModule   (C:\用户\ viccrubs \文件\项目\ QuestionSample1 \ ClientApp \ DIST \主server.js:595:66)   在对象。   (C:\用户\ viccrubs \文件\项目\ QuestionSample1 \ ClientApp \ DIST \主server.js:595:164)   在 webpack_require   (C:\用户\ viccrubs \文件\项目\ QuestionSample1 \ ClientApp \ DIST \主server.js:20:30)   在对象。   (C:\用户\ viccrubs \文件\项目\ QuestionSample1 \ ClientApp \ DIST \主server.js:387:13)   在 webpack_require   (C:\用户\ viccrubs \文件\项目\ QuestionSample1 \ ClientApp \ DIST \主server.js:20:30)   在Object.defineProperty.value   (C:\用户\ viccrubs \文件\项目\ QuestionSample1 \ ClientApp \ DIST \主server.js:168:14)   在 webpack_require   (C:\用户\ viccrubs \文件\项目\ QuestionSample1 \ ClientApp \ DIST \主server.js:20:30)   在对象。   (C:\用户\ viccrubs \文件\项目\ QuestionSample1 \ ClientApp \ DIST \主server.js:65:16)   在 webpack_require   (C:\用户\ viccrubs \文件\项目\ QuestionSample1 \ ClientApp \ DIST \主server.js:20:30)   在Object.defineProperty.value   (C:\用户\ viccrubs \文件\项目\ QuestionSample1 \ ClientApp \ DIST \主server.js:40:18)   目前的目录是:   C:\ Users \用户viccrubs \文件\项目\ QuestionSample1   Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance + d__7.MoveNext()

这个babel插件在纯粹的react + webpack + typescript项目中运行良好。 在没有babel-plugin-import帮助的情况下从antd手动导入组件也会导致相同的错误。 它看起来像是一个错误的工作目录问题,../../style/index.css确实存在于包含antd组件的目录下,但它应该由webpack处理。 第一次渲染效果很好也很奇怪。

样品: https://github.com/viccrubs/QuestionSample1

或执行以下操作以重现它:

  1. 使用具有该yeoman生成器的React + Redux项目生成ASP.NET Core
  2. npm install --save antd babel-plugin-import
  3. 从/ ClientApp / store
  4. 下的文件中删除所有ThunkAction导入
  5. 在.babelrc
  6. 中添加"plugins":[["import", { "libraryName": "antd", "style": "css" }]]
  7. 在Home.tsx
  8. 中添加任何antd组件
  9. 在tsconfig.json
  10. 中添加"allowSyntheticDefaultImports": true,
  11. dotnet运行并打开localhost:5000
  12. 应该是第一个渲染不会导致错误,但一旦刷新,上面的错误就会显示出来。

0 个答案:

没有答案