尝试将 React 应用程序部署到 heroku 时出现错误

Question

我正在尝试学习如何将 React 应用程序部署到 heroku，但每当我进行测试运行时，我都会收到错误消息。

我一直在使用以下命令来创建一个 React 应用程序并将其部署到 heroku：

 $ npx create-react-app struttingpeacocks

 $ cd struttingpeacocks

 $ git init

 $ heroku create struttingpeacocksapp --buildpack https://github.com/mars/create-react-app-buildpack.git

 $ git add .

 $ git commit -m "create-react-app"

 $ git push heroku master

---

但是，当我这样做时，以下代码将运行并在最后出现错误消息：

---

 $ git push heroku master

 Counting objects: 18, done.

 Delta compression using up to 8 threads.

 Compressing objects: 100% (18/18), done.

 Writing objects: 100% (18/18), 88.11 KiB | 3.26 MiB/s, done.

 Total 18 (delta 0), reused 0 (delta 0)

 remote: Compressing source files... done.

 remote: Building source:

 remote:

 remote: -----> React.js (create-react-app) multi app detected

 remote: -----> Configure create-react-app build environment

 remote:        Using `NODE_ENV=development`

 remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git

 remote: =====> Detected Framework: Multipack

 remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git

 remote: =====> Detected Framework: Node.js

 remote:

 remote: -----> Creating runtime environment

 remote:

 remote:        NPM_CONFIG_LOGLEVEL=error

 remote:        NPM_CONFIG_PRODUCTION=false

 remote:        NODE_ENV=development

 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:        engines.yarn (package.json):  unspecified (use default)
 remote:

 remote:        Resolving node version 8.x...

 remote:        Downloading and installing node 8.12.0...

 remote:        Using default npm version: 6.4.1

 remote:        Resolving yarn version 1.x...

 remote:        Downloading and installing yarn (1.12.1)...

 remote:        Installed yarn 1.12.1

 remote:

 remote: -----> Building dependencies

 remote:        Installing node modules (yarn.lock)

 remote:        yarn install v1.12.1

 remote:        [1/4] Resolving packages...

 remote:        error Your lockfile needs to be updated, but yarn was run with `--frozen-lockfile`.

 remote:        info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

 remote:

 remote: -----> Build failed

 remote:

 remote:  !     Outdated Yarn lockfile

 remote:

 remote:        Your application contains a Yarn lockfile (yarn.lock) which does not

 remote:        match the dependencies in package.json. This can happen if you use npm

 remote:        to install or update a dependency instead of Yarn.

 remote:

 remote:        Please run the following command in your application directory and check

 remote:        in the new yarn.lock file:

 remote:

 remote:        $ yarn install

 remote:        $ git add yarn.lock

 remote:        $ git commit -m "Updated Yarn lockfile"

 remote:        $ git push heroku master

 remote:

 remote:        https://kb.heroku.com/why-is-my-node-js-build-failing-because-of-an-outdated-yarn-lockfile

 remote:

 remote:  !     Push rejected, failed to compile React.js (create-react-app) multi app.

 remote:

 remote:  !     Push failed

 remote: Verifying deploy...

 remote:

 remote: !       Push rejected to struttingpeacocksapp.

 remote:To https://git.heroku.com/struttingpeacocksapp.git

  ! [remote rejected] master -> master (pre-receive hook declined)

 error: failed to push some refs to 'https://git.heroku.com/struttingpeacocksapp.git'

---

我的package.json是以下代码

 {
   "name": "struttingpeacocks",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
     "react-scripts": "2.1.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
     "extends": "react-app"
   },
   "browserslist": [
     ">0.2%",
     "not dead",
     "not ie <= 11",
     "not op_mini all"
   ]
 }

---

我确实需要一些帮助。任何建议将不胜感激

Answer 1

如果您使用的是yarn，则更新yarn.lock文件、提交并重新部署。

但如果您正在使用npm，请更新您的package-lock.json尝试删除“yarn.lock”文件，然后再次尝试推送您的代码。确保“或yarn.lock”package-lock.json远程存在，但不能同时存在。

希望这可以帮助。