When trying to push application to Heroku, I receive a Webpack error about version 5-CodePudding

Whenever I try to push my application to Heroku via git push heroku main I receive the following error:

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
remote:        This is no longer the case. Verify if you need this module and configure a polyfill for it.
remote:        
remote:        If you want to include a polyfill, you need to:
remote:         - add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
remote:         - install 'stream-http'
remote:        If you don't want to include a polyfill, you can use an empty module like this:
remote:         resolve.fallback: { "http": false }
remote:        
remote:        
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! [email protected] build: `react-scripts build`
remote: npm ERR! Exit status 1
remote: npm ERR! 
remote: npm ERR! Failed at the [email protected] build script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Before this error, I was receiving errors that "path" was not found nor "os" so I deleted those imports from my code and now it is saying what is stated above. It seems like I have done everything.

The steps I took to arrive here are:

I have been trying to push my application to Heroku via the console, so I did a git init with the already-created repo I made for my project.
I did my first commit so doing the heroku command could notice that my git existed.
I have pushed to Heroku in the following ways: git push heroku main, git push heroku master, git push heroku HEAD:master, git push heroku HEAD:main --force and I keep getting the same error
I have tried adding my "engine" to package.json, yet that does not help.
I have tried adding a fallback to webpack.config.js for both routes, however, that does not seem to work.

Please help me solve this issue. Here is my code for index.js, App.js and package.json:

index.js

const express = require('express')
const morgan = require('morgan')
const app = express()
app.use(express.static('build'))

app.use(express.json())

morgan.token("code", function getCode(req) {
  return JSON.stringify(req.body);
 });

app.use(morgan(':method :url :status :response-time :code'))

let date = new Date('April 18, 2022 07:06:00');

let people = [
  { 
    "id": 1,
    "name": "Arto Hellas", 
    "number": "040-123456"
  },
  { 
    "id": 2,
    "name": "Ada Lovelace", 
    "number": "39-44-5323523"
  },
  { 
    "id": 3,
    "name": "Dan Abramov", 
    "number": "12-43-234345"
  },
  { 
    "id": 4,
    "name": "Mary Poppendieck", 
    "number": "39-23-6423122"
  }
]

app.get("/", (req, res) => {
  res.send("Landing page")
})

app.get("/api/persons", (req, res) => {
  res.status(200).json(people)
})

app.get("/info", (req, res) => {
  res.status(200).send(`Phonebook has info for ${people.length} people ${date}`)
})

app.get('/api/persons/:id', (request, response) => {
  const id = request.params.id
  const person = people.find(person => person.id === Number(id))
  response.json(person)
})

app.delete('/api/persons/:id', (request, response) => {
  const id = Number(request.params.id)
  people = people.filter(person => person.id !== id)

  response.status(204).end()
})

app.post('/api/persons', (request, response) => {
  let person = {}
  const values = Object.values(request.body)
  const keys = Object.keys(request.body)
  if (!(keys.includes("name"))) return response.status(400).send({error: "A name must be given"})
  else if ((people.some(el => el.name === values[0]))) return response.status(406).send({error: "Name must be unique"})
  person = {
    id: Math.floor(Math.random() * 100   1),
    name: values[0],
    number: values[1]
  }
  people = people.concat(person)
  response.json(people)
})

const PORT = process.env.PORT || 3001

app.listen(PORT, () => {
  console.log(`Listening to port at ${PORT}`)
})

App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;

package.json

{
  "name": "phonebook",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "node": "14.19"
  },
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "express": "^4.17.3",
    "morgan": "^1.10.0",
    "nodemon": "^2.0.15",
    "path-browserify": "^1.0.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.1",
    "util": "^0.12.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "node ./src/index.js",
    "dev": "nodemon index.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Procfile

web: npm start

Image of my directories

Please do not refer me to another stack overflow, I have read and tried those solutions yet they do not seem to work. I have been trying to figure this out for countless hours.

EDIT: After applying the fallback of "resolve.fallback { "http": false }, it gives me this additional error :

Module not found: Error: Can't resolve 'http' in '/tmp/build_c86d77e6/node_modules/express/lib'

If I am suppose to locate this folder, where would I find it?

CodePudding user response：

So i found the solution to my own problem. I changed 'react-scripts' from version 5.0.1 to version 4.0.3, then I did a npm install to change anything due to this version change and it worked! I did this step previously but it did not work but this time I did a npm install after version change which fixed it.