腾讯云

文章/答案/技术大牛

发布

社区首页 >专栏 >umi3升级umi4报错问题汇总，附解决方法

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

德顺

发布于 2023-08-25 05:29:32

4.3K00

代码可运行

文章被收录于专栏：前端资源前端资源

运行总次数：0

代码可运行

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",
  }
}