在CodeSandbox开发的React项目执行yarn install遇问题求助

我最初在CodeSandbox上开发React应用，代码托管在GitHub仓库。近期把仓库克隆到本地后执行yarn install，虽然已经安装了所有node_modules，但终端弹出了提示信息，不知道怎么解决，求帮忙排查并给出建议。

项目package.json内容 #

{
  "name": "trading-blog",
  "version": "1.0.0",
  "keywords": [
    "typescript",
    "react",
    "starter"
  ],
  "main": "src/index.tsx",
  "dependencies": {
    "@emotion/react": "11.10.5",
    "@emotion/styled": "11.10.5",
    "@mui/icons-material": "5.10.16",
    "@mui/material": "5.10.17",
    "@types/react-dom": "18.0.9",
    "@types/react-router": "5.1.19",
    "@types/react-router-dom": "5.3.3",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-router-dom": "6.5.0",
    "react-scripts": "4.0.3"
  },
  "devDependencies": {
    "@types/react": "18.0.25",
    "@types/react-dom": "18.0.9",
    "typescript": "4.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

终端提示信息 #

项目依赖树可能存在问题。
这大概率不是Create React App的bug，而是需要你在本地修复的问题。

Create React App提供的react-scripts包依赖特定版本的react：

"react": "^17.0.0"

不要手动安装这个版本，包管理器会自动处理。但检测到项目依赖树的更高层级存在不同版本的react：

/Users/xxx/node_modules/react (版本：18.0.0)

手动安装不兼容版本会导致难以调试的问题。

如果你想忽略这个检查，可以在项目根目录的.env文件中添加SKIP_PREFLIGHT_CHECK=true。这会永久关闭这个提示，但可能会遇到其他问题。

要修复依赖树，请严格按照以下步骤执行：

1. 删除项目目录下的package-lock.json（不是package.json！）和/或yarn.lock文件。
2. 删除项目目录下的node_modules文件夹。
3. 在package.json文件的dependencies和/或devDependencies中移除"react"和"react-dom"。
4. 运行npm install或yarn，取决于你使用的包管理器。

大多数情况下，执行以上步骤就能解决问题。如果没用，还可以尝试：

5. 如果你用的是npm，安装yarn后用yarn重复上述步骤。
6. 检查/Users/xxx/node_modules/react是否在你的项目目录之外，比如可能不小心在主目录安装了依赖。
7. 在项目目录下运行npm ls react，查看除了react-scripts之外还有哪个包安装了react。

如果以上方法都没用，就在项目根目录的.env文件中添加SKIP_PREFLIGHT_CHECK=true。

另外，我们知道这段提示很长，但请仔细阅读上述步骤，希望能帮到你！

问题分析与解决建议 #

核心原因 #

你使用的react-scripts@4.0.3是为React 17开发的版本，不兼容当前安装的React 18，这是导致依赖冲突提示的根本原因。此外，@types/react-router-dom的5.x版本和实际安装的react-router-dom@6.5.0版本不匹配，后续可能引发类型错误。

推荐解决方案 #

1. 升级react-scripts到兼容版本
   React 18需要react-scripts@5.0.0及以上版本，执行以下命令升级：

   yarn add react-scripts@latest --save
   

   升级完成后重新执行yarn install，再启动项目即可解决依赖冲突问题。

2. 同步升级路由类型包
   为避免类型错误，将@types/react-router-dom升级到与react-router-dom匹配的6.x版本：

   yarn add @types/react-router-dom@latest --save-dev
   

3. 临时规避方案（不推荐）
   如果你暂时不想升级依赖，可以在项目根目录创建.env文件，添加如下内容跳过预检查：

   SKIP_PREFLIGHT_CHECK=true
   

   但这种方法只是隐藏提示，并没有解决本质的兼容性问题，后续可能出现其他运行时错误。

内容的提问来源于stack exchange，提问作者marcinb1986