我被困在嘗試在 heroku 上部署我的 react 應用程式時，我已經添加了這個 buildpack
https://github.com/mars/create-react-app-buildpack
并將我的 github 帳戶連接到我的 heroku 帳戶。然后當我嘗試部署我的分支時，我收到了這個錯誤
-----> Building on the Heroku-20 stack
-----> Using buildpack: https://github.com/mars/create-react-app-buildpack
-----> React.js (create-react-app) multi app detected
=====! create-react-app-buildpack has reached end-of-life ??
This build may succeed, but the buildpack is no longer maintained.
On the Heroku-22 stack and beyond, this may fail to build at all.
Please consider migrating to https://nextjs.org or https://remix.run to develop React apps which are deployable using Heroku's Node.js buildpack https://github.com/heroku/heroku-buildpack-nodejs, or you may develop your own create-react-app deployment with Node.js and Nginx buildpacks.
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
=====> Detected Framework: Multipack
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
=====> Detected Framework: Node.js
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)
Resolving node version 16.x...
Downloading and installing node 16.17.0...
Using default npm version: 8.15.0
-----> Installing dependencies
Installing node modules
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-redux-firebase@3.0.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR! react@"^17.0.2" from the root project
npm ERR! peer react@">=16.3.0" from @emotion/core@10.1.1
npm ERR! node_modules/@emotion/core
npm ERR! @emotion/core@"^10.0.9" from react-select@3.2.0
npm ERR! node_modules/react-select
npm ERR! react-select@"3.2.0" from the root project
npm ERR! 63 more (@emotion/react, @emotion/styled, @fullcalendar/react, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.3.0" from react-redux-firebase@3.0.0
npm ERR! node_modules/react-redux-firebase
npm ERR! react-redux-firebase@"^3.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react@16.14.0
npm ERR! node_modules/react
npm ERR! peer react@"^16.3.0" from react-redux-firebase@3.0.0
npm ERR! node_modules/react-redux-firebase
npm ERR! react-redux-firebase@"^3.0.0" 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.tI25s/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.tI25s/_logs/2022-09-09T18_19_50_873Z-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 React.js (create-react-app) multi app.
! Push failed
包.json
{
"name": "ocyu-v1",
"version": "6.2.0",
"private": true,
"dependencies": {
"@date-io/core": "1.3.13",
"@date-io/date-fns": "1.3.13",
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@fullcalendar/daygrid": "5.9.0",
"@fullcalendar/interaction": "5.9.0",
"@fullcalendar/react": "5.9.0",
"@fullcalendar/timegrid": "5.9.0",
"@hookform/resolvers": "2.7.1",
"@material-ui/core": "4.12.3",
"@material-ui/data-grid": "4.0.0-alpha.37",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "4.0.0-alpha.60",
"@material-ui/pickers": "3.3.10",
"@mui/icons-material": "^5.8.4",
"@mui/material": "^5.8.6",
"@reduxjs/toolkit": "^1.8.3",
"apexcharts": "3.27.3",
"auth0-lock": "11.30.4",
"autosuggest-highlight": "3.1.1",
"axios": "0.21.1",
"axios-mock-adapter": "1.19.0",
"chart.js": "2.9.4",
"clsx": "1.1.1",
"cross-fetch": "3.1.4",
"date-fns": "2.23.0",
"draft-js": "0.11.7",
"draftjs-to-html": "0.9.1",
"firebase": "^8.10.1",
"formsy-react": "2.2.5",
"framer-motion": "4.1.17",
"google-map-react": "2.1.10",
"history": "4.10.1",
"i18next": "20.4.0",
"jsonwebtoken": "8.5.1",
"jss": "10.6.0",
"jss-plugin-extend": "10.7.1",
"jss-rtl": "0.3.0",
"jwt-decode": "2.2.0",
"keycode": "2.2.0",
"lodash": "4.17.21",
"marked": "0.8.2",
"material-ui-popup-state": "1.9.0",
"mobile-detect": "1.4.5",
"moment": "2.29.1",
"notistack": "1.0.10",
"path-to-regexp": "3.2.0",
"perfect-scrollbar": "1.5.2",
"prismjs": "1.24.1",
"prop-types": "15.7.2",
"qs": "6.10.1",
"raw-loader": "4.0.2",
"react": "^17.0.2",
"react-apexcharts": "1.3.9",
"react-autosuggest": "10.1.0",
"react-beautiful-dnd": "13.1.0",
"react-chartjs-2": "2.11.2",
"react-dom": "17.0.2",
"react-draft-wysiwyg": "1.14.7",
"react-draggable": "4.4.3",
"react-easy-crop": "^4.4.1",
"react-frame-component": "4.1.3",
"react-hook-form": "7.12.2",
"react-i18next": "11.11.4",
"react-masonry-css": "1.0.16",
"react-number-format": "4.7.3",
"react-paystack": "^4.0.1",
"react-popper": "1.3.11",
"react-redux": "^7.2.4",
"react-redux-firebase": "^3.0.0",
"react-router": "5.2.0",
"react-router-config": "5.1.1",
"react-router-dom": "5.2.0",
"react-scripts": "4.0.3",
"react-select": "3.2.0",
"react-spring": "^8.0.23",
"react-swipe": "^6.0.4",
"react-swipeable": "6.1.2",
"react-swipeable-views": "0.14.0",
"react-swipeable-views-utils": "0.14.0",
"react-table": "7.7.0",
"react-text-mask": "5.4.3",
"react-tinder-card": "^1.4.5",
"react-toastify": "^8.2.0",
"react-virtualized": "9.22.3",
"react-window": "1.8.6",
"react-with-gesture": "^4.0.2",
"reactfire": "^4.2.1",
"redux-firestore": "^0.5.8",
"redux-logger": "4.0.0",
"redux-persist": "^6.0.0",
"styled-components": "5.3.0",
"swipe-js-iso": "^2.1.5",
"typeface-poppins": "1.1.13",
"uuid": "^8.3.2",
"velocity-animate": "1.5.2",
"velocity-react": "1.4.3",
"web-vitals": "2.1.0",
"yup": "0.32.9"
},
"peerDependencies": {
"autoprefixer": "9.8.6",
"postcss": "7.0.36",
"react-dom": "17.0.2"
},
"resolutions": {
"react": "17.0.2",
"react-dom": "17.0.2",
"babel-loader": "8.1.0"
},
"devDependencies": {
"@babel/core": "7.14.5",
"@babel/node": "7.14.5",
"@babel/preset-env": "7.14.5",
"@craco/craco": "^6.2.0",
"@typescript-eslint/eslint-plugin": "^4.29.1",
"@typescript-eslint/parser": "^4.29.1",
"@yarnpkg/pnpify": "3.0.1",
"autoprefixer": "9.8.6",
"babel-eslint": "10.1.0",
"cross-env": "7.0.3",
"eslint": "7.32.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.9.0",
"eslint-plugin-import": "^2.24.0",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-unused-imports": "^1.1.3",
"js-beautify": "1.13.13",
"postcss": "7.0.36",
"prettier": "^2.3.2",
"promise": "8.1.0",
"source-map-explorer": "2.5.2",
"tailwindcss": "npm:@tailwindcss/[email protected]",
"tailwindcss-dir": "4.0.0"
},
"scripts": {
"start": "craco start",
"build": "cross-env GENERATE_SOURCEMAP=false craco build",
"test": "craco test --env=node",
"eject": "craco eject",
"build-docs": "find ./src/app/main/documentation/material-ui-components \\( -name '*.ts' -o -name '*.tsx' \\) -type f -delete && babel-node --presets @babel/preset-env src/app/main/documentation/material-ui-components/build.js",
"analyze": "craco build && source-map-explorer 'build/static/js/*.js' --html analyze-result.html",
"pnpify-sdk": "yarn pnpify --sdk",
"lint": "eslint"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 3 safari version"
]
}
}
我已經在 netlify 上部署了相同的專案，并且部署成功，但在 heroku 上部署時遇到問題。
uj5u.com熱心網友回復：
查看https://github.com/mars/create-react-app-buildpack Github 頁面，我看到該專案已經結束，他們說 Heroku 22 將不支持它。
經過長時間的有用運行后，這個 buildpack 現在已經到了生命的盡頭?? 底層靜態 Web 服務器 buildpack 已棄用，Heroku-22 或更新的堆疊將不再支持。
查看您的控制臺日志，我們可以看到您正在嘗試部署到 Heroku 22。
-----> Building on the Heroku-22 stack
最后，您可以在控制臺日志中看到一條警告，指出構建可能由于已棄用的構建包而失敗：
This build may succeed, but the buildpack is no longer maintained.
On the Heroku-22 stack and beyond, this may fail to build at all.
Please consider migrating to https://nextjs.org or https://remix.run to develop React apps which are deployable using Heroku's Node.js buildpack https://github.com/heroku/heroku-buildpack-nodejs, or you may develop your own create-react-app deployment with Node.js and Nginx buildpacks.
不幸的是，Heroku 22 不支持您使用的 buildpack，因此您將無法使用當前專案部署到 Heroku。你需要找到一個替代的 buildpack 或者使用 nextjs 或者 remix。
解決方案
一種快速的創可貼解決方案是將您正在使用的 Heroku 堆疊版本降級為支持此 buildpack 的版本。您可以更改現有應用程式的堆疊；然后執行的下一個構建將使用新堆疊：
heroku stack:set heroku-20
請注意，Heroku-20 堆疊將在 2025 年棄用。
編輯：
根本問題
由于依賴問題，Heroku 無法安裝依賴。
根解決方案
.npmrc您可以通過在專案的根目錄中使用以下標志創建一個檔案來強制在 Heroku 上安裝依賴項
force=true
legacy-peer-deps=true
將此推送到 Heroku 將解決您的問題。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/507286.html