umi3升级umi4报错问题汇总，附解决方法

德顺

发布于 2022-10-05 16:43:42

8K0

发布于 2022-10-05 16:43:42

Umi v3 升级 Umi v4 遇到一系列问题，整理汇总了一下：

yarn start 报错：

fatal - TypeError: api.modifyBabelOpts is not a function
    at inspectorPlugin (D:\Pansoft\fmis-apps\main\node_modules\react-dev-inspector\plugins\umi\react-inspector.js:18:9)
    at Service.initPlugin (D:\Pansoft\fmis-apps\main\node_modules\umi\node_modules\@umijs\core\dist\service\service.js:346:40)
    at Service.run (D:\Pansoft\fmis-apps\main\node_modules\umi\node_modules\@umijs\core\dist\service\service.js:223:18)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Service.run2 (D:\Pansoft\fmis-apps\main\node_modules\umi\dist\service\service.js:58:12)
    at async D:\Pansoft\fmis-apps\main\node_modules\umi\dist\cli\forkedDev.js:24:5

解决方法：

删除 package.json 中的 react-dev-inspector ，从新 yarn 一下：

-  "react-dev-inspector": "^1.7.0",

并且要删除配置文件中的相应的插件。

   plugins: [
     // https://github.com/zthxxx/react-dev-inspector
-    'react-dev-inspector/plugins/umi/react-inspector',
+    // 'react-dev-inspector/plugins/umi/react-inspector',
   ],

然后又报新的错误：

fatal - AssertionError [ERR_ASSERTION]: Invalid config values: fastRefresh, dva
Invalid value for fastRefresh:
"value" must be a boolean,Invalid value for dva:
"hmr" is not allowed
    at Function.validateConfig (D:\Pansoft\fmis-apps\main\node_modules\umi\node_modules\@umijs\core\dist\config\config.js:174:31)
    at Config.getConfig (D:\Pansoft\fmis-apps\main\node_modules\umi\node_modules\@umijs\core\dist\config\config.js:60:12)
    at Service.resolveConfig (D:\Pansoft\fmis-apps\main\node_modules\umi\node_modules\@umijs\core\dist\service\service.js:280:97)
    at Service.run (D:\Pansoft\fmis-apps\main\node_modules\umi\node_modules\@umijs\core\dist\service\service.js:237:50)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Service.run2 (D:\Pansoft\fmis-apps\main\node_modules\umi\dist\service\service.js:58:12)
    at async D:\Pansoft\fmis-apps\main\node_modules\umi\dist\cli\forkedDev.js:24:5 {    
  generatedMessage: false,
  code: 'ERR_ASSERTION',
  actual: false,
  expected: true,
  operator: '=='
}

fastRefresh 配置，[email protected] 必须是 boolean，[email protected] 需要是 object 。/config/config.ts：

-  fastRefresh: {},
+  fastRefresh: true,

然后又报错：

fatal - AssertionError [ERR_ASSERTION]: Invalid config values: dva
Invalid value for dva:
"hmr" is not allowed
    at Function.validateConfig (D:\Pansoft\fmis-apps\main\node_modules\umi\node_modules\@umijs\core\dist\config\config.js:174:31)
    at Config.getConfig (D:\Pansoft\fmis-apps\main\node_modules\umi\node_modules\@umijs\core\dist\config\config.js:60:12)
    at Service.resolveConfig (D:\Pansoft\fmis-apps\main\node_modules\umi\node_modules\@umijs\core\dist\service\service.js:280:97)
    at Service.run (D:\Pansoft\fmis-apps\main\node_modules\umi\node_modules\@umijs\core\dist\service\service.js:237:50)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Service.run2 (D:\Pansoft\fmis-apps\main\node_modules\umi\dist\service\service.js:58:12)        
    at async D:\Pansoft\fmis-apps\main\node_modules\umi\dist\cli\forkedDev.js:24:5 {
  generatedMessage: false,
  code: 'ERR_ASSERTION',
  actual: false,
  expected: true,
  operator: '=='
}

其实仔细阅读官方文档可以规避上面两个问题：

[email protected] 不再支持 hmr 参数，存在的差异项如下 /config/config.ts ：

import { defineConfig, utils } from 'umi';
 
export default defineConfig({
-  fastRefresh: {},
+  fastRefresh: true,
  dva: {
   // 不再支持 hmr 这个参数
-    hmr: true,
   },
// 默认 webpack5
-   webpack5: {},
})

还会报错：

fatal - AssertionError [ERR_ASSERTION]: Invalid config keys: devServer, dynamicImport, esbuild, nodeModulesTransform, exportStatic, inspectorConfig
    at Function.validateConfig (D:\Pansoft\fmis-apps\main\node_modules\umi\node_modules\@umijs\core\dist\config\config.js:179:31)
    at Config.getConfig (D:\Pansoft\fmis-apps\main\node_modules\umi\node_modules\@umijs\core\dist\config\config.js:60:12)
    at Service.resolveConfig (D:\Pansoft\fmis-apps\main\node_modules\umi\node_modules\@umijs\core\dist\service\service.js:280:97)
    at Service.run (D:\Pansoft\fmis-apps\main\node_modules\umi\node_modules\@umijs\core\dist\service\service.js:237:50)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Service.run2 (D:\Pansoft\fmis-apps\main\node_modules\umi\dist\service\service.js:58:12)        
    at async D:\Pansoft\fmis-apps\main\node_modules\umi\dist\cli\forkedDev.js:24:5 {
  generatedMessage: false,
  code: 'ERR_ASSERTION',
  actual: false,
  expected: true,
  operator: '=='
}

这个的意思是说，有一些无效配置，在 [email protected] 中已经被剔除或者是默认开启，不需再配置了，我直接把 /config/config.dev.ts 文件删掉了，然后把 /config/config.ts 中的这些配置项删掉。

export default defineConfig({
-  devServer: {
-    headers: {
-      'Access-Control-Allow-Origin': '*',
-    },
-  },
-  dva: {
-    hmr: true,
-  },
-  dynamicImport: {
-    loading: '@ant-design/pro-layout/es/PageLoading',
-  },
-  esbuild: {},
-  nodeModulesTransform: { type: 'none' },
-  exportStatic: {},
});

启动命令：

如果使用了 @umijs/max 可以使用 max 命令来替换 umi，max dev，max build 等。

[email protected] 将一些项目前置操作放到了 setup 命令中，如 [email protected] 中的 umi g tmp 等命令，需要使用 max setup 替换。

package.json：

{
  "scripts": {
    "build": "umi build",
    "build": "max build",
    "postinstall": "umi g tmp",
    "postinstall": "max setup",
    "start": "umi dev",
    "start": "max dev",
  }
}

未经允许不得转载：w3h5 » umi3升级umi4报错问题汇总，附解决方法

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

typescript