卸载重装Node后执行npx create-react-app创建React项目失败

问题描述 #

我此前卸载了Node并重新安装，完成操作后执行命令npx create-react-app my-app创建React项目时运行失败。

当前环境版本信息 #

• node版本：v17.2.0
• yarn版本：3.1.1
• npm版本：8.1.4

执行命令后的完整输出（已翻译） #

my-mac:test name$ npx create-react-app my-app

正在/Users/name/Desktop/test/my-app路径下创建新的React应用

正在安装依赖包，可能需要几分钟时间
正在通过cra-template安装react、react-dom和react-scripts...

➤ YN0000: ┌ 依赖解析阶段
➤ YN0032: │ fsevents@npm:2.3.2: 不建议隐式依赖node-gyp
➤ YN0061: │ babel-eslint@npm:10.1.0 已弃用：babel-eslint现已更名为@babel/eslint-parser，本包将不再更新
➤ YN0061: │ chokidar@npm:2.1.8 已弃用：Chokidar 2在node v14+版本上会出现故障，请升级到chokidar 3，依赖量减少15倍
➤ YN0061: │ fsevents@npm:1.2.13 已弃用：fsevents 1在node v14+版本上会出现故障，可能存在不安全的二进制文件，请升级到fsevents 2
➤ YN0061: │ rollup-plugin-babel@npm:4.4.0 已弃用：本包已弃用不再维护，请使用@rollup/plugin-babel
➤ YN0061: │ @hapi/joi@npm:15.1.1 已弃用：请切换为执行'npm install joi'
➤ YN0061: │ svgo@npm:1.3.2 已弃用：此SVGO版本已不再维护，请升级到v2.x.x版本
➤ YN0061: │ querystring@npm:0.2.1 已弃用：querystring API已被认定为遗留接口，新代码请使用URLSearchParams API替代
➤ YN0061: │ querystring@npm:0.2.0 已弃用：querystring API已被认定为遗留接口，新代码请使用URLSearchParams API替代
➤ YN0061: │ uuid@npm:3.4.0 已弃用：请升级到7或更高版本，旧版本在特定场景下会使用Math.random()，存在已知问题
➤ YN0061: │ urix@npm:0.1.0 已弃用
➤ YN0032: │ nan@npm:2.14.2: 不建议隐式依赖node-gyp
➤ YN0061: │ @hapi/bourne@npm:1.3.2 已弃用：此版本已弃用不再维护
➤ YN0061: │ @hapi/topo@npm:3.1.6 已弃用：此版本已弃用不再维护
➤ YN0061: │ sane@npm:4.1.0 已弃用：已修复部分依赖漏洞，不再支持node <10版本，新增了更新的ECMAScript语法/特性支持
➤ YN0061: │ resolve-url@npm:0.2.1 已弃用
➤ YN0061: │ flatten@npm:1.0.3 已弃用：flatten已弃用，建议使用lodash等工具框架替代
➤ YN0061: │ core-js@npm:2.6.12 已弃用：core-js@<3.3已不再维护，因存在大量问题不建议使用。受V8引擎特性影响，旧版本core-js的特性检测即使在没有任何polyfill的情况下也可能导致运行速度最高下降100倍，请将依赖升级到core-js的最新版本
➤ YN0061: │ @hapi/address@npm:2.1.4 已弃用：已迁移到'npm install @sideway/address'
➤ YN0061: │ @hapi/hoek@npm:8.5.1 已弃用：此版本已弃用不再维护
➤ YN0061: │ request-promise-native@npm:1.0.9 已弃用：request-promise-native已弃用，因为它继承了现已弃用的request包
➤ YN0032: │ evp_bytestokey@npm:1.0.3: 不建议隐式依赖node-gyp
➤ YN0061: │ request@npm:2.88.2 已弃用：request已弃用
➤ YN0061: │ har-validator@npm:5.1.5 已弃用：此库不再维护
➤ YN0002: │ react-dev-utils@npm:11.0.4 未提供typescript(p79ddf)，被fork-ts-checker-webpack-plugin依赖
➤ YN0002: │ react-dev-utils@npm:11.0.4 未提供webpack(p2af19)，被fork-ts-checker-webpack-plugin依赖
➤ YN0000: │ 部分对等依赖未正确满足，可运行yarn explain peer-requirements <hash>查看详情，<hash>为p开头的六位代码
➤ YN0000: └ 耗时13秒254毫秒完成
➤ YN0000: ┌ 资源拉取阶段
➤ YN0013: │ yargs-parser@npm:13.1.2 缓存中不存在，将从远程仓库拉取
➤ YN0013: │ yargs-parser@npm:18.1.3 缓存中不存在，将从远程仓库拉取
➤ YN0013: │ yargs@npm:13.3.2 缓存中不存在，将从远程仓库拉取
➤ YN0013: │ yargs@npm:15.4.1 缓存中不存在，将从远程仓库拉取
➤ YN0013: │ yocto-queue@npm:0.1.0 缓存中不存在，将从远程仓库拉取
➤ YN0000: └ 耗时16秒688毫秒完成
➤ YN0000: ┌ 链接阶段
➤ YN0000: │ PnP的ESM支持使用了实验性加载器API，因此属于实验性功能
➤ YN0007: │ core-js@npm:3.9.0 需要编译，原因是从未编译过或上次编译失败
➤ YN0007: │ core-js-pure@npm:3.9.0 需要编译，原因是从未编译过或上次编译失败
➤ YN0007: │ fsevents@patch:fsevents@npm%3A1.2.13#~builtin<compat/fsevents>::version=1.2.13&hash=18f3a7 需要编译，原因是从未编译过或上次编译失败
➤ YN0007: │ ejs@npm:2.7.4 需要编译，原因是从未编译过或上次编译失败
➤ YN0007: │ core-js@npm:2.6.12 需要编译，原因是从未编译过或上次编译失败
➤ YN0000: └ 耗时16秒310毫秒完成
➤ YN0000: 运行完成，存在警告，总耗时47秒48毫秒
node:internal/modules/cjs/loader:936
  抛出错误;
  ^

错误：找不到模块'react-scripts/scripts/init.js'
依赖栈:
- /Users/name/Desktop/test/my-app/[eval]
{
  错误代码: 'MODULE_NOT_FOUND',
  依赖栈: [ '/Users/name/Desktop/test/my-app/[eval]' ]
}

Node.js版本v17.2.0

正在终止安装。
  node执行失败。

正在删除生成的文件... package.json
正在删除生成的文件... yarn.lock
操作完成。

解决方案 #

问题由两个兼容性原因导致：一是Yarn 3.x默认使用PnP依赖管理模式，和当前版本create-react-app的路径查找逻辑不兼容；二是Node v17属于非长期支持版本，和旧版react-scripts的依赖存在适配问题。
可按优先级尝试以下方案：

1. 强制create-react-app使用npm安装依赖，绕过Yarn兼容问题

npx create-react-app my-app --use-npm

2. 若要继续使用Yarn，先将Yarn的依赖安装模式切换为传统的node_modules模式，再执行创建命令

# 全局设置Yarn使用node_modules模式
yarn config set nodeLinker node-modules
# 执行项目创建
npx create-react-app my-app

3. 若上述方案均无效，建议将Node切换为16.x或18.x的LTS（长期支持）版本后重试，非LTS版本本身稳定性不足，易出现各类依赖适配问题。

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