尝试将应用程序推送到 Heroku 时，我收到有关版本 5 的 Webpack 错误

Question

每当我尝试通过 git push heroku main 将我的应用程序推送到 Heroku 时，我都会收到以下错误：

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! phonebook@0.1.0 build: `react-scripts build`
remote: npm ERR! Exit status 1
remote: npm ERR! 
remote: npm ERR! Failed at the phonebook@0.1.0 build script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

在出现这个错误之前，我收到的错误是找不到“路径”和“os”，所以我从我的代码中删除了ose 导入，现在它说的是什么多于。好像什么都做了。

我到达这里的步骤是：

我一直在尝试通过控制台将我的应用程序推送到 Heroku，所以我用我为我的项目创建的回购做了 git 初始化。
我做了第一次提交，所以执行 heroku 命令可以注意到我的 git 存在。
我已经通过以下方式推送到Heroku： git push heroku main, git push heroku master, git push heroku HEAD:master, git push heroku HEAD:main --force 我一直收到同样的错误
我已经尝试将我的“引擎”添加到 package.json，但这没有帮助。
我已经尝试为两条路线添加 webpack.config.js 的回退，但是，这似乎不起作用。

请帮我解决这个问题。这是我的 index.js、App.js 和 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

我的目录图片

请不要向我推荐另一个堆栈溢出，我已经阅读并尝试了 ose 解决方案，但它们似乎不起作用。无数个小时以来，我一直在努力解决这个问题。

编辑： 在应用“resolve.fallback { “http”: false } 的回退后，它给了我这个 additional 错误：

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

如果我要os找到这个文件夹，我会在哪里找到它？

Answer 1

所以我找到了解决我自己问题的方法。我将 'react-scripts' 从版本 5.0.1 更改为版本 4.0.3，然后我做了一个 npm install 来更改由于此版本更改而发生的任何事情并且它起作用了！我之前执行过此步骤，但没有成功，但这次我在版本更改后执行了 npm install 修复了它。

尝试将应用程序推送到 Heroku 时，我收到有关版本 5 的 Webpack 错误

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

javascript

heroku

node.js

express