Mac M2环境下Next.js项目安装React/React-DOM遇ERESOLVE错误求助

错误分析 #

从日志来看，核心问题是npm解析依赖时出现react@undefined的异常，结合你使用的Node v21（开发版）和npm v10，大概率是新版本npm的peer依赖解析逻辑与手动指定版本的冲突，或是版本兼容性问题。以下是针对性解决方案：

方案1：用Next.js官方脚手架创建项目（最稳妥） #

手动初始化npm再单独安装依赖容易踩版本冲突坑，官方脚手架会自动处理所有依赖的正确版本匹配：

npx create-next-app@latest

按照终端提示选择配置（如是否启用TypeScript、ESLint等），完成后项目会自带适配的react、react-dom和Next.js版本，无需手动安装。

方案2：调整npm配置解决依赖解析与权限问题 #

1. 设置默认使用legacy peer依赖解析规则
   避免每次安装都要加参数，直接修改npm全局配置：

   npm config set legacy-peer-deps true
   

2. 重新安装指定版本的依赖

   npm install react@^18.2.0 react-dom@^18.2.0
   

3. 修复EACCES权限错误
   不要用sudo安装包，重新配置npm全局目录规避权限问题：
   • 创建专属全局目录：

     mkdir -p ~/.npm-global
     

   • 配置npm使用该目录：

     npm config set prefix '~/.npm-global'
     

   • 将目录加入环境变量（适配M2 Mac默认的zsh终端）：

     echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.zshrc
     

   • 刷新配置使其生效：

     source ~/.zshrc
     

   完成后重新运行安装命令即可。

方案3：切换到Node.js LTS稳定版本 #

Node v21是奇数开发版本，存在兼容性不确定性，建议切换到长期支持的LTS版本：

1. 若未安装nvm（Node版本管理器），可通过Homebrew安装：

   brew install nvm
   

   安装完成后，按照终端提示完成nvm的环境变量配置（通常需编辑~/.zshrc添加对应代码）。
2. 安装并切换到LTS版本：

   nvm install --lts
   nvm use --lts
   

3. 清理旧依赖文件后重新初始化项目：

   rm -rf node_modules package-lock.json
   npm init -y
   npm install react@^18.2.0 react-dom@^18.2.0 next@latest
   

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