Umi v3 升级 Umi v4 遇到一系列问题，整理汇总了一下：
yarn start 报错：
代码语言：javascript复制fatal - TypeError: api.modifyBabelOpts is not a function
at inspectorPlugin (...node_modulesreact-dev-inspectorpluginsumireact-inspector.js:18:9)
at Service.initPlugin (...node_modulesuminode_modules@umijscoredistserviceservice.js:346:40)
at Service.run (...node_modulesuminode_modules@umijscoredistserviceservice.js:223:18)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Service.run2 (...node_modulesumidistserviceservice.js:58:12)
at async ...node_modulesumidistcliforkedDev.js:24:5解决方法：
删除 package.json 中的 react-dev-inspector ，从新 yarn 一下：
- "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 (...node_modulesuminode_modules@umijscoredistconfigconfig.js:174:31)
at Config.getConfig (...node_modulesuminode_modules@umijscoredistconfigconfig.js:60:12)
at Service.resolveConfig (...node_modulesuminode_modules@umijscoredistserviceservice.js:280:97)
at Service.run (...node_modulesuminode_modules@umijscoredistserviceservice.js:237:50)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Service.run2 (...node_modulesumidistserviceservice.js:58:12)
at async ...node_modulesumidistcliforkedDev.js:24:5 {
generatedMessage: false,
code: 'ERR_ASSERTION',
actual: false,
expected: true,
operator: '=='
}fastRefresh 配置，umi@4 必须是 boolean，umi@3 需要是 object 。/config/config.ts：
- fastRefresh: {},
fastRefresh: true,然后又报错：
代码语言：javascript复制fatal - AssertionError [ERR_ASSERTION]: Invalid config values: dva
Invalid value for dva:
"hmr" is not allowed
at Function.validateConfig (...node_modulesuminode_modules@umijscoredistconfigconfig.js:174:31)
at Config.getConfig (...node_modulesuminode_modules@umijscoredistconfigconfig.js:60:12)
at Service.resolveConfig (...node_modulesuminode_modules@umijscoredistserviceservice.js:280:97)
at Service.run (...node_modulesuminode_modules@umijscoredistserviceservice.js:237:50)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Service.run2 (...node_modulesumidistserviceservice.js:58:12)
at async ...node_modulesumidistcliforkedDev.js:24:5 {
generatedMessage: false,
code: 'ERR_ASSERTION',
actual: false,
expected: true,
operator: '=='
}其实仔细阅读官方文档可以规避上面两个问题：
umi@4 不再支持 hmr 参数，存在的差异项如下 /config/config.ts ：
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 (...node_modulesuminode_modules@umijscoredistconfigconfig.js:179:31)
at Config.getConfig (...node_modulesuminode_modules@umijscoredistconfigconfig.js:60:12)
at Service.resolveConfig (...node_modulesuminode_modules@umijscoredistserviceservice.js:280:97)
at Service.run (...node_modulesuminode_modules@umijscoredistserviceservice.js:237:50)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Service.run2 (...node_modulesumidistserviceservice.js:58:12)
at async ...node_modulesumidistcliforkedDev.js:24:5 {
generatedMessage: false,
code: 'ERR_ASSERTION',
actual: false,
expected: true,
operator: '=='
}这个的意思是说，有一些无效配置，在 umi@4 中已经被剔除或者是默认开启，不需再配置了，我直接把 /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: {},
});然后报了一堆 less 文件的错误：
代码语言：javascript复制error - ./src/global.less.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].oneOf[1].use[1]!./node_modules/@umijs/bundler-webpack/compiled/postcss-loader/index.js??ruleSet[1].rules[5].oneOf[1].use[2]!./node_modules/@umijs/bundler-webpack/compiled/less-loader/index.js??ruleSet[1].rules[5].oneOf[1].use[3]!./src/global.less
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'localsConvention'. These properties are valid:
object { url?, import?, modules?, sourceMap?, importLoaders?, esModule?, exportType? }
at validate (...node_modules@umijsbundler-webpackcompiledwebpackindex.js:47119:11)
at Object.getOptions (...node_modules@umijsbundler-webpackcompiledwebpackindex.js:82998:19)
at Object.loader (...node_modulescss-loaderdistindex.js:31:27)这里还需要把 cssLoader 属性删掉 /config/config.ts ：
- cssLoader: {
- localsConvention: 'camelCase',
- },还可能会报 @umijs/plugin-access 的错误：
error - ./src/.umi/plugin-access/runtime.tsx:11:0-43
Module not found: Error: Can't resolve '@@/plugin-model' in '...src.umiplugin-access'安装 @umijs/plugin-access ：
# npm
npm install @umijs/plugin-access --save
# or yarn
yarn add @umijs/plugin-access不过这里的根源应该不是确实依赖，根据报错信息，找到 src/.umi/plugin-access/runtime.tsx 文件，可以看到引入了 @@/plugin-model ：
我费了半天劲，在 github umi 仓库找到一个 issue ：umi4，qiankun没有导出useModel
使用 useModel 要使用 @umijs/max 或者加载 model 插件：
yarn add @umijs/plugins/config/config.ts ：
export default {
plugins: [
'@umijs/plugins/dist/model'
],
model: {}
};这时肯定会报下面的错误：
代码语言：javascript复制modules/@umijs/plugins/dist/model.js, plugin from .../node_modules/@umijs/plugins/dist/model.js register failed.
at Service.initPlugin (...node_modules@umijscoredistserviceservice.js:312:31)
at Service.run (...node_modules@umijscoredistserviceservice.js:223:18) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async Service.run2 (...node_modulesumidistserviceservice.js:58:12)
at async ...node_modulesumidistcliforkedDev.js:24:5 { generatedMessage: false,
code: 'ERR_ASSERTION',
actual: false,
expected: true,
operator: '=='
}使用 @umi/max 的话 不需要加插件配置，只需要加 model: {} ，官方文档也有说明。
嗯，继续报错：
代码语言：javascript复制fatal - Error: ENOTEMPTY: directory not empty, rmdir '...src.umicore'
at Object.rmdirSync (node:fs:1167:10)
at rmkidsSync (...node_modules@umijsutilscompiledrimrafindex.js:1:38989)
at rmdirSync (...node_modules@umijsutilscompiledrimrafindex.js:1:38827)
at rimrafSync (...node_modules@umijsutilscompiledrimrafindex.js:1:38448)
at ...node_modules@umijsutilscompiledrimrafindex.js:1:38909
at Array.forEach (<anonymous>)
at rmkidsSync (...node_modules@umijsutilscompiledrimrafindex.js:1:38897)
at rmdirSync (...node_modules@umijsutilscompiledrimrafindex.js:1:38827)
at Function.rimrafSync [as sync] (...node_modules@umijsutilscompiledrimrafindex.js:1:38448)
at Command.fn (...node_modules@umijspreset-umidistcommandsdevdev.js:68:27) {
errno: -4051,
syscall: 'rmdir',
code: 'ENOTEMPTY',
path: 'D:\Pansoft\fmis-apps\main\src\.umi\core'
}删除 src/.umi 文件夹。
继续报错：
代码语言：javascript复制error - AssertionError [ERR_ASSERTION]: filePath not found of umi-request
at Dep.buildExposeContent (...node_modules@umijsmfsudistdepdep.js:70:31)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async DepBuilder.writeMFFiles (...node_modules@umijsmfsudistdepBuilderdepBuilder.js:154:23)
at async DepBuilder.build (...node_modules@umijsmfsudistdepBuilderdepBuilder.js:132:7)
at async MFSU.buildDeps (...node_modules@umijsmfsudistmfsumfsu.js:200:5) {
generatedMessage: false,
code: 'ERR_ASSERTION',
actual: null,
expected: true,
operator: '=='
}
Error: ENOENT: no such file or directory, open '...node_modules.cachemfsumf-va_remoteEntry.js'
at Object.openSync (node:fs:585:3)
at readFileSync (node:fs:453:35)
at ...node_modules@umijsmfsudistmfsumfsu.js:225:56
at DepBuilder.onBuildComplete (...node_modules@umijsmfsudistdepBuilderdepBuilder.js:147:7)
at ...node_modules@umijsmfsudistmfsumfsu.js:219:27
at Layer.handle [as handle_request] (...node_modules@umijsbundler-utilscompiledexpressindex.js:171:647)
at trim_prefix (...node_modules@umijsbundler-utilscompiledexpressindex.js:164:2659)
at ...node_modules@umijsbundler-utilscompiledexpressindex.js:164:2215
at Function.process_params (...node_modules@umijsbundler-utilscompiledexpressindex.js:164:2798)
at next (...node_modules@umijsbundler-utilscompiledexpressindex.js:164:2115)确认 umi 和相关插件的依赖是否最新，这里我安装一下 umi-presets-pro 就可以了：
yarn add umi-presets-pro -D可以正常运行了，继续报错：
代码语言：javascript复制Unhandled Rejection (Error): register failed, invalid key initialStateConfig from plugin .../src/app.tsx.这里需要在配置里面启用一下 initialState ， /config/config.ts ：
export default defineConfig({
hash: true,
model: {},
request: {},
initialState: {},
antd: {},
...
})还会报错的话，检查一下 src/app.tsx ，将 initialStateConfig 删除：
- /** 获取用户信息比较慢的时候会展示一个 loading */
- export const initialStateConfig = {
- loading: <PageLoading />,
- };写在 /config/config.ts 里面：
- initialState: {},
initialState: {
loading: 'src/components/PageLoading',
},启动命令：
如果使用了 @umijs/max 可以使用 max 命令来替换 umi，max dev，max build 等。
umi@4 将一些项目前置操作放到了 setup 命令中，如 umi@3 中的 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-Web前端开发资源网 » umi3升级umi4报错问题汇总，附解决方法
