无法将 Heroku App 设置为运行，但我可以在本地将其设置为运行

Question

说当我输入 git push heroku main 时 webpack 编译成功但是当我检查 heroku logs --tail 时它显示我的构建失败并且我的应用程序的 link 转到默认的初始 heroku 页面.

我尝试通过添加

来更新我的webpack.config.js

  resolve: {
    extensions: ['.js', '.jsx'],
  },

然后像这样删除我对实际 React 组件的所有扩展

Before:
import SearchContainer from './SearchContainer.jsx';
import Promoted from './Promoted.jsx';
import Products from './Products.jsx';
After:
import SearchContainer from './SearchContainer';
import Promoted from './Promoted';
import Products from './Products';

我还多次仔细检查了我的文件是否区分大小写，确保使用以下命令在 git 上重新添加文件并返回检查所有内容是否匹配：

git rm -rf --cached .
git add .

真的被这个难住了。我申请的 link 是 here。当我尝试在 Netlify 上部署时，也发生了类似的事情。一切都在本地工作，然后在网站上运行时崩溃。在尝试调试 Netlfiy 一天的大部分时间后，我切换到 Heroku。如果有人有解决方案，我将非常感激。下面是我从 Netlify 得到的错误消息，这可能有助于调试 Heroku 发生的事情，因为 Heroku 在其构建失败输出中没有描述性。

7:14:01 PM: ERROR in main
7:14:01 PM: Module not found: Error: Can't resolve 'babel-loader' in '/opt/build/repo'
resolve 'babel-loader' in '/opt/build/repo'
7:14:01 PM:   Parsed request is a module
7:14:01 PM:   using description file: /package.json (relative path: .opt/build/repo)
7:14:01 PM:     resolve as module
7:14:01 PM:       /opt/build/repo/node_modules doesn't exist or is not a directory
      /opt/build/node_modules doesn't exist or is not a directory
      /opt/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
7:14:01 PM: webpack 5.30.0 compiled with 1 error in 54 ms
7:14:01 PM: assets by status 670 bytes [cached] 1 asset
7:14:01 PM: ERROR in main
7:14:01 PM: Module not found: Error: Can't resolve './client/src/index' in '/opt/build/repo'
resolve './client/src/index' in '/opt/build/repo'
7:14:01 PM:   using description file: /package.json (relative path: .opt/build/repo)
7:14:01 PM:     Field 'browser' doesn't contain a valid alias configuration
    using description file: /package.json (relative path: .opt/build/repo/client/src/index)
7:14:01 PM:       no extension
7:14:01 PM:         Field 'browser' doesn't contain a valid alias configuration
        /opt/build/repo/client/src/index doesn't exist
      .js
7:14:01 PM:         Field 'browser' doesn't contain a valid alias configuration
        /opt/build/repo/client/src/index.js doesn't exist
      .jsx
7:14:01 PM:         Field 'browser' doesn't contain a valid alias configuration
        /opt/build/repo/client/src/index.jsx doesn't exist
      as directory
7:14:01 PM:         /opt/build/repo/client/src/index doesn't exist
7:14:01 PM: webpack 5.30.0 compiled with 1 error in 11 ms
7:14:06 PM: Build exceeded maximum allowed runtime

Answer 1

我推荐的几件事：

build 命令有一个 --watch 选项。您的本地开发可能需要观察者，但它不在服务器上。它只是挂在构建管道中，并可能使构建超时。有两个 webpack 配置（来自一个普通配置）；一个用于开发，一个用于生产（服务器）：

webpack.common.config.js:

const path = require('path');

module.exports = {
  entry: './client/src/index',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './client/dist'),
    publicPath: '/'
  },
  resolve: {
    modules: ['node_modules'],
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
};

webpack.development.config.js:

const CommonWebpack = require('./webpack.common.config');

module.exports = {
  ...CommonWebpack,
  watch: true,
  mode: 'development',
  devtool:'inline-source-map'
};

webpack.production.config.js:

const CommonWebpack = require('./webpack.common.config');

module.exports = {
  ...CommonWebpack,
  watch: false,
  mode: 'production',
  devtool: false,
};

有单独的watch 命令用于本地开发。例如：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "nodemon server",
  "build": "webpack --config webpack.production.config.js",
  "client-development": "webpack --config webpack.development.config.js"
}

服务器上不需要nodemon，把你的Procfile改成

web: node server/index.js

Express 应用程序的硬编码端口为 3000。 Heroku 根据自己的内部系统为每个应用程序分配一个端口（通过运行环境）。改听：

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`listening on port ${PORT}!`);
});

无法将 Heroku App 设置为运行，但我可以在本地将其设置为运行

Trouble getting Heroku App to run but I can get it to run locally

heroku

reactjs

webpack

netlify

无法将 Heroku App 设置为 运行，但我可以在本地将其设置为 运行

Trouble getting Heroku App to run but I can get it to run locally

heroku

reactjs

webpack

netlify

无法将 Heroku App 设置为运行，但我可以在本地将其设置为运行