版本

node：v14.16.1
npm：v8.2.0
react: v17.0.1
umi：v3.5.0
antd：v4.17.3

1. Umi项目安装react-devtools之后项目启动后报错TypeError: Cannot read property ‘forEach’ of undefined。

有3种解决方案：

  1. 禁用react-devtools；
  2. 根据报错找到报错文件的代码注释掉，例如：my-app\node_modules\umi\node_modules\@umijs\preset-built-in\bundled\@pmmmwh\react-refresh-webpack-plugin\client\ReactRefreshEntry.js

1638435076(1).png

  1. 低版本的React-DevTools会引发react-refresh-webpack-plugin报错，升级版本。

issue传送门：https://github.com/umijs/umi/issues/6432

2. Umi项目使用Formily表单样式失效问题。

7a2e7ddd9bc4e9c69c218fe575aeebb.png
Ant-design-pro@4.0、umi@^3.5.0、formily@2.x出现表单样式问题，之前怀疑是开了MFSU导致的bug，后来发现不是，解决方案：在配置文件中加@formily/antd按需加载，+72~78行。
/config.ts

  1. import { defineConfig } from 'umi';
  2. import { join } from 'path';
  4. import defaultSettings from './defaultSettings';
  5. import proxy from './proxy';
  6. import routes from './routes';
  8. const { REACT_APP_ENV } = process.env;
  10. export default defineConfig({
  11.   hash: true,
  12.   antd: {},
  13.   dva: {
  14.     hmr: true,
  15.   },
  16.   layout: {
  17.     // https://umijs.org/zh-CN/plugins/plugin-layout
  18.     locale: true, // 关闭国际化语言
  19.     siderWidth: 208,
  20.     ...defaultSettings,
  21.   },
  22.   // https://umijs.org/zh-CN/plugins/plugin-locale
  23.   locale: {
  24.     // default zh-CN
  25.     default: 'zh-CN',
  26.     antd: true,
  27.     // default true, when it is true, will use `navigator.language` overwrite default
  28.     baseNavigator: true,
  29.   },
  30.   dynamicImport: {
  31.     loading: '@ant-design/pro-layout/es/PageLoading',
  32.   },
  33.   targets: {
  34.     ie: 11,
  35.   },
  36.   // umi routes: https://umijs.org/docs/routing
  37.   routes,
  38.   // Theme for antd: https://ant.design/docs/react/customize-theme-cn
  39.   theme: {
  40.     'primary-color': defaultSettings.primaryColor,
  41.     'root-entry-name': 'default',
  42.   },
  43.   // esbuild is father build tools
  44.   // https://umijs.org/plugins/plugin-esbuild
  45.   esbuild: {},
  46.   title: false,
  47.   ignoreMomentLocale: true,
  48.   proxy: proxy[REACT_APP_ENV || 'dev'],
  49.   manifest: {
  50.     basePath: '/',
  51.   },
  52.   // Fast Refresh 热更新
  53.   fastRefresh: {},
  54.   openAPI: [
  55.     {
  56.       requestLibPath: "import { request } from 'umi'",
  57.       // 或者使用在线的版本
  58.       // schemaPath: "https://gw.alipayobjects.com/os/antfincdn/M%24jrzTTYJN/oneapi.json"
  59.       schemaPath: join(__dirname, 'oneapi.json'),
  60.       mock: false,
  61.     },
  62.     {
  63.       requestLibPath: "import { request } from 'umi'",
  64.       schemaPath: 'https://gw.alipayobjects.com/os/antfincdn/CA1dOm%2631B/openapi.json',
  65.       projectName: 'swagger',
  66.     },
  67.   ],
  68.   nodeModulesTransform: { type: 'none' },
  69.   mfsu: {},
  70.   webpack5: {},
  71.   exportStatic: {},
  72.   extraBabelPlugins: [
  73.     [
  74.       'babel-plugin-import',
  75.       { libraryName: '@formily/antd', libraryDirectory: 'esm', style: true },
  76.       '@formily/antd',
  77.     ],
  78.   ],
  79. });

3.项目启动中出现警告require()

原因：@umijs/preset-ui文件/依赖中有用动态 require 语法，开启MFSU之后建议使用esm module import，否则将打破mfsu预构建匹配，出现如下图警告。
image.png
解决：目前测出是使用了umi-ui导致的把@umijs/preset-ui”: “^2.2.9卸载就可以解决（同时编译速度会提高10s左右），但是卸载就无法使用umi-ui，暂时保留容忍了。
参考：https://github.com/umijs/umi/issues/6766