reactjs - 在heroku中部署Web应用程序时出现应用程序错误

Question

我一直在尝试将我的网络应用程序部署到 heroku，但无论我做什么都会说应用程序错误。这是我的项目结构

myApp
  |_ .vscode
  |_ node_modules
  |_ package.json
  |_ Procfile
  |_ .babelrc
  |_ webpack.config.js
  |_ src
      |_ static
      |_ app.js
      |_ experiment.js
      |_ index.js
      |_ timeline.js
      |_ index.html

我的 package.json 看起来像这样

{
  "name": "webpackreact",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development --open --hot",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jspsych-react": "github:openexp/jspsych-react#v0.4.0",
    "jspsych-react-cra": "git+https://[e-mail]/neurotype/jspsych-react-cra.git",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/preset-env": "^7.14.7",
    "@babel/preset-react": "^7.14.5",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^5.3.2",
    "webpack": "^5.50.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  }
}

我有 procfile 作为

web:node node_modules/webpack-dev-server/bin/webpack-dev-server.js

这是我的 webpack.config.js 文件

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'index_bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
        ]
}

这是来自 heroku logs --tail -a myappname 的日志

第一张日志图片

第二个日志图像

谢谢

标签： reactjsherokuwebpack