嘗試將應用程序推送到 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.

在此錯誤之前，我收到錯誤消息，指出“路徑”和“操作系統”均未找到，因此我從我的代碼中刪除了這些導入，現在它說的是上述內容。 好像我什么都做了。

我到達這里所采取的步驟是：

1. 我一直在嘗試通過控制台將我的應用程序推送到 Heroku，所以我使用我為項目創建的回購協議執行了 git 初始化。

2. 我做了第一次提交，所以執行 heroku 命令可以注意到我的 git 存在。

3. 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

4. 我嘗試將我的“引擎”添加到 package.json，但這沒有幫助。

5. 我嘗試為兩條路線添加到 webpack.config.js 的回退，但是，這似乎不起作用。

請幫我解決這個問題。 這是我的 index.js、App.js 和 package.json 代碼：

索引.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}`)
})

應用程序.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"
    ]
  }
}

簡介

web: npm start

我的目錄的圖像

請不要讓我參考另一個堆棧溢出，我已經閱讀並嘗試了這些解決方案，但它們似乎不起作用。 無數個小時以來，我一直在努力解決這個問題。

編輯：應用“resolve.fallback {“http”：false}的回退后，它給了我這個額外的錯誤：

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

如果我想找到這個文件夾，我會在哪里找到它？

Answer 1

所以我找到了解決我自己問題的方法。 我將“react-scripts”從 5.0.1 版更改為 4.0.3 版，然后我進行了npm install以更改由於此版本更改而導致的任何內容並且它有效！ 我之前執行過此步驟，但它沒有用，但這次我在版本更改后npm install修復了它。