在使用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: '/*',
// },
],
},
关注我获取更多资讯
