🐛[BUG]Cannot read properties of undefined (reading 'StepForm')

Nymph-fan commented 3 years ago

🐛 bug 描述

引入pro-form 组件后，页面报错 × ←→1 of 2 errors on the page Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'StepForm')

📷 复现步骤

升级antd 到4.16.13，引入@ant-design/pro-form 在npm start 后，引入组件的页面报错

🏞 期望结果

import 成功

💻 复现代码

错误栈

test.js 14 | import { addTool } from '@/services/tool'; 15 | import React from 'react'; 16 | import { InfoCircleOutlined } from '@ant-design/icons'; 错误栈-> 17 | import ProForm from '@ant-design/pro-form'; 18 | import { EditableProTable } from '@ant-design/pro-table'; 19 | 20 | const { Option } = Select;

system.js 48 | 49 | export const getRouterData = app => { 50 | return _.mapValues(routerConfig, value => ({ 错误栈->51 | component: dynamicWrapper(app, value.models || [], () => 52 | Promise.resolve(require(../${value.component}.js).default), 53 | ), 54 | }));

system.js 34 | if (!routerDataCache) { 35 | routerDataCache = getRouterData(app); 36 | } 错误栈-> 37 | return component().then(raw => { 38 | const Component = raw.default || raw; 39 | return props => 40 | createElement(Component, {

system.js完整code

import { createElement } from 'react';
import dynamic from 'dva/dynamic';
import _ from 'lodash';
import redirectConfig from '@/common/redirectConfig';
import routerConfig from '@/common/routerConfig';
import menuConfig from '@/common/menuConfig';

// for redirects
export const getRedirects = () => {
  return _.map(redirectConfig, (value, path) => ({
    key: path,
    from: path,
    to: value['pathname'],
    search: value['search'] || [],
  }));
};

// for routes
let routerDataCache;

const modelNotExisted = (app, model) =>
  !app._models.some(({ namespace }) => {
    return namespace === model.substring(model.lastIndexOf('/') + 1);
  });

const dynamicWrapper = (app, models, component) => {
  return dynamic({
    app,
    models: () =>
      models
        .filter(model => modelNotExisted(app, model))
        .map(m => Promise.resolve(require(`../models/${m}.js`).default)),
    component: () => {
      if (!routerDataCache) {
        routerDataCache = getRouterData(app);
      }
      return component().then(raw => {
        const Component = raw.default || raw;
        return props =>
          createElement(Component, {
            ...props,
            routerData: routerDataCache,
          });
      });
    },
  });
};

export const getRouterData = app => {
  return _.mapValues(routerConfig, value => ({
    component: dynamicWrapper(app, value.models || [], () =>
      Promise.resolve(require(`../${value.component}.js`).default),
    ),
  }));
};

// for menus
function getFlatMenuData(menus) {
  let keys = {};
  menus.forEach(item => {
    if (item.children) {
      keys[item.path] = { ...item };
      keys = { ...keys, ...getFlatMenuData(item.children) };
    } else {
      keys[item.path] = { ...item };
    }
  });
  return keys;
}

export const getMenuData = ({ pathname }) => {
  let selected = '';
  _.forEach(menuConfig, (value, path) => {
    if (
      pathname.startsWith(path) &&
      path.split('/').length > selected.split('/').length
    ) {
      selected = path;
    }
  });

  const config = menuConfig[selected] || {};
  const normal = config.normal || [];
  const search = config.search || [];
  const ext = config.extFunc ? config.extFunc() : [];

  const menus = [...normal, ...ext];
  const keys = _.keys(getFlatMenuData(menus)).filter(
    menu => pathname === menu || pathname.startsWith(menu + '/'),
  );

  return { keys, menus, search };
};

© 版本信息

{
  "private": true,
  "scripts": {
    "start": "cross-env roadhog dev",
    "build": "cross-env roadhog build",
    "lint": "eslint --ext .js src test"
  },
  "dependencies": {
    "@ant-design/compatible": "^1.0.8",
    "@ant-design/icons": "^4.7.0",
    "@ant-design/pro-form": "^1.42.1",
    "@ant-design/pro-table": "^2.54.4",
    "@babel/runtime": "^7.15.4",
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-fontawesome": "0.1.0-11",
    "ant-design-pro": "^1.4.4",
    "antd": "^4.16.13",
    "babel-plugin-import": "^1.12.2",
    "copy-to-clipboard": "^3.3.1",
    "dva": "^2.4.1",
    "dva-loading": "^1.0.4",
    "echarts": "^4.3.0",
    "echarts-for-react": "^2.0.14",
    "lodash": "^4.17.15",
    "path-to-regexp": "^2.4.0",
    "react": "^16.14.0",
    "react-beautiful-dnd": "^10.1.1",
    "react-copy-to-clipboard": "^5.0.4",
    "react-dom": "^16.14.0"
  },
  "peerDependencies": {
    "antd": "4.16.13"
  },
  "devDependencies": {
    "babel-plugin-dva-hmr": "^0.3.2",
    "babel-plugin-dynamic-import-node": "^2.3.0",
    "babel-plugin-module-resolver": "^3.2.0",
    "cross-env": "^5.2.1",
    "eslint": "^4.14.0",
    "eslint-config-umi": "^0.1.5",
    "eslint-plugin-flowtype": "^2.50.3",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.26.1",
    "husky": "^0.12.0",
    "redbox-react": "^1.4.3",
    "roadhog": "^2.5.0-beta.4",
    "roadhog-api-doc": "^1.1.2"
  }
}