Question

这里的新手-第一次尝试将前端反应推送到heroku。我尝试了heroku的要求，但仍然无法正常工作。认为我通过谷歌搜索时实施建议使情况变得更糟...（顺便说一句，这是我的index.js文件：从“ react-redux”导入{Provider}）

以下错误列表

♥ 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"
    ]
  }
}

Answer 1

要在Heroku上托管create-react-app，必须提供/build文件夹。您可以使用node.js Express服务器非常轻松地做到这一点。

首先，您需要安装Express，以便可以运行npm i express --save或yarn 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脚本。

Answer 2

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

这是您的问题。你安装了这个吗？尝试运行npm i，然后进行部署。

反应推送到heroku并得到以下错误

2 个答案: