项目场景:
最近在开发react项目,在npm start启动项目的时候,突然报了一堆错误。最后发现是,umi3.5的新特性 mfsu导致的。
问题描述:
1. 开启MFSC错误
⏱️ MFSU Enabled
Unexpected token in JSON at position 0, try to remove cache file and retry.
Error: Unexpected token in JSON at position 0, try to remove cache file and retry.
at DepInfo.loadCache (D:\前端学习\AntDesignPro\grafana-react\node_modules\umi\node_modules\@umijs\preset-built-in\lib\plugins\features\mfsu\DepInfo.js:129:13)
at Object.<anonymous> (D:\前端学习\AntDesignPro\grafana-react\node_modules\umi\node_modules\@umijs\preset-built-in\lib\plugins\features\mfsu\mfsu.js:229:15)
at Generator.next (<anonymous>)
at asyncGeneratorStep (D:\前端学习\AntDesignPro\grafana-react\node_modules\umi\node_modules\@umijs\preset-built-in\lib\plugins\features\mfsu\mfsu.js:113:103)
at _next (D:\前端学习\AntDesignPro\grafana-react\node_modules\umi\node_modules\@umijs\preset-built-in\lib\plugins\features\mfsu\mfsu.js:115:194)
at D:\前端学习\AntDesignPro\grafana-react\node_modules\umi\node_modules\@umijs\preset-built-in\lib\plugins\features\mfsu\mfsu.js:115:364
at new Promise (<anonymous>)
at Object.<anonymous> (D:\前端学习\AntDesignPro\grafana-react\node_modules\umi\node_modules\@umijs\preset-built-in\lib\plugins\features\mfsu\mfsu.js:115:97)
at Object.fn (D:\前端学习\AntDesignPro\grafana-react\node_modules\umi\node_modules\@umijs\preset-built-in\lib\plugins\features\mfsu\mfsu.js:238:19)
at D:\前端学习\AntDesignPro\grafana-react\node_modules\@umijs\core\lib\Service\Service.js:623:28
2. 加载组件失败错误
[@umijs/runtime] load component failed Error: Module "./antd/es/select/style" does not exist in container. while loading "./antd/es/select/style" from webpack/container/reference/mf
这个错误可太难找了,按官网的mfsc的说明,它的作用主要是应用在预编译阶段而非运行时编译。从而带来了一个新问题,如果使用的组件不在之前的构建范围内,就会即刻报错。
umi官网:开启 mfsu 可以大幅减少热更新所需的时间。在生产模式,也可以通过提前编译依赖,大幅提升部署效率。
解决方案:
问题一:
在config.ts中可以找到mfsu:{}
选项,umi3.5的新特性,让热更新更加快速。在大佬的帮助下,总结了几种解决方案。
- 直接注释掉
mfsu:{}
,取消mfsu特性。【不推荐】
缺点就是,热更新变慢,而且因为是umi新版本,所以会在你打包的时候提示你热更新有点慢。
- 删除掉
src
目录下的.umi
文件夹,再重新进行npm start
。应该是umi里面存缓文件的问题,删除后再重新打包,会重新启动MFSU。【推荐】
问题二:
- 删除.umi缓存,然后重新启动,这个是 mfsu 没有自动编译导致的。
- cross-env问题
- 直接关闭mfsc,简单粗暴。