Heroku部署失败：TypeError: Cannot read properties of null (reading 'useContext')

一、修复TypeError: Cannot read properties of null (reading 'useContext')错误 #

该错误触发于Next.js内置Head组件的useContext调用，即便你未手动使用该API，也可尝试以下方案：

• 锁定依赖版本：确保frontend/package.json中next、react、react-dom的版本与本地完全一致，避免Heroku构建时自动升级导致版本不兼容。
• 清理Heroku构建缓存：残留的旧依赖可能引发冲突，执行命令清除缓存：

  heroku builds:cache:purge
  

• 排查非组件环境的Head调用：确认所有Head组件的使用都在React函数/类组件内部，禁止在静态文件或非组件代码中调用。
• 检查Next.js配置：避免next.config.js中的自定义webpack配置干扰React上下文注入，可暂时恢复默认配置测试。

二、修复根目录执行npm run build的模块找不到错误 #

根目录复制package.json和node_modules的操作会导致模块解析路径混乱，正确处理方式如下：

1. 删除根目录冗余文件：移除根目录下的package.json和node_modules，避免与frontend目录的依赖产生路径冲突。
2. 指定Heroku构建目录：
   • 若需从根目录触发构建，修改根目录package.json的build脚本，确保切换到frontend目录执行操作：

     {
       "scripts": {
         "build": "cd frontend && npm install && npm run build"
       }
     }
     

   • 或在根目录创建Procfile指定运行命令：

     web: cd frontend && npm start
     

   • 同时在Heroku项目设置中，将Build Command设置为：

     cd frontend && npm install && npm run build
     

3. 依赖安装仅在frontend目录执行：所有npm install操作都应在frontend目录下完成，避免跨目录的模块引用错误。

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