Javascript Heroku-Express和React应用程序在部署时显示空白屏幕

我很难弄清楚这里到底发生了什么。当我将我的React/Express应用程序部署到Heroku时，所有的构建和部署都没有错误，但我的React前端是完全空白的

我在浏览器控制台中遇到以下错误：

 Uncaught SyntaxError: Unexpected token < 1.b1e0c624.chunk.js:1
 Uncaught SyntaxError: Unexpected token < main.48d62be5.chunk.js:1 
 manifest.json:1 Manifest: Line: 1, column: 1, Unexpected token.

这就是我的React apps

package.json

的顶部部分（为了简洁起见，代码进行了编辑）的样子：

{
  "name": "client",
  "version": "0.1.0",
  "homepage": "https://radiant-tor-66940.herokuapp.com/",
  "private": true,
}

我认为在客户端的

包.json

中设置主页可以做到这一点，但什么也做不到。我真的不知道在这里该做什么。我在想，可能有什么东西偏离了路径或类似的东西

更新

这对我来说仍然是个问题。下面我分享了更多的代码，希望这能对我的情况有所帮助。这次加载页面时，我遇到一个新错误：

{"errno":-2,"code":"ENOENT","syscall":"stat","path":"/app/server/client/build/index.html","expose":false,"statusCode":404,"status":404}

上述错误是从以下代码中的错误块发送的：

app.get('*', function(req, res) {
  res.sendFile('/client/build/index.html', { root: __dirname }, function(err) {
    if (err) {
      res.status(500).send(err);
    }
  });
});

我已经更改了我的

server.js

文件，以便像这样为

index.js

文件提供服务，而不是使用模板文本（此时尝试任何操作）：

这是我的服务器的根级别

package.json

。我已经添加了

heroku postbuild

脚本来构建位于

client

中的React应用程序：

      "scripts": {
        "test": "jest",
        "start": "node server/server.js",
        "heroku-postbuild": "cd client && npm install --only=dev && npm install && npm run build"
      },
  "engines": {
    "node": "~9.10.1",
    "npm": "~5.6.0"
  }

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.0",
    "lodash": "^4.17.11",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.3",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "styled-components": "^4.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "proxy": "http://localhost:8000/"
}

以下是位于

/client

中的React应用程序的

包.json

：

      "scripts": {
        "test": "jest",
        "start": "node server/server.js",
        "heroku-postbuild": "cd client && npm install --only=dev && npm install && npm run build"
      },
  "engines": {
    "node": "~9.10.1",
    "npm": "~5.6.0"
  }

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.0",
    "lodash": "^4.17.11",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.3",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "styled-components": "^4.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "proxy": "http://localhost:8000/"
}

{
“名称”：“客户”，
“版本”：“0.1.0”，
“私人”：没错，
“依赖项”：{
“axios”：“^0.19.0”，
“lodash”：“^4.17.11”，
“反应”：“^16.7.0”，
“react dom”：“^16.7.0”，
“react redux”：“^6.0.0”，
“反应路由器dom”：“^4.3.1”，
“反应脚本”：“2.1.3”，
“redux”：“^4.0.1”，
“redux thunk”：“^2.3.0”，
“样式化组件”：“^4.1.3”
},
“脚本”：{
“开始”：“反应脚本开始”，
“构建”：“反应脚本构建”，
“测试”：“反应脚本测试”，
“弹出”：“反应脚本弹出”
},
“eslintConfig”：{
“扩展”：“反应应用程序”
},
“浏览者”：[
">0.2%",
“没有死”，
“不是ie因为我们无法访问您的服务器，所以很难说出问题背后的原因。我猜您错误配置了express服务器，因为这三条错误消息表明，服务器只返回
index.html
文件

由于HTML不是有效的Javascript，因此会出现意外的令牌错误

我还想，下面这一行完全没有效果，这意味着这个文件夹中没有文件（或者不是你想访问的文件）

问题出现在我的
server.js
文件中

最初它是
express.static（path\u join（\u dirname，'/client/build'））

它必须是：
express.static（path\u join（\uu dirname，../client/build'））

这种情况是因为我的
server.js
文件位于
/server
中，它试图在
/server
中查找
/client/build
，而不是在Heroku上查找根应用程序目录。
Heroku日志--tail

是否添加了任何细节？是否可以插入构建脚本-a

webpack.config.js

有什么吗？如果不知道文件是否生成，很难说为什么不加载。@stever我希望，我在

path:/"

错误，当请求

index.html

文件500时，我可以看到它注销。它告诉我有500个，但没有给出任何关于原因的建议。@felix我已经更新了原始帖子，通过

Heroku bash

发布构建和部署来显示Heroku目录。我还包括了

他的构建脚本roku postbuild

。目录上的~表示您在用户的主目录中。您可以输出发送到sendFile函数的内容吗？使用

heroku运行bash

我可以

cd client/build

在heroku服务器上运行，并且可以看到当我从本地部署时，react应用程序确实在

client/build中生成并具有文件

，其中一个是

index.html

。我的印象是React应用程序是通过

index.html

文件提供的

，因为这是应用程序开始时的根。当然，你的应用程序是由你的
index.html
提供的，因为React需要一个主文档和根元素。但是你的问题在于服务器的错误响应。尽管有
/static/main.48d62be5.chunk.js
的请求，服务器仍以
index.html
响应。该文件是否存在于你的文件夹中？我的文件夹中没有该文件。是否会在运行构建过程时创建并放在那里？我不知道。这取决于你的bbuild进程。它是从您的（生成的？
index.html
请求的。我想它应该在那里。请注意，文件名中的哈希值可能在每次运行构建进程时都会发生变化。
index.html
肯定在那里，当我
console.log
退出
${\uu dirname}/client/build/index.html
从我的服务器上，我可以看到它在Heroku服务器上的bash终端中吐出了
index.html
文件的正确路径。这对我也有帮助
app.use('/static', express.static(path.join(__dirname, 'client/build')));