React推送到Heroku并获得以下错误

4

初学者 - 第一次尝试将React前端推送到Heroku。我已经尝试了Heroku要求的步骤,但仍然不起作用。当我在谷歌中搜索并实施建议时,我认为我让情况变得更糟了......(顺便说一下,我在我的index.js文件中有这个:import {Provider} from 'react-redux')

以下是错误列表:

 git push heroku master
Enumerating objects: 39, done.
Counting objects: 100% (39/39), done.
Delta compression using up to 8 threads
Compressing objects: 100% (37/37), done.
Writing objects: 100% (39/39), 140.24 KiB | 6.37 MiB/s, done.
Total 39 (delta 5), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NPM_CONFIG_PRODUCTION=true
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:        NODE_VERBOSE=false
remote:
remote: -----> Installing binaries
remote:        engines.node (package.json):  unspecified
remote:        engines.npm (package.json):   unspecified (use default)
remote:
remote:        Resolving node version 10.x...
remote:        Downloading and installing node 10.16.3...
remote:        Using default npm version: 6.9.0
remote:
remote: -----> Installing dependencies
remote:        Installing node modules (package.json + package-lock)
remote:
remote:        > core-js@2.6.9 postinstall /tmp/build_59a9e22c84972b1649248fcdd072b559/node_modules/babel-runtime/node_modules/core-js
remote:        > node scripts/postinstall || echo "ignore"
remote:
remote:
remote:        > core-js-pure@3.1.4 postinstall /tmp/build_59a9e22c84972b1649248fcdd072b559/node_modules/core-js-pure
remote:        > node scripts/postinstall || echo "ignore"
remote:
remote:        added 1386 packages from 676 contributors and audited 902051 packages in 34.626s
remote:        found 2 vulnerabilities (1 high, 1 critical)
remote:          run `npm audit fix` to fix them, or `npm audit` for details
remote:
remote: -----> Build
remote:        Running build
remote:
remote:        > kayaks@0.1.0 build /tmp/build_59a9e22c84972b1649248fcdd072b559
remote:        > react-scripts build
remote:
remote:        Creating an optimized production build...
remote:        Failed to compile.
remote:
remote:        ./src/index.js
remote:        Cannot find module: 'react-redux'. Make sure this package is installed.
remote:
remote:        You can install this package by running: npm install react-redux.
remote:
remote:
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! kayaks@0.1.0 build: `react-scripts build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the kayaks@0.1.0 build script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /tmp/npmcache.P3JWe/_logs/2019-10-08T00_50_49_274Z-debug.log
remote:
remote: -----> Build failed
remote:
remote:        We're sorry this build is failing! You can troubleshoot common issues here:
remote:        https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:
remote:        Some possible problems:
remote:
remote:        - Node version not specified in package.json
remote:          https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
remote:
remote:        - A module may be missing from 'dependencies' in package.json
remote:          https://devcenter.heroku.com/articles/troubleshooting-node-deploys#ensure-you-aren-t-relying-on-untracked-dependencies
remote:
remote:        Love,
remote:        Heroku
remote:
remote:  !     Push rejected, failed to compile Node.js app.
remote:
remote:  !     Push failed
remote: Verifying deploy...
remote:
remote: !   Push rejected to kayaks-frontend.
remote:

package.json

{
  "name": "kayaks",
  "version": "0.1.0",
  "private": true,
  "engines": {
    "npm": "6.11.3",
    "node": "12.11.0",
  },
  "dependencies": {
    "cuid": "^1.3.8",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-date-picker": "^7.8.1",
    "react-datepicker": "^2.8.0",
    "react-dom": "^16.8.6",
    "react-dropdown-select": "^3.3.1",
    "react-redux": "^7.1.1",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1",
    "react-semantic-ui-datepickers": "^1.11.0",
    "redux": "^4.0.4",
    "redux-form": "^8.1.0",
    "redux-thunk": "^2.3.0",
    "semantic-ui": "^2.4.2",
    "semantic-ui-calendar-react": "^0.15.2",
    "semantic-ui-css": "2.4.1",
    "semantic-ui-react": "^0.87.3",
    "typescript": "^3.6.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
2个回答

0
要在Heroku上托管create-react-app,您必须提供/build文件夹。您可以使用node.js express服务器轻松完成此操作。
首先,您需要安装express,以便可以运行npm i express --saveyarn add express
然后,只需将server.js文件添加到项目的根目录中,将/build文件夹作为静态内容提供,并将所有请求路由到/build/index.html
const path = require('path');
const express = require('express');

const app = express();
const port = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname, 'build')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build/index.html'));
});

app.listen(port, () => {
  console.log(`The server is running on port ${port}!`);
});

最后,您需要更新您的npm run start脚本为node server.js,并且仅在开发过程中使用react-scripts start
"scripts": {
    "start": "node server.js",
    "dev": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

当部署新版本时,Heroku将运行您的npm run build,然后运行您的npm run start脚本。


嗨Diogo,谢谢回复!我尝试了你的建议,但还是不起作用。以下是错误列表。 - cynthia7117

0
Cannot find module: 'react-redux'. Make sure this package is installed

这是你的问题。你安装了吗?尝试运行npm i,然后部署。


嗨,lakerskill - 是的,我已经尝试过了,但没有成功。它在我的package.json文件中列出,并且我的应用程序在本地工作,但无法成功部署... - cynthia7117

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接