React throw error after upgrade from umi3 to umi4 (looking for help)

[maidangzhu]

命令行看起来是正常的，但是控制台报了很多react相关的错误，请问与我的配置或者版本有关系吗？

config file:

import { defineConfig } from "umi";
import router from "./router";
const path = require("path");

export default defineConfig({
  // dynamicImport: {},
  model: {},
  antd: {},
  request: {},
  initialState: {},
  access: {},
  targets:{},
  historyWithQuery:{},
  title: "模板加",
  alias: {
    "@": path.resolve(__dirname, "../src"),
    utils: path.resolve(__dirname, "../src/utils"),
    styles: path.resolve(__dirname, "../src/styles"),
    assets: path.resolve(__dirname, "../src/assets"),
    components: path.resolve(__dirname, "../src/components"),
    services: path.resolve(__dirname, "../src/services"),
  },

  chainWebpack(memo) {
    memo.module
      .rule("mp4")
      .test(/\.(mp4|mp3)(\?.*)?$/)
      .use("file-loader")
      .loader(require.resolve("file-loader"))
      .options({
        name: "static/[name].[hash:8].[ext]",
        esModule: false,
      });
  },
  hash: true,
  dva: {},
  theme: {
    "@primary-color": "#171436",
  },
  routes: router,
  fastRefresh: true,
  plugins: [],
  deadCode: {},
  mfsu: {},
});

package.json file:

{
  "private": true,
  "scripts": {
    "start": "set PORT=8001 HOST=0.0.0.0 && max dev",
    "build": "max build",
    "build-vesdk": "node scripts/build-public.js",
    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'"
  },
  "gitHooks": {},
  "lint-staged": {
    "*.{js,jsx,md,json}": [
      "prettier --write"
    ],
    "*.ts?(x)": [
      "prettier --parser=typescript --write"
    ]
  },
  "dependencies": {
    "@ant-design/icons": "^4.6.2",
    "@ant-design/pro-layout": "^6.5.0",
    "@reach/rect": "^0.17.0",
    "@types/downloadjs": "^1.4.3",
    "@types/js-cookie": "^2.2.6",
    "@types/lodash": "^4.14.181",
    "@types/qs": "^6.9.6",
    "@types/react-custom-scrollbars": "^4.0.10",
    "@umijs/max": "^4.0.0",
    "animate.css": "^4.1.1",
    "antd": "4.23.0",
    "aos": "^2.3.4",
    "axios": "^0.21.1",
    "bodymovin": "^4.13.0",
    "classnames": "^2.3.1",
    "compression-webpack-plugin": "^5.0.1",
    "copy-to-clipboard": "^3.3.1",
    "dexie": "^3.2.2",
    "downloadjs": "^1.4.7",
    "file-loader": "^6.2.0",
    "html-react-parser": "^3.0.4",
    "imagesloaded": "^4.1.4",
    "intro.js": "^6.0.0",
    "js-cookie": "^2.2.1",
    "js-md5": "^0.7.3",
    "jszip": "^3.10.0",
    "jszip-utils": "^0.1.0",
    "konva": "^8.4.2",
    "loadsh": "^0.0.4",
    "lodash": "^4.17.21",
    "lodash-es": "^4.17.21",
    "lottie-web": "^5.9.6",
    "markdown-it": "^13.0.1",
    "masonry-layout": "^4.2.2",
    "moment": "^2.29.1",
    "network-heart-service": "^0.1.2",
    "prop-types": "^15.8.1",
    "pubsub-js": "^1.9.3",
    "qs": "^6.10.1",
    "query-string": "^7.1.3",
    "react-color": "^2.19.3",
    "react-custom-scrollbars": "^4.2.1",
    "react-dnd": "^15.1.1",
    "react-dnd-html5-backend": "^15.1.2",
    "react-dnd-mouse-backend": "^1.0.0-rc.2",
    "react-helmet": "^6.1.0",
    "react-helmet-async": "^1.3.0",
    "react-image-crop": "^8.6.9",
    "react-infinite-scroll-component": "^6.1.0",
    "react-infinite-scroller": "^1.2.4",
    "react-input-number-editor-more": "^1.1.3",
    "react-konva": "^16.8.5",
    "react-lazyload": "^3.2.0",
    "react-mediainfo": "^0.0.42",
    "react-moveable": "^0.27.7",
    "react-redux": "^7.2.6",
    "react-slick": "^0.28.1",
    "react-split-pane": "^0.1.92",
    "reshake": "^1.2.3",
    "slick-carousel": "^1.8.1",
    "styled-components": "^5.3.5",
    "swiper": "6.5.1",
    "tslib": "^2.3.1",
    "wavesurfer.js": "^6.0.4",
    "xl_alioss_react": "^1.0.9"
  },
  "devDependencies": {
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@umijs/fabric": "^3.0.0",
    "eslint-plugin-import": "^2.26.0",
    "lint-staged": "^10.0.7",
    "prettier": "^2.2.0",
    "react": "17.x",
    "react-dom": "17.x",
    "stylelint": "^13.11.0",
    "stylelint-config-standard": "^20.0.0",
    "stylelint-order": "^4.1.0",
    "typescript": "^4.9.5"
  },
  "version": "1.0.0",
  "main": "webpack.config.js",
  "keywords": [],
  "author": "",
  "license": "ISC"
}

[fz6m]

export default defineConfig({
  // dynamicImport: {},
  model: {},
  antd: {},
  request: {},
  initialState: {},
  access: {},
  targets:{},
  historyWithQuery:{},
  title: "模板加",
  alias: {
    "@": path.resolve(__dirname, "../src"),
    utils: path.resolve(__dirname, "../src/utils"),
    styles: path.resolve(__dirname, "../src/styles"),
    assets: path.resolve(__dirname, "../src/assets"),
    components: path.resolve(__dirname, "../src/components"),
    services: path.resolve(__dirname, "../src/services"),
  },

  chainWebpack(memo) {
-   memo.module
-     .rule("mp4")
-     .test(/\.(mp4|mp3)(\?.*)?$/)
-     .use(https://github.com/webpack-contrib/file-loader)
-     .loader(require.resolve("file-loader"))
-     .options({
-       name: "static/[name].[hash:8].[ext]",
-       esModule: false,
-     });
  },
  hash: true,
  dva: {},
  theme: {
    "@primary-color": "#171436",
  },
  routes: router,
  fastRefresh: true,
  plugins: [],
  deadCode: {},
  mfsu: {},
});

这部分删了看看，还不行的话提供一个最小复现。

[fz6m]

还可以尝试关闭 mfsu: false 看看报错信息有什么提示。