Question

我很难弄清楚这里发生了什么。当我将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.

以下是设置我的server.js文件以发送根index.html文件的方式：

app.use('/static', express.static(path.join(__dirname, 'client/build')));

app.get('*', function(_, res) {
  res.sendFile(path.join('/app/client/build/index.html'), function(err) {
    if (err) {
      console.log(err);
      res.status(500).send(err);
    }
  });
});

这就是我的React应用package.json的顶部（为简洁起见，已编辑代码）：

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

我认为在客户端的package.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文件而不是使用模板文字（此时尝试任何操作）：

    //Express
    const express = require('express');
    const app = express();
    const port = process.env.PORT || 8000;
    //Core Node Modules
    const fs = require('fs');
    const path = require('path');

    //Middleware
    app.use(express.urlencoded({ extended: true }));
    app.use(express.json());

        app.use(express.static(path.join(__dirname, '/client/build')));

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

    app.listen(port, err => {
      if (err) console.info(`Error: The server failed to start on ${port}`);
      else console.info(`****** Node server is running on ${port} ******`);
    });

这是服务器的根级别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"
  }

这是package.json中的React应用的/client：

{
  "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/"
}

以下是Heroku服务器上文件的外观：

第一张图片：根目录第二张图片：/ client目录第三张图片：/ client / build目录第四张图片：/ client / build / static directoy

Answer 1

由于我们无权访问您的服务器，因此很难说出问题背后的原因。我猜您是因为这三个错误消息表明服务器配置错误，该服务器仅返回index.html文件。

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

我还会猜测，以下行完全无效，这意味着此文件夹中没有文件（或者不是您要访问的文件）。

app.use('/static', express.static(path.join(__dirname, 'client/build')));

Answer 2

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

最初是express.static(path_join(__dirname, '/client/build'))

它必须为：express.static(path_join(__dirname, '../client/build'))

之所以如此，是因为我的server.js文件位于/server中，并且它试图在/client/build内而不是Heroku的根应用程序目录中找到/server。

Heroku-Express和React应用在部署后显示空白屏幕

2 个答案: