Heroku react应用在加载时因/路径错误而崩溃

时间:2019-04-15 08:43:06

标签: reactjs heroku

我正在尝试将应用程序部署到heroku,构建成功,但是如果尝试打开它,则会得到:

2019-04-15T08:32:43.993726+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=URL request_id=b9a85cad-9d96-428b-8843-342e2a7372da fwd="88.119.49.13" dyno= connect= service= status=503 bytes= protocol=https
2019-04-15T08:32:44.594217+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=URL request_id=c3997cb0-971e-4918-9eb0-132f0fd3c2eb fwd="88.119.49.13" dyno= connect= service= status=503 bytes= protocol=https

我的React应用程序构建时没有create-react-appreact-scripts,我自己配置​​了webpack。如果我运行npm run dev,则在localhost上一切正常。这是我的package.json

{
  "name": "task-frontend",
  "version": "1.0.0",
  "description": "A frontend task.",
  "main": "index.js",
  "engines": {
    "node": "10.15.3"
  },
  "scripts": {
    "heroku-prebuild": "npm install --dev",
    "dev": "node_modules/.bin/webpack-dev-server --mode development --open --hot",
    "start": "node_modules/.bin/webpack --config webpack.config.js --mode development"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "dependencies": {
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "1.1.1",
    "resolve-url-loader": "^3.1.0",
    "serve": "^11.0.0",
    "ttf-loader": "^1.0.2",
    "webpack": "4.19.1",
    "webpack-cli": "2.1.4",
    "html-webpack-plugin": "^3.2.0",
    "html-loader": "^0.5.5",
    "@babel/core": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "@babel/preset-react": "^7.0.0",
    "babel": "^6.23.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^2.1.1",
    "http-server": "^0.11.1",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2"
  },
  "devDependencies": {
    "webpack-dev-server": "^3.3.1"
  }
}

如您所见,我有heroku-prebuild脚本,它安装了dev依赖项,并且Heroku实例运行了我的start脚本。目前,它以开发模式运行,稍后将转为生产。

起初我以为可能是因为我没有定义任何路由,但是我相信这几乎不是一个例子。

我的webpack.config.js文件:

const HtmlWebPackPlugin = require("html-webpack-plugin");
const { resolve } = require('path');

module.exports = {
  module: {
    rules: [

      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        }
      },
      {
        test:/\.(s*)css$/,
        use:['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.(png|jpg|svg|jpeg)$/,
        loader: 'url-loader'
      },
      {
        test: /\.(ttf|woff|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader'
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: resolve(__dirname, 'src/public', 'index.html'),
      filename: "./index.html"
    })
  ]
};

如果需要任何其他信息,请告诉我,我将更新我的帖子。

0 个答案:

没有答案