将 React 项目部署到 Heroku 时出错：package.json 的“没有这样的文件或目录”答案

【问题标题】：Error when deploying React project to Heroku: “no such file or directory” for package.json将 React 项目部署到 Heroku 时出错：package.json 的“没有这样的文件或目录”
【发布时间】：2022-03-22 18:45:20
【问题描述】：

我是 Heroku 新手，在将代码推送到 Heroku 时遇到问题。我有一个 React/Node JS 项目。我的文件夹结构如下：

我的 package.json 文件最初位于后端文件夹下，但由于 buildpack 错误，我将其移至根文件夹。

当我尝试将代码推送到 Heroku 时，出现以下错误：

\ProductInventoryApp> git push heroku HEAD:master

Enumerating objects: 110, done.
Counting objects: 100% (110/110), done.
Delta compression using up to 8 threads
Compressing objects: 100% (107/107), done.
Writing objects: 100% (110/110), 425.50 KiB | 2.73 MiB/s, done.
Total 110 (delta 38), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:        NODE_VERBOSE=false
remote:
remote: -----> Installing binaries
remote:        engines.node (package.json):  unspecified
remote:        engines.npm (package.json):   unspecified (use default)
remote:
remote:        Resolving node version 12.x...
remote:        Downloading and installing node 12.14.1...
remote:        Using default npm version: 6.13.4
remote:
remote: -----> Installing dependencies
remote:        Installing node modules (package.json + package-lock)
remote:        added 161 packages from 100 contributors and audited 304 packages in 7.815s
remote:
remote:        2 packages are looking for funding
remote:          run `npm fund` for details
remote:
remote:        found 0 vulnerabilities
remote:
remote:
remote: -----> Build
remote:        Running heroku-postbuild
remote:
remote:        > ProductInventoryApp@1.0.0 heroku-postbuild /tmp/build_e7c760dc5d523bf5e1c2d0dc2b5b85cf
remote:        > NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client
remote:
remote:        up to date in 0.524s
remote:        found 0 vulnerabilities
remote:
remote: npm ERR! code ENOENT
remote: npm ERR! syscall open
remote: npm ERR! path /tmp/build_e7c760dc5d523bf5e1c2d0dc2b5b85cf/client/package.json
remote: npm ERR! errno -2
remote: npm ERR! enoent ENOENT: no such file or directory, open '/tmp/build_e7c760dc5d523bf5e1c2d0dc2b5b85cf/client/package.json'
remote: npm ERR! enoent This is related to npm not being able to find a file.
remote: npm ERR! enoent
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /tmp/npmcache.HV3Sb/_logs/2020-01-12T03_23_13_871Z-debug.log
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 254
remote: npm ERR! ProductInventoryApp@1.0.0 heroku-postbuild: `NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client`
remote: npm ERR! Exit status 254
remote: npm ERR!
remote: npm ERR! Failed at the ProductInventoryApp@1.0.0 heroku-postbuild script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /tmp/npmcache.HV3Sb/_logs/2020-01-12T03_23_13_887Z-debug.log
remote:
remote: -----> Build failed
remote:
remote:        We're sorry this build is failing! You can troubleshoot common issues here:
remote:        https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:
remote:        Some possible problems:
remote:
remote:        - Node version not specified in package.json
remote:          https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
remote:
remote:        Love,
remote:        Heroku
remote:
remote:  !     Push rejected, failed to compile Node.js app.
remote:
remote:  !     Push failed
remote: Verifying deploy...
remote:
remote: !       Push rejected to product-inventory-app.
remote:
To https://git.heroku.com/product-inventory-app.git
 **! [remote rejected] HEAD -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/product-inventory-app.git'**

我不确定是什么原因造成的。我的 package.json 文件如下：

{
  "name": "ProductInventoryApp",
  "version": "1.0.0",
  "description": "",
  "main": "backend/app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app.js",
    "client-install": "npm install --prefix client",
    "server": "nodemon app.js",
    "client": "npm start --prefix client", 
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client" 
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "express-validator": "^6.3.0",
    "mongodb": "^3.4.0",
    "mongoose": "^5.8.0",
    "uuid": "^3.3.3"
  },
  "devDependencies": {
    "concurrently": "^4.0.1"
  }
}

【问题讨论】：

同样将NodeJS版本添加到package.json，但仍然报错
问题显然出在你的heroku-postbuild 脚本上，但你没有告诉我们这样做的目的是什么。
对不起，我正在学习教程并错误地将代码留在那里。删除后，它可以工作。谢谢
太好了。我已将该解决方案添加为其他人稍后查找的答案。请务必接受它，以便其他人知道此问题已得到解答。
@Mona 如果您删除 heroku-postbuild 脚本，您如何要求 heroku 构建客户端/前端？

标签： node.js reactjs heroku

【解决方案1】：

这是由您定义的 heroku-postbuild 脚本的问题引起的。从 package.json 文件中删除它并重新部署到 Heroku 以解决问题。

【讨论】：

【解决方案2】：

试试这个..它会帮助你

"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend"

基本上，--prefix 表示 react 的 package.json 将存在的路径...所以，您的 react 的 package.json 可能存在于前端文件夹中...

【讨论】：

【解决方案3】：

在我意识到我的 client/package.json 是我的 .gitignore 的一部分之前，我遇到了同样的问题。如果您使用的是 Visual Studio，它会在创建 gitignore 时自动将您的包添加到其中。

【讨论】：

【解决方案4】：

我遇到了与Heroku: “no such file or directory” 相同的错误，但遇到了不同的问题。

就我而言，我使用 docker 和 docker-compose.yml 和 volumes 来共享卷。
Heroku 需要一个 heroku.yml 而不是这个文件，它需要更少的选项。

所以需要对Dockerfile进行一些改动（或者专门为Heroku制作一份）

我的docker-compose.yml 文件：

services:
  web:
    volumes:
      - .:/usr/src/app

对于我的heroku.yml 配置，我设置了：

build:
  docker:
    web: Dockerfile.web

Dockerfile.web 与原来的Dockerfile 相同，但有以下区别：

...
ADD . /usr/src/app
...

【讨论】：