issues

‘forEach’ undefined[pkg.json]

TypeError: Cannot read property 'forEach' of undefined

function AuthComponent({ children, location, routerData }) {
  const auth = getAuthority();
  const isLogin = auth && auth[0] !== 'guest';
  const getRouteAuthority = (path, routeData) => {
    let authorities;
    routeData.forEach(route => {
      // match prefix
      if (pathToRegexp(`${route.path}(.*)`).test(path)) {
        authorities = route.authority || authorities;
        // get children authority recursively
        if (route.routes) {
          authorities = getRouteAuthority(path, route.routes) || authorities;
        }
      }
    });
    return authorities;
  };
  return (
    <Authorized
      authority={getRouteAuthority(location.pathname, routerData)}
      noMatch={isLogin ? <Exception403 /> : <Redirect to="/user/login" />}
    >
      {children}
    </Authorized>
  );
}
export default connect(({ menu: menuModel }) => ({
  routerData: menuModel.routerData,
}))(AuthComponent);

原因在 package.json

‘umi’ dependencies

'umi' should be listed in the project's dependencies

原因 dependencies 中没有添加 umi，误添加到 devDependencies 了

  "dependencies": {
      ......
    "umi": "^2.8.20",
    "umi-plugin-locale": "^2.9.13",
    "umi-plugin-react": "^1.9.19",
    "umi-request": "^1.0.0"
   },
  "devDependencies": {
      ......
    "umi-plugin-pro-block": "^1.2.0"
  },

umi-plugin-react/locale should be listed in the project's dependencies

解决：终端安装对应依赖

npm i -S umi-plugin-react

npm i -S umi-plugin-locale

config

import not defined
两个 import 未定义，导致出了很多错，不知道是不是config 不允许不被赋值的情况

import webpackPlugin from './plugin.config';
import slash from 'slash2';

完整版

// ref: https://umijs.org/config/
import os from 'os';
import pageRoutes from './router.config';
import defaultSettings from '../src/defaultSettings';
const { pwa, primaryColor } = defaultSettings;
const { APP_TYPE, TEST } = process.env;
const plugins = [
  [
    'umi-plugin-react',
    {
      antd: true,
      dva: {
        hmr: true,
      },
      locale: {
        enable: true, // default false
        default: 'zh-CN', // default zh-CN
        baseNavigator: true, // default true, when it is true, will use `navigator.language` overwrite default
      },
      dynamicImport: {
        loadingComponent: './components/PageLoading/index',
        webpackChunkName: true,
        level: 3,
      },
      pwa: pwa
        ? {
            workboxPluginMode: 'InjectManifest',
            workboxOptions: {
              importWorkboxFrom: 'local',
            },
          }
        : false,
      ...(!TEST && os.platform() === 'darwin'
        ? {
            dll: {
              include: ['dva', 'dva/router', 'dva/saga', 'dva/fetch'],
              exclude: ['@babel/runtime', 'netlify-lambda'],
            },
            hardSource: false,
          }
        : {}),
    },
  ],
];
// 针对 preview.pro.ant.design 的 GA 统计代码
// 业务上不需要这个
if (APP_TYPE === 'site') {
  plugins.push([
    'umi-plugin-ga',
    {
      code: 'UA-72788897-6',
    },
  ]);
}
export default {
  plugins: [
    [
      'umi-plugin-react',
      {
        antd: true,
        dva: {
          hmr: true,
        },
        targets: {
          ie: 11,
        },
        locale: {
          enable: true, // default false
          default: 'zh-CN', // default zh-CN
          baseNavigator: true, // default true, when it is true, will use `navigator.language` overwrite default
        },
        dynamicImport: {
          loadingComponent: './components/PageLoading/index',
        },
      },
    ],
    [
      'umi-plugin-pro-block',
      {
        moveMock: false,
        moveService: false,
        modifyRequest: true,
        autoAddMenu: true,
      },
    ],
  ],  /**
   * webpack 相关配置
   */
  define: {
    APP_TYPE: process.env.APP_TYPE || '',
  },
  treeShaking: true,
  targets: {
    ie: 11,
  },
  // Theme for antd
  // https://ant.design/docs/react/customize-theme-cn
  //路由相关配置
  routes: pageRoutes,
  disableRedirectHoist: true,
  theme: {
    'primary-color': primaryColor,
  },
  externals: {
    '@antv/data-set': 'DataSet',
  },
  ignoreMomentLocale: true,
  lessLoaderOptions: {
    javascriptEnabled: true,
  },
};

render

元素类型是无效的:将一个字符串(内置组件)或一个类/函数(用于复合组件)但有:定义。你可能忘了导出组件从文件中定义,或你可能会混违约和命名进口

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `Component`.
(anonymous function)
node_modules/react-dom/cjs/react-dom.development.js:24036
  24033 | (function () {
  24034 |   {
  24035 |     {
> 24036 |       throw ReactError(Error('Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: ' + (type == null ? type : typeof type) + '.' + info));
        | ^  24037 |     }
  24038 |   }
  24039 | })();

‘forEach’ of undefined

Cannot read property ‘forEach’ of undefined

routeData.forEach(route => {
  // match prefix
  if (pathToRegexp(`${route.path}(.*)`).test(path)) {
    authorities = route.authority || authorities;
    // get children authority recursively
    if (route.routes) {
      authorities = getRouteAuthority(path, route.routes) || authorities;
    }
  }
});

修改：使用前先判断是否存在

if (!routeData){
  return;
}
routeData.forEach(route => {
  // match prefix
  if (pathToRegexp(`${route.path}(.*)`).test(path)) {
    authorities = route.authority || authorities;
    // get children authority recursively
    if (route.routes) {
      authorities = getRouteAuthority(path, route.routes) || authorities;
    }
  }
});