Web前端开发资源网Umi v3 升级 Umi v4 遇到一系列问题，整理汇总了一下：
yarn start 报错：
fatal - TypeError: api.modifyBabelOpts is not a function at inspectorPlugin (...\node_modules\react-dev-inspector\plugins\umi\react-inspector.js:18:9) at Service.initPlugin (...\node_modules\umi\node_modules\@umijs\core\dist\service\service.js:346:40) at Service.run (...\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 (...\node_modules\umi\dist\service\service.js:58:12) at async ...\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 (...\node_modules\umi\node_modules\@umijs\core\dist\config\config.js:174:31)
at Config.getConfig (...\node_modules\umi\node_modules\@umijs\core\dist\config\config.js:60:12)
at Service.resolveConfig (...\node_modules\umi\node_modules\@umijs\core\dist\service\service.js:280:97)
at Service.run (...\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 (...\node_modules\umi\dist\service\service.js:58:12)
at async ...\node_modules\umi\dist\cli\forkedDev.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,然后又报错：
fatal - AssertionError [ERR_ASSERTION]: Invalid config values: dva
Invalid value for dva:
"hmr" is not allowed
at Function.validateConfig (...\node_modules\umi\node_modules\@umijs\core\dist\config\config.js:174:31)
at Config.getConfig (...\node_modules\umi\node_modules\@umijs\core\dist\config\config.js:60:12)
at Service.resolveConfig (...\node_modules\umi\node_modules\@umijs\core\dist\service\service.js:280:97)
at Service.run (...\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 (...\node_modules\umi\dist\service\service.js:58:12)
at async ...\node_modules\umi\dist\cli\forkedDev.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: {},
})还会报错：
fatal - AssertionError [ERR_ASSERTION]: Invalid config keys: devServer, dynamicImport, esbuild, nodeModulesTransform, exportStatic, inspectorConfig
at Function.validateConfig (...\node_modules\umi\node_modules\@umijs\core\dist\config\config.js:179:31)
at Config.getConfig (...\node_modules\umi\node_modules\@umijs\core\dist\config\config.js:60:12)
at Service.resolveConfig (...\node_modules\umi\node_modules\@umijs\core\dist\service\service.js:280:97)
at Service.run (...\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 (...\node_modules\umi\dist\service\service.js:58:12)
at async ...\node_modules\umi\dist\cli\forkedDev.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 文件的错误：
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\@umijs\bundler-webpack\compiled\webpack\index.js:47119:11)
at Object.getOptions (...\node_modules\@umijs\bundler-webpack\compiled\webpack\index.js:82998:19)
at Object.loader (...\node_modules\css-loader\dist\index.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\.umi\plugin-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: {}
};这时肯定会报下面的错误：
modules/@umijs/plugins/dist/model.js, plugin from .../node_modules/@umijs/plugins/dist/model.js register failed.
at Service.initPlugin (...\node_modules\@umijs\core\dist\service\service.js:312:31)
at Service.run (...\node_modules\@umijs\core\dist\service\service.js:223:18) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async Service.run2 (...\node_modules\umi\dist\service\service.js:58:12)
at async ...\node_modules\umi\dist\cli\forkedDev.js:24:5 { generatedMessage: false,
code: 'ERR_ASSERTION',
actual: false,
expected: true,
operator: '=='
}使用 @umi/max 的话 不需要加插件配置，只需要加 model: {} ，官方文档也有说明。
嗯，继续报错：
fatal - Error: ENOTEMPTY: directory not empty, rmdir '...\src\.umi\core'
at Object.rmdirSync (node:fs:1167:10)
at rmkidsSync (...\node_modules\@umijs\utils\compiled\rimraf\index.js:1:38989)
at rmdirSync (...\node_modules\@umijs\utils\compiled\rimraf\index.js:1:38827)
at rimrafSync (...\node_modules\@umijs\utils\compiled\rimraf\index.js:1:38448)
at ...\node_modules\@umijs\utils\compiled\rimraf\index.js:1:38909
at Array.forEach (<anonymous>)
at rmkidsSync (...\node_modules\@umijs\utils\compiled\rimraf\index.js:1:38897)
at rmdirSync (...\node_modules\@umijs\utils\compiled\rimraf\index.js:1:38827)
at Function.rimrafSync [as sync] (...\node_modules\@umijs\utils\compiled\rimraf\index.js:1:38448)
at Command.fn (...\node_modules\@umijs\preset-umi\dist\commands\dev\dev.js:68:27) {
errno: -4051,
syscall: 'rmdir',
code: 'ENOTEMPTY',
path: 'D:\\Pansoft\\fmis-apps\\main\\src\\.umi\\core'
}删除 src/.umi 文件夹。
继续报错：
error - AssertionError [ERR_ASSERTION]: filePath not found of umi-request
at Dep.buildExposeContent (...\node_modules\@umijs\mfsu\dist\dep\dep.js:70:31)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async DepBuilder.writeMFFiles (...\node_modules\@umijs\mfsu\dist\depBuilder\depBuilder.js:154:23)
at async DepBuilder.build (...\node_modules\@umijs\mfsu\dist\depBuilder\depBuilder.js:132:7)
at async MFSU.buildDeps (...\node_modules\@umijs\mfsu\dist\mfsu\mfsu.js:200:5) {
generatedMessage: false,
code: 'ERR_ASSERTION',
actual: null,
expected: true,
operator: '=='
}
Error: ENOENT: no such file or directory, open '...\node_modules\.cache\mfsu\mf-va_remoteEntry.js'
at Object.openSync (node:fs:585:3)
at readFileSync (node:fs:453:35)
at ...\node_modules\@umijs\mfsu\dist\mfsu\mfsu.js:225:56
at DepBuilder.onBuildComplete (...\node_modules\@umijs\mfsu\dist\depBuilder\depBuilder.js:147:7)
at ...\node_modules\@umijs\mfsu\dist\mfsu\mfsu.js:219:27
at Layer.handle [as handle_request] (...\node_modules\@umijs\bundler-utils\compiled\express\index.js:171:647)
at trim_prefix (...\node_modules\@umijs\bundler-utils\compiled\express\index.js:164:2659)
at ...\node_modules\@umijs\bundler-utils\compiled\express\index.js:164:2215
at Function.process_params (...\node_modules\@umijs\bundler-utils\compiled\express\index.js:164:2798)
at next (...\node_modules\@umijs\bundler-utils\compiled\express\index.js:164:2115)确认 umi 和相关插件的依赖是否最新，这里我安装一下 umi-presets-pro 就可以了：
yarn add umi-presets-pro -D
可以正常运行了，继续报错：
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：
{
"scripts": {
"build": "umi build",
"build": "max build",
"postinstall": "umi g tmp",
"postinstall": "max setup",
"start": "umi dev",
"start": "max dev",
}
}未经允许不得转载：Web前端开发资源网 » umi3升级umi4报错问题汇总，附解决方法
推荐阅读：
使用flexible后 不同设备的data-dpr还始终为1解决方法
PHP连接MySQL数据库报错：Call to undefined function mysql_connect()的解决方法
umi开启mfsu和webpack5报错：does not exist in container. while loading