Heroku Shopify Application Error 'npm ERR! ERESOLVE unable to resolve dependency tree'

Question

Greetings I have a problem with Heroku because it's don't want to install legacy packages for my Shopify app, my Shopify app is on Github and I just set up everything that my application needs, but when I deploy the main branch on Heroku I get this error in Heroku console below, can someone help me fix this?

-----> Building on the Heroku-20 stack
-----> Using buildpack: heroku/nodejs
-----> Node.js app detected
       
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       USE_NPM_INSTALL=true
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=false
       
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)
       
       Resolving node version 16.x...
       Downloading and installing node 16.14.0...
       Using default npm version: 8.3.1
       
-----> Restoring cache
       Caching has been disabled because NODE_MODULES_CACHE=false
       
-----> Installing dependencies
       Installing node modules (package.json + package-lock)
       npm ERR! code ERESOLVE
       npm ERR! ERESOLVE unable to resolve dependency tree
       npm ERR! 
       npm ERR! While resolving: [email protected]
       npm ERR! Found: [email protected]
       npm ERR! node_modules/react
       npm ERR!   react@"^16.10.1" from the root project
       npm ERR! 
       npm ERR! Could not resolve dependency:
       npm ERR! peer react@"^17.0.2 || ^18.0.0-0" from [email protected]
       npm ERR! node_modules/next
       npm ERR!   next@"^12.0.2" from the root project
       npm ERR! 
       npm ERR! Fix the upstream dependency conflict, or retry
       npm ERR! this command with --force, or --legacy-peer-deps
       npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
       npm ERR! 
       npm ERR! See /tmp/npmcache.CTfHl/eresolve-report.txt for a full report.
       
       npm ERR! A complete log of this run can be found in:
       npm ERR!     /tmp/npmcache.CTfHl/_logs/2022-02-10T12_18_50_156Z-debug-0.log
-----> Build failed
       
       We're sorry this build is failing! You can troubleshoot common issues here:
       https://devcenter.heroku.com/articles/troubleshooting-node-deploys
       
       Some possible problems:
       
       - Node version not specified in package.json
         https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
       
       Love,
       Heroku
       
 !     Push rejected, failed to compile Node.js app.
 !     Push failed

My package.json

{
  "name": "shopify-app-node",
  "version": "1.0.0",
  "description": "Shopify's node app for CLI tool",
  "scripts": {
    "test": "jest",
    "dev": "cross-env NODE_ENV=development nodemon ./server/index.js --watch ./server/index.js",
    "build": "NEXT_TELEMETRY_DISABLED=1 next build",
    "start": "cross-env NODE_ENV=production node ./server/index.js"
  },
  "engines": {
    "node": "16.14.0",
    "npm": "8.4.1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Shopify/shopify-app-node.git"
  },
  "author": "Shopify Inc.",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/shopify/shopify-app-node/issues"
  },
  "dependencies": {
    "@babel/core": "7.12.10",
    "@babel/polyfill": "^7.6.0",
    "@babel/preset-env": "^7.12.11",
    "@babel/register": "^7.12.10",
    "@shopify/app-bridge-react": "^2.0.2",
    "@shopify/app-bridge-utils": "^2.0.2",
    "@shopify/koa-shopify-auth": "^4.1.2",
    "@shopify/polaris": "^6.2.0",
    "apollo-boost": "^0.4.9",
    "axios": "^0.25.0",
    "cross-env": "^7.0.3",
    "dotenv": "^8.2.0",
    "graphql": "^14.5.8",
    "isomorphic-fetch": "^3.0.0",
    "koa": "^2.13.1",
    "koa-bodyparser": "^4.3.0",
    "koa-compress": "^5.1.0",
    "koa-cors": "0.0.16",
    "koa-logger": "^3.2.1",
    "koa-router": "^10.0.0",
    "koa-session": "^6.1.0",
    "mysql2": "^2.3.3",
    "next": "^12.0.2",
    "next-env": "^1.1.0",
    "node-fetch": "^2.6.7",
    "react": "^16.10.1",
    "react-apollo": "^3.1.3",
    "react-dom": "^16.10.1",
    "sequelize": "^6.13.0",
    "slugify": "^1.6.5",
    "validator": "^13.7.0",
    "webpack": "^4.44.1"
  },
  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.12.10",
    "@babel/preset-stage-3": "^7.0.0",
    "babel-jest": "26.6.3",
    "babel-register": "^6.26.0",
    "enzyme": "3.11.0",
    "enzyme-adapter-react-16": "1.15.6",
    "husky": "^4.3.6",
    "jest": "26.6.3",
    "lint-staged": "^10.5.4",
    "nodemon": "^2.0.7",
    "prettier": "2.2.1",
    "react-addons-test-utils": "15.6.2",
    "react-test-renderer": "16.14.0"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,css,json,md}": [
      "prettier --write"
    ]
  }
}

Answer 1

1. I install these old packages with npm install --force
2. I run npm outdated
3. I see what packages are in red
4. I do upgrade from the current version to the wanted version with npm install --save packagename@wanted_version
5. Remove any empty files that you may have in your project
6. Uploaded to git
7. Deploy to Heroku