Heroku部署MERN应用报错Cannot find module 'html'如何解决

问题表现 #

按照公开的MERN应用Heroku部署教程完成全栈应用部署后，平台运行日志持续抛出错误，访问站点根路径返回500状态码，核心报错日志如下：

2022-07-07T13:23:00.193856+00:00 app[web.1]: Error: Cannot find module 'html'
2022-07-07T13:23:00.193883+00:00 app[web.1]: Require stack:
2022-07-07T13:23:00.193884+00:00 app[web.1]: - /app/node_modules/express/lib/view.js
2022-07-07T13:23:00.193885+00:00 app[web.1]: - /app/node_modules/express/lib/application.js
2022-07-07T13:23:00.193885+00:00 app[web.1]: - /app/node_modules/express/lib/express.js
2022-07-07T13:23:00.193885+00:00 app[web.1]: - /app/node_modules/express/index.js
2022-07-07T13:23:00.193886+00:00 app[web.1]: - /app/app.js
2022-07-07T13:23:00.193886+00:00 app[web.1]: - /app/server.js
2022-07-07T13:23:00.193887+00:00 app[web.1]: at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
2022-07-07T13:23:00.193889+00:00 app[web.1]: at Function.Module._load (node:internal/modules/cjs/loader:778:27)
2022-07-07T13:23:00.193889+00:00 app[web.1]: at Module.require (node:internal/modules/cjs/loader:1005:19)
2022-07-07T13:23:00.193890+00:00 app[web.1]: at require (node:internal/modules/cjs/helpers:102:18)
2022-07-07T13:23:00.193890+00:00 app[web.1]: at new View (/app/node_modules/express/lib/view.js:81:14)
2022-07-07T13:23:00.193891+00:00 app[web.1]: at Function.render (/app/node_modules/express/lib/application.js:587:12)
2022-07-07T13:23:00.193891+00:00 app[web.1]: at ServerResponse.render (/app/node_modules/express/lib/response.js:1039:7)
2022-07-07T13:23:00.193891+00:00 app[web.1]: at /app/controllers/homeController.js:15:6
2022-07-07T13:23:00.193891+00:00 app[web.1]: at /app/middlewares/bigPromise.js:4:19
2022-07-07T13:23:00.193892+00:00 app[web.1]: at Layer.handle [as handle_request] (/app/node_modules/express/lib/router/layer.js:95:5)
2022-07-07T13:23:00.194187+00:00 heroku[router]: at=info method=GET path="/" host=project-review-webapp.herokuapp.com request_id=26bf0adc-0ece-413c-81e3-62b84376c188 fwd="103.67.17.76" dyno=web.1 connect=0ms service=2ms status=500 bytes=510 protocol=https

当前部署配置如下：

• Procfile配置：web: node server.js
• 项目根目录结构：

- client
 - config
 - controllers
 - middlewares
 - models
 - node_modules
 - routes
 - utils
 - .env
 - .gitignore
 - app.js
 - nodemon.json
 - package.json
 - package-lock.json
 - Procfile
 - server.js

• 根目录package.json配置：

{
  "name": "projectreview",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "engines": {
    "node": "16.15.0"
  },
  "scripts": {
    "start": "node server.js",
    "dev": " nodemon server.js",
    "heroku-postbuild": "cd client && npm install --only=dev && npm install && npm run build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "cloudinary": "^1.30.0",
    "cookie-parser": "^1.4.6",
    "cors": "^2.8.5",
    "dotenv": "^16.0.1",
    "express": "^4.18.1",
    "express-fileupload": "^1.4.0",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^6.4.2",
    "nodemailer": "^6.7.6",
    "path": "^0.12.7",
    "validator": "^13.7.0"
  },
  "devDependencies": {
    "nodemon": "^2.0.18"
  }
}

报错原因 #

1. 核心触发逻辑：homeController.js第15行调用res.render()处理根路径请求时，Express未检测到已配置的模板引擎，默认尝试加载名为html的npm渲染包，项目依赖中无对应包，直接抛出模块不存在的错误。
2. 生产环境配置缺失：作为MERN架构项目，Express服务未配置React前端构建产物的静态资源托管规则，也未配置前端路由的兜底转发逻辑，生产环境无法正确返回前端打包后的入口文件。
3. 构建脚本冗余：heroku-postbuild脚本中npm install --only=dev属于无效操作，Heroku构建阶段默认会完成依赖安装，多余的dev依赖安装会拉长构建时间，甚至引发依赖版本冲突。

修复方案 #

1. 修正Express服务生产环境配置 #

在Express初始化文件（一般为app.js）中，所有API路由定义的末尾添加如下配置，托管前端静态资源并配置路由兜底：

const path = require('path');
// 托管React构建后的静态资源目录
app.use(express.static(path.join(__dirname, 'client/build')));

// 所有非API路径的GET请求，统一返回前端入口文件，适配React Router等前端路由
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
});

同时删除homeController.js中处理根路径的res.render()逻辑，根路径请求将由上述兜底规则处理。

2. 优化构建脚本 #

修改根目录package.json中的heroku-postbuild字段，移除冗余命令：

"heroku-postbuild": "cd client && npm install && npm run build"

3. 校验后重新部署 #

• 确认.gitignore文件已忽略根目录、client目录下的node_modules和build文件夹，避免本地产物干扰Heroku构建流程
• 本地进入client目录执行npm run build，启动根目录服务验证本地访问正常
• 提交所有代码改动到Heroku关联的Git分支，触发自动部署即可

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