部署React Rails应用到Heroku时出现Cannot find module '@babel/preset-react'错误

Heroku 生产环境部署 Node 相关项目时，默认仅安装 package.json 中 dependencies 字段下的依赖，不会安装 devDependencies 下的开发依赖。你当前将转译 React 代码必需的 @babel/preset-react 放在了 devDependencies 分类中，但 Rails + Webpacker 生产环境构建前端资源时需要调用该模块，因此触发找不到模块的报错。本地环境执行 npm install 时默认会安装全部依赖，因此运行正常。

推荐优先使用方案1，体积更小更符合生产规范：

方案1：调整依赖分类 #

将所有生产构建时需要用到的 Babel 转译相关依赖从 devDependencies 移动到 dependencies 中，修改后的 package.json 参考如下：

{
  "name": "App",
  "private": true,
  "dependencies": {
    "@babel/plugin-syntax-jsx": "^7.14.5",
    "@babel/plugin-transform-react-jsx": "^7.14.9",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "@rails/webpacker": "5.4.0",
    "@types/react": "^17.0.18",
    "@types/react-dom": "^17.0.9",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react_ujs": "^2.6.1",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  },
  "devDependencies": {
    "webpack-dev-server": "^3.11.2"
  }
}

修改完成后提交代码，重新推送至 Heroku 触发部署即可。

方案2：修改 Heroku 安装策略 #

如果不需要精简生产环境依赖，可直接配置环境变量让 Heroku 安装全部依赖：

• 本地运行 Heroku CLI 命令：heroku config:set NPM_CONFIG_PRODUCTION=false YARN_PRODUCTION=false
• 重新推送代码触发部署即可

部署完成后可执行 heroku run bash 进入应用实例，运行 npm list @babel/preset-react 确认模块已正常安装。

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