项目场景:

最近在开发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的新特性,让热更新更加快速。在大佬的帮助下,总结了几种解决方案。

  1. 直接注释掉mfsu:{},取消mfsu特性。【不推荐】
    在这里插入图片描述
    缺点就是,热更新变慢,而且因为是umi新版本,所以会在你打包的时候提示你热更新有点慢。
    在这里插入图片描述
  2. 删除掉src目录下的.umi文件夹,再重新进行npm start。应该是umi里面存缓文件的问题,删除后再重新打包,会重新启动MFSU。【推荐】
    在这里插入图片描述

问题二:

  1. 删除.umi缓存,然后重新启动,这个是 mfsu 没有自动编译导致的。
    在这里插入图片描述
  2. cross-env问题
    在这里插入图片描述
  3. 直接关闭mfsc,简单粗暴。
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐