Heroku部署Node+Webpack项目遇模块找不到及Git大小写问题

看起来你遇到了几个叠加的问题：Git大小写不敏感导致的文件名同步问题、Heroku构建脚本卡住，还有React Redux connect的用法错误，我来一步步帮你解决：

1. 先解决Heroku构建无法完成的问题 #

你的postinstall脚本用了build-client-watch——这是webpack的监听模式，它会一直运行不退出，而Heroku要求构建脚本必须在完成后终止，否则会判定构建失败。

修改package.json里的脚本配置：

"scripts": {
  "start": "NODE_ENV='production' node server", // 生产环境不要用nodemon，直接用node启动服务
  "build-client": "webpack", // 新增非监听的生产构建命令
  "build-client-watch": "webpack -w",
  "start-server": "nodemon server -e html,js,scss --ignore public --ignore client",
  "postinstall": "NODE_ENV='production' npm run build-client" // 替换为非监听的构建命令
}

这样Heroku在执行postinstall时，webpack会完成打包后自动退出，让部署流程正常推进。

2. 修复Navbar组件的Redux connect用法 #

你的Navbar.js里的connect写法有误，这会导致组件即使被找到也无法正常渲染：

import React from 'react'
import {connect} from 'react-redux'

const Navbar = () => (
  <nav id="navbar">
    <p>MY FULL NAME</p>
  </nav>
)

// 正确写法：先调用connect()（可传入mapStateToProps等参数，这里不需要则空调用），再传入组件
export default connect()(Navbar)

原来的connect(Navbar)是错误用法，不符合Redux connect的调用规范。

3. 彻底解决Git大小写敏感的遗留问题 #

虽然你本地设置了core.ignorecase false，但Git缓存和远程仓库里的文件名可能还是旧的小写navbar.js，Heroku拉取代码时拿到的还是旧文件名，所以找不到./Navbar。

用Git命令正确重命名文件（避免手动改名的缓存遗漏）：

# 强制Git识别文件名的大小写变化
git mv navbar.js Navbar.js
# 提交改名操作
git commit -m "fix: properly rename navbar.js to Navbar.js with case sensitivity"
# 推送到远程仓库
git push

这样远程仓库就会同步正确的大写文件名，Heroku拉取代码时就能找到Navbar.js了。

另外，确保当前仓库的Git大小写敏感设置生效：

git config core.ignorecase false

4. 重新部署验证 #

完成以上修改后，重新推送到Heroku：

git push heroku main

查看Heroku的构建日志，确认没有Module not found的错误，构建完成后访问应用，应该就能正常加载Navbar组件了。

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