Next.js 14项目启动报useReducer空值读取错误求助

问题背景 #

• 现有Next.js 14项目（已成功部署、语义功能正常），在VSCode中通过sudo npm run dev启动时触发以下错误：

  TypeError: Cannot read properties of null (reading 'useReducer')
  

• 全新创建的Next.js 14项目也出现相同错误
• 已尝试的无效操作：更新所有依赖、删除.next和node_modules目录（已处理M1设备权限问题）

项目依赖列表 #

"dependencies": {
    "@vercel/analytics": "^1.1.1",
    "@vercel/speed-insights": "^1.0.1",
    "next": "^14.0.4",
    "package": "^1.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/node": "17.0.25",
    "@types/react": "18.0.6",
    "@types/react-dom": "18.0.2",
    "autoprefixer": "^10.4.13",
    "daisyui": "^4.4.19",
    "eslint": "8.14.0",
    "eslint-config-next": "12.1.5",
    "postcss": "^8.4.18",
    "tailwindcss": "^3.2.2",
    "typescript": "4.6.3"
  }

解决方案 #

1. 禁止使用sudo启动开发服务器 #

sudo会改变运行环境的用户权限，导致Node.js模块加载路径异常，进而引发React内置钩子读取失败。

• 修复项目目录权限：

  sudo chown -R $USER:$USER /path/to/your/project
  

• 直接用普通权限启动：

  npm run dev
  

2. 对齐Next.js与ESLint配置版本 #

依赖中eslint-config-next（12.1.5）与Next.js（14.0.4）版本严重不匹配，会引发编译/运行时冲突。

• 更新ESLint相关依赖：

  npm install eslint-config-next@14.0.4 eslint@^8.57.0 --save-dev
  

3. 清理npm缓存并重装依赖 #

缓存损坏可能导致依赖安装不完整，引发模块加载异常。

• 执行以下命令：

  npm cache clean --force
  rm -rf node_modules package-lock.json
  npm install
  

4. 检查Node.js版本兼容性 #

Next.js 14要求Node.js版本≥18.17或≥20.6，旧版本Node.js会导致模块加载问题。

• 查看当前版本：

  node -v
  

• 若版本不兼容，使用nvm切换到指定版本：

  nvm install 20
  nvm use 20
  

5. 移除可疑依赖package #

package是一个占位符npm包，可能与项目依赖产生冲突，引发未预期的运行时错误。

• 卸载该依赖：

  npm uninstall package
  

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