Ant Design Pro 安装错误和空白页解决方法

在使用ant design pro的时候，我们按照文档说明

npm i @ant-design/pro-cli -g
pro create myapp

然后

cd myapp && npm install

安装ant design pro的时候，但是会提示安装错误,如下:

npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.6 || ^17.0.2" from @antv/[email protected]
npm ERR! node_modules/@antv/l7-react
npm ERR!   @antv/l7-react@"^2.4.3" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:

其实这个错误报告中已经提示原因,但是受大陆网络环境的影响,我们一般会更换npm源，一遇到npm 安装错误，我们无法判断原因出在源还是其他地方。这里建议大家最好想办法解决网络问题,然后遇到这样的错误要读一下错误报告,一般的报告都会有原因。错误也就好解决了。如果读不懂，可以把错误报告扔给ai，你可能会有惊喜。

回到这个错误，这个npm 报告了一个无法解决的依赖树问题。具体来说，错误是由于 @antv/l7-react 包需要一个特定版本的 React，而项目中的 React 版本与之不兼容。

这里是错误信息的关键部分：

npm ERR! peer react@"^16.8.6 || ^17.0.2" from @antv/[email protected]
npm ERR! node_modules/@antv/l7-react
npm ERR!   @antv/l7-react@"^2.4.3" from the root project
npm ERR!   react@"^18.2.0" from the root project

这里指出的问题是：

@antv/l7-react 包需要一个符合 ^16.8.6 || ^17.0.2 版本的 React。你的项目中安装的 React 版本是 ^18.2.0，这个版本高于 @antv/l7-react 所兼容的版本。

要解决这个问题，你有几个选项：

更新 @antv/l7-react 到一个兼容的版本检查 @antv/l7-react 的文档或 npm 页面，看看是否有一个版本支持 React 18。如果有，你可以更新 @antv/l7-react 到那个版本。但是实际上这个库 https://github.com/antvis/L7-react 已经废弃了，我们没有办法升级，只能看ant design pro更换其他库或者其他办法解决了。
降级 React 版本如果你不能更新 @antv/l7-react，你可能需要将 React 降级到一个与 @antv/l7-react 兼容的版本。你可以在 package.json 中更改 React 的版本范围，然后重新安装依赖项。
使用 –force 或 –legacy-peer-deps 选项虽然这不是推荐的做法，因为它可能会导致依赖关系不稳定，但你可以强制 npm 接受当前的依赖关系。使用以下命令之一：

npm install --legacy-peer-deps

或者

npm install --force

对与第一个解决办法，我们无法靠自己解决,第二个办法，我们一般也不会去降低React的版本,所以我一般会采用第三种方式解决。

当我们使用 npm install --force 安装完成后,运行npm run start 的时候,可能会出现空白页, 解决办法是释掉 routes.ts user下的404

{
    path: '/user',
    layout: false,
    routes: [
      {
        path: '/user/login',
        layout: false,
        name: 'login',
        component: './user/login',
      },
      {
        path: '/user',
        redirect: '/user/login',
      },
      {
        name: 'register-result',
        icon: 'smile',
        path: '/user/register-result',
        component: './user/register-result',
      },
      {
        name: 'register',
        icon: 'smile',
        path: '/user/register',
        component: './user/register',
      },
       //  注释掉下面的代码
      // {
      //   component: '404',
      //   path: '/*',
      // },
    ],
  },

微信公众号