Outdated yarn lockfile error on deploying app on heroku

I have successfully signed up on Heroku but when I git push and ran the app, it says

Application error. An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command

Then, I went to Heroku from the web browser and under "Manual deploy", I click "Deploy Branch" and get this list of errors:

    -----> Node.js app detected

    -----> Creating runtime environment

           NPM_CONFIG_LOGLEVEL=error
           NODE_ENV=production
           NODE_MODULES_CACHE=true
           NODE_VERBOSE=false

    -----> Installing binaries
           engines.node (package.json):  unspecified
           engines.npm (package.json):   unspecified (use default)
           engines.yarn (package.json):  unspecified (use default)

           Resolving node version 10.x...
           Downloading and installing node 10.15.1...
           Using default npm version: 6.4.1
           Resolving yarn version 1.x...
           Downloading and installing yarn (1.14.0)...
           Installed yarn 1.14.0

    -----> Building dependencies
           Installing node modules (yarn.lock)
           yarn install v1.14.0
           [1/4] Resolving packages...
           error Your lockfile needs to be updated, but yarn was run with `--frozen-lockfile`.
           info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
    -----> Build failed
     !     Outdated Yarn lockfile
           Your application contains a Yarn lockfile (yarn.lock) which does not
           match the dependencies in package.json. This can happen if you use npm
           to install or update a dependency instead of Yarn.
           Please run the following command in your application directory and check
           in the new yarn.lock file:
           $ yarn install
           $ git add yarn.lock
           $ git commit -m "Updated Yarn lockfile"
           $ git push heroku master

           https://kb.heroku.com/why-is-my-node-js-build-failing-because-of-an-outdated-yarn-lockfile
     !     Push rejected, failed to compile Node.js app.
     !     Push failed

Can someone give me some pointers? I have no idea why it mentioned yarn. Here is my package.json:

    {
      "name": "tictacttoe",
      "version": "0.1.0",
      "private": true,
      "engines": {
        "node": "v10.13.0",
        "npm": "6.4.1"
      },
      "dependencies": {
        "react": "^16.7.0",
        "react-dom": "^16.7.0",
        "react-scripts": "2.1.3"
      },
      "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"
      ],
      "devDependencies": {
        "webpack": "^4.19.1",
        "webpack-dev-server": "^3.1.14"
      }
    }

Solution

I'm not sure if it's because of heroku or some faulty config at your end...but basically heroku is running yarn to install your dependencies, and since you dont have a yarn.lock (or have an outdated one), it is resulting in an error.

Try installing yarn globally on your system and running yarn on your project's root directory. After that if you commit the yarn.lock file it might work.

AFAIK, heroku detects your package manager from whether or not you have yarn.lock and package-lock.json in it. So you should either delete yarn.lock, or update it by running yarn in your project's root directory.