Heroku部署SpringBoot+React+MongoDB项目找不到React模块如何解决

问题原因 #

部署报错核心是Heroku的Linux构建环境大小写敏感，加上配置存在疏漏，具体触发点如下：

1. 代码中React导入语句大小写错误，本地Windows/macOS文件系统不区分大小写可正常运行，部署到Linux环境后无法匹配到小写命名的react依赖包
2. package.json脚本配置冗余错误，声明了heroku-postbuild调用不存在的build命令
3. 部分配置未适配生产构建场景

解决方案 #

• 修正React导入语句 #

  打开报错的/src/main/js/components/recipesHub.js第7行，检查所有组件的React导入语句，确保写法为：

  import React from 'react'
  

  禁止写为import React from 'React'（大写R开头的引用）。

• 修正package.json配置 #

  调整scripts字段，要么删除冗余的heroku-postbuild字段（你用Maven的frontend插件执行webpack构建，不需要Heroku Node.js buildpack单独执行构建命令），要么补充build命令解决配置缺失：

  "scripts": {
    "start": "npm run webpack",
    "webpack": "webpack -d --watch",
    "build": "webpack --mode production",
    "heroku-postbuild": "npm run build"
  }
  

  同时补充mode参数可解决日志中的webpack mode配置警告。

• 确认文件位置 #

  确保package.json和pom.xml存放在项目根目录（同一层级），如果你的前端代码单独存放在其他目录，需要在frontend-maven-plugin的configuration节点补充工作目录配置：

  <configuration>
    <installDirectory>target</installDirectory>
    <workingDirectory>${project.basedir}/src/main/你的前端目录</workingDirectory>
  </configuration>
  

• 清理缓存重新部署 #

  先执行命令清理Heroku构建缓存，避免旧依赖干扰：

  heroku builds:cache:purge -a 替换为你的Heroku应用名称
  

  之后重新提交代码推送到Heroku即可：

  git add .
  git commit -m "fix deployment issues"
  git push heroku main
  

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