尝试在heroku上部署react应用程序时出现错误

zqdjd7g9  于 2022-11-13  发布在  React
关注(0)|答案(1)|浏览(189)

我尝试在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

package.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/postcss7-compat@2.2.7",
        "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上部署时遇到了问题。

heroku

1条答案

按热度按时间
ltskdhd1

ltskdhd11#

看看https://github.com/mars/create-react-app-buildpackGithub page，我看到这个项目已经结束了，他们说它不会在Heroku 22+上得到支持。
经过长时间的有效运行后，此构建包现在已到了生命周期的尽头🌅。底层静态Web服务器构建包已弃用，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不支持您正在使用的构建包，因此您将无法使用当前项目部署到Heroku。您需要找到替代构建包或使用nextjs或remix。

解决方案

一个快速的解决方案是将您正在使用的Heroku堆栈版本降级为支持此构建包的版本。然后，执行的下一个构建将使用新的堆栈：

heroku stack:set heroku-20

要知道Heroku-20堆栈将在2025年被淘汰。
编辑：

根本问题

由于依赖项问题，Heroku无法安装依赖项。

根解决方案

通过在项目的根目录中创建一个带有以下标志的.npmrc文件，可以强制对Heroku安装依赖项

force=true
legacy-peer-deps=true

把这个推给Heroku就能解决你的问题。

赞(0）分享  回复(0）举报  2022-11-13
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com