У меня развернуто приложение React на Heroku, оно не показывало ошибки в сборке, а команда "heroku logs" тоже не отображает ошибку, но на моей странице вместо пользовательского интерфейса отображается json моей базы данных mongo с css и реагирующими компонентами.
Сайт работает безупречно на местном уровне. Кроме того, я попробовал руководства по устранению неполадок со страницы Heroku, включая указание правильной версии npm + node в package.json и добавление node_modules в .gitignore.
Страница html
<code><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}]}]"
Ошибка на странице консоли
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>
Есть ли другое решение, если я попытаюсь это исправить? Спасибо.