Heroku React App 显示数据库的 json 而不是 UI？答案

【问题标题】：Heroku React App shows json of database instead of UI?Heroku React App 显示数据库的 json 而不是 UI？
【发布时间】：2019-11-11 01:43:21
【问题描述】：

我在 Heroku 上部署了一个 React 应用程序，它在构建中没有显示任何错误，“heroku logs”命令也没有显示任何错误，但是我的页面显示了我的 mongo 数据库的 json 而不是 UI使用 css 和 react 组件。

网站在本地运行完美。此外，我尝试了 Heroku 页面中的故障排除指南，包括在 package.json 中指定正确的 npm + node 版本并将 node_modules 添加到 .gitignore。

页面html

<html>
  <head></head>
  <body>
    <pre style="word-wrap: break-word; white-space: pre-wrap;">==$0
      "[{"items":[{"_id":"5c73504f75c5630017b5fba0","task":"TODO 
      1","done":true,"__v":0},{"_id":"5c73514875c5630017b5fba3","task":"TODO 
      2","done":false,"__v":2}]}]"
    </pre>
  </body>
</html>

页面控制台错误

Uncaught (in promise) TypeError: Cannot read property 'honeyTipsAutopopOn' of undefined
    at h1-main.js:formatted:1478
    at k (h1-vendors-honeypay-main-popover.js:1)
    at Generator._invoke (h1-vendors-honeypay-main-popover.js:1)
    at Generator.e.<computed> [as next] (h1-vendors-honeypay-main-popover.js:1)
    at r (h1-main.js:formatted:1501)
    at h1-main.js:formatted:1508

package.json

{
  "name": "todolist",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "dependencies": {
    "concurrently": "^4.1.0",
    "express": "^4.16.4",
    "mongoose": "^5.4.14",
    "node": "^10.16.0",
    "npm": "^6.9.0"
  },
  "devDependencies": {},
  "scripts": {
    "client-install": "npm install --prefix client",
    "start": "node app.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run start\" \"npm run client\"",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix 
    client && npm run build --prefix client"
  },

app.js

const express = require("express");
const mongoose = require("mongoose");
mongoose.set("useFindAndModify", false);
const bodyParser = require("body-parser");
const items = require("./routes/api/itemRoutes");
const path = require("path");

const app = express();
app.use(bodyParser.json());
//mongoose.connect("mongodb://localhost/todolist", {useNewUrlParser: true});
mongoose.connect("...", {useNewUrlParser: true});
let port = process.env.PORT || 4000;
app.use("/", items);

if (process.env.NODE_ENV === 'production') {
  app.use(express.static('client/build'));

  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
  });
}

app.listen(port, () => {console.log("Server started on port " + port);});

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>BriansTodos</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

我应该尝试解决此问题是否有其他解决方案？谢谢。

【问题讨论】：

honeyTipsAutopopOn 控制台错误与 Chrome 浏览器上的 Honey 扩展有关。然而，这不太可能导致 React 错误。

标签： javascript html reactjs heroku

【解决方案1】：

对于任何看到此的人，不确定是否已解决。

我遇到了同样的问题，但没有任何控制台错误，但问题是我的 Express 服务器中有一个路由，它与我的 React 应用程序中的路由命名相同。因此，它没有返回 React 路由，而是从 Express 路由返回数据。

试试看你有没有可能发生冲突的路线名称？

【讨论】：