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

2022-10-05 16:43:42 浏览数 (1)

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

yarn start 报错：

代码语言：javascript复制
fatal - TypeError: api.modifyBabelOpts is not a function
    at inspectorPlugin (D:Pansoftfmis-appsmainnode_modulesreact-dev-inspectorpluginsumireact-inspector.js:18:9)
    at Service.initPlugin (D:Pansoftfmis-appsmainnode_modulesuminode_modules@umijscoredistserviceservice.js:346:40)
    at Service.run (D:Pansoftfmis-appsmainnode_modulesuminode_modules@umijscoredistserviceservice.js:223:18)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Service.run2 (D:Pansoftfmis-appsmainnode_modulesumidistserviceservice.js:58:12)
    at async D:Pansoftfmis-appsmainnode_modulesumidistcliforkedDev.js:24:5

解决方法：

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

代码语言：javascript复制
-  "react-dev-inspector": "^1.7.0",

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

代码语言：javascript复制
   plugins: [
     // https://github.com/zthxxx/react-dev-inspector
-    'react-dev-inspector/plugins/umi/react-inspector',
     // 'react-dev-inspector/plugins/umi/react-inspector',
   ],

然后又报新的错误：

代码语言：javascript复制
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:Pansoftfmis-appsmainnode_modulesuminode_modules@umijscoredistconfigconfig.js:174:31)
    at Config.getConfig (D:Pansoftfmis-appsmainnode_modulesuminode_modules@umijscoredistconfigconfig.js:60:12)
    at Service.resolveConfig (D:Pansoftfmis-appsmainnode_modulesuminode_modules@umijscoredistserviceservice.js:280:97)
    at Service.run (D:Pansoftfmis-appsmainnode_modulesuminode_modules@umijscoredistserviceservice.js:237:50)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Service.run2 (D:Pansoftfmis-appsmainnode_modulesumidistserviceservice.js:58:12)
    at async D:Pansoftfmis-appsmainnode_modulesumidistcliforkedDev.js:24:5 {    
  generatedMessage: false,
  code: 'ERR_ASSERTION',
  actual: false,
  expected: true,
  operator: '=='
}

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

代码语言：javascript复制
-  fastRefresh: {},
   fastRefresh: true,

然后又报错：

代码语言：javascript复制
fatal - AssertionError [ERR_ASSERTION]: Invalid config values: dva
Invalid value for dva:
"hmr" is not allowed
    at Function.validateConfig (D:Pansoftfmis-appsmainnode_modulesuminode_modules@umijscoredistconfigconfig.js:174:31)
    at Config.getConfig (D:Pansoftfmis-appsmainnode_modulesuminode_modules@umijscoredistconfigconfig.js:60:12)
    at Service.resolveConfig (D:Pansoftfmis-appsmainnode_modulesuminode_modules@umijscoredistserviceservice.js:280:97)
    at Service.run (D:Pansoftfmis-appsmainnode_modulesuminode_modules@umijscoredistserviceservice.js:237:50)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Service.run2 (D:Pansoftfmis-appsmainnode_modulesumidistserviceservice.js:58:12)        
    at async D:Pansoftfmis-appsmainnode_modulesumidistcliforkedDev.js:24:5 {
  generatedMessage: false,
  code: 'ERR_ASSERTION',
  actual: false,
  expected: true,
  operator: '=='
}

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

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

代码语言：javascript复制
import { defineConfig, utils } from 'umi';
 
export default defineConfig({
-  fastRefresh: {},
   fastRefresh: true,
  dva: {
   // 不再支持 hmr 这个参数
-    hmr: true,
   },
// 默认 webpack5
-   webpack5: {},
})

还会报错：

代码语言：javascript复制
fatal - AssertionError [ERR_ASSERTION]: Invalid config keys: devServer, dynamicImport, esbuild, nodeModulesTransform, exportStatic, inspectorConfig
    at Function.validateConfig (D:Pansoftfmis-appsmainnode_modulesuminode_modules@umijscoredistconfigconfig.js:179:31)
    at Config.getConfig (D:Pansoftfmis-appsmainnode_modulesuminode_modules@umijscoredistconfigconfig.js:60:12)
    at Service.resolveConfig (D:Pansoftfmis-appsmainnode_modulesuminode_modules@umijscoredistserviceservice.js:280:97)
    at Service.run (D:Pansoftfmis-appsmainnode_modulesuminode_modules@umijscoredistserviceservice.js:237:50)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Service.run2 (D:Pansoftfmis-appsmainnode_modulesumidistserviceservice.js:58:12)        
    at async D:Pansoftfmis-appsmainnode_modulesumidistcliforkedDev.js:24:5 {
  generatedMessage: false,
  code: 'ERR_ASSERTION',
  actual: false,
  expected: true,
  operator: '=='
}

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

代码语言：javascript复制
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：

代码语言：javascript复制
{
  "scripts": {
    "build": "umi build",
    "build": "max build",
    "postinstall": "umi g tmp",
    "postinstall": "max setup",
    "start": "umi dev",
    "start": "max dev",
  }
}

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

typescript yarn node.js javascript

0 人点赞