使用pnpm安装Radix-UI后Next.js项目崩溃，疑似pnpm损坏

问题本质 #

你遇到的所有导入错误（Next.js模块、fs/path、CSS模块）以及JSX类型提示异常，核心原因是WSL2的DNS解析失败：

• 安装Radix-UI时出现的getaddrinfo EAI_AGAIN registry.npmjs.org错误，说明WSL无法解析npm仓库的域名，导致包安装过程中断。
• pnpm通过硬链接管理依赖，中断的安装操作会破坏项目依赖的链接结构，进而导致所有依赖无法被正常解析。
• git reset无效是因为问题出在依赖管理层面，而非代码文件本身。

修复步骤 #

1. 修复WSL2 DNS解析问题 #

这是解决后续所有问题的前提：

• 关闭当前WSL终端，打开管理员权限PowerShell，执行：

  wsl --shutdown
  

• 启动WSL，编辑网络配置文件：

  sudo nano /etc/wsl.conf
  

• 写入以下配置（强制WSL使用自定义DNS，避免自动生成的配置失效）：

  [network]
  generateResolvConf = false
  

• 保存退出（按Ctrl+O→回车→Ctrl+X），然后删除自动生成的DNS配置文件：

  sudo rm /etc/resolv.conf
  

• 创建新的DNS配置，使用公共DNS（如Google 8.8.8.8）：

  echo "nameserver 8.8.8.8" | sudo tee /etc/resolv.conf
  

• 验证DNS是否正常：

  ping registry.npmjs.org
  

  能收到响应则DNS修复完成。

2. 重置pnpm依赖环境 #

修复DNS后，需要重置项目依赖链接：

• 进入项目目录，删除损坏的依赖目录和锁文件：

  rm -rf node_modules
  rm pnpm-lock.yaml
  

• 清理pnpm全局缓存，避免残留损坏的依赖文件：

  pnpm store prune
  

• 重新安装所有项目依赖：

  pnpm install
  

• 再次尝试安装Radix-UI组件：

  pnpm add @radix-ui/react-popover@latest -E
  

3. 验证修复效果 #

启动Next.js项目检查是否恢复正常：

pnpm dev

此时所有导入错误、JSX类型提示异常应该全部消失。

注意事项 #

• WSL2的DNS问题属于常见环境坑，Windows网络切换（如WiFi/有线切换）后容易复发，上述配置可永久解决自动生成DNS的问题。
• pnpm的install和add命令均可用于安装包，add是新增包的快捷方式，你之前的命令本身没有错误，问题核心是DNS解析失败。

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