因react/jsx-runtime缺失，Strapi应用无法推送到Heroku

执行命令git push heroku-staging staging:master将Strapi应用部署到Heroku时，出现如下构建错误：

ModuleNotFoundError: Module not found: Error: Can't resolve 'react/jsx-runtime' in '/tmp/build_42beb485/node_modules/@strapi/icons/dist'
remote: Did you mean 'jsx-runtime.js'?

我的package.json内容如下：

{
  "name": "appNAME",
  "private": true,
  "version": "0.1.0",
  "description": "A Strapi application",
  "scripts": {
    "develop": "strapi develop",
    "start": "strapi start",
    "build": "strapi build",
    "strapi": "strapi"
  },
  "dependencies": {
    "@_sh/strapi-plugin-ckeditor": "^1.0.7",
    "@strapi/plugin-graphql": "^4.1.8",
    "@strapi/plugin-i18n": "4.4.3",
    "@strapi/plugin-users-permissions": "4.4.3",
    "@strapi/provider-email-sendgrid": "^4.1.12",
    "@strapi/provider-upload-aws-s3": "^4.1.9",
    "@strapi/strapi": "4.4.3",
    "chargebee": "^2.10.0",
    "cheerio": "^1.0.0-rc.11",
    "mime-types": "^2.1.35",
    "moment": "^2.29.3",
    "pg": "^8.6.0",
    "pg-connection-string": "^2.5.0",
    "sanitize-filename": "^1.6.3",
    "strapi-provider-email-smtp": "^1.0.3"
  },
  "author": {
    "name": "A Strapi developer"
  },
  "strapi": {
    "uuid": "XXXXXX-bad0-4fee-XXXX-XXXXXX"
  },
  "engines": {
    "node": ">=14.19.1 <=18.x.x",
    "npm": "8.11.0"
  },
  "license": "MIT"
}

解决方案 #

这个错误的核心原因是Strapi v4的Admin面板依赖React，但项目未显式声明react和react-dom依赖，导致Heroku构建时无法找到react/jsx-runtime模块。

1. 安装缺失的依赖
   在本地项目目录执行：

   npm install react react-dom --save
   

   若使用yarn则执行：

   yarn add react react-dom
   

2. 提交修改并重新部署

   git add package.json package-lock.json
   git commit -m "Add react dependencies to fix Heroku build error"
   git push heroku-staging staging:master
   

3. 可选：清除Heroku构建缓存（如果问题仍存在）
   如果部署仍失败，可能是构建缓存导致的，执行以下命令清除缓存后重新推送：

   heroku builds:cache:purge -a your-heroku-app-name
   

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