将React应用程序部署到Heroku(react-app-rewired)时出现空白页面

gcmastyq  于 2023-02-08  发布在  React
关注(0)|答案(2)|浏览(181)

我的网站(react应用程序)在Heroku上部署后返回了一个空白页面。虽然,它在localhost上运行良好。因此,它很可能与Heroku如何运行构建和/或启动有关。
在我不得不将package.json中的脚本更改为以下内容后出现错误:

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

我不得不从react-scripts更改为react-app-rewired,因为这是使用一些库(例如,大多数web 3相关的库)的要求。
下面是我的package.json和server.js。我读到其他人对server.js有问题,但在我做出上面提到的修改之前,它在我的情况下运行良好。

包.json

{
  "name": "app",
  "version": "0.1.0",
  "engines": {
    "node": "16.16.0",
    "npm": "8.11.0"
  },
  "private": true,
  "dependencies": {
    "@appbaseio/reactivesearch": "^3.34.3",
    "@biconomy/web3-auth": "^1.0.0",
    "@headlessui/react": "^1.7.5",
    "@metamask/onboarding": "^1.0.1",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "apexcharts": "^3.35.3",
    "assert": "^2.0.0",
    "axios": "^0.27.2",
    "bn.js": "^5.2.1",
    "bootstrap": "^4.6.0",
    "browserify": "^17.0.0",
    "caver-js": "^1.8.2",
    "chart.js": "^3.8.0",
    "elliptic": "^6.5.4",
    "ethereum-unit-converter": "^0.0.17",
    "ethereumjs-util": "^7.1.5",
    "ethers": "^5.7.0",
    "express": "^4.18.2",
    "js-sha3": "^0.8.0",
    "moralis": "^1.11.0",
    "primeicons": "^5.0.0",
    "primereact": "^8.1.1",
    "react": "^18.2.0",
    "react-apexcharts": "^1.4.0",
    "react-app-rewired": "^2.2.1",
    "react-card-flip": "^1.1.5",
    "react-device-detect": "^2.2.2",
    "react-dom": "^18.2.0",
    "react-form-stepper": "^2.0.3",
    "react-ga": "^3.3.1",
    "react-icons": "^4.6.0",
    "react-minimal-pie-chart": "^8.3.0",
    "react-moralis": "^1.4.1",
    "react-router-dom": "^6.4.3",
    "react-scripts": "5.0.1",
    "react-slick": "^0.29.0",
    "react-step-wizard": "^5.3.11",
    "react-toastify": "^9.0.5",
    "slick-carousel": "^1.8.1",
    "stream": "^0.0.2",
    "swr": "^2.0.0",
    "web-vitals": "^2.1.4",
    "web3": "^1.7.5",
    "web3modal": "^1.9.8"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },
  "proxy": "https://buckets-backend.herokuapp.com",
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

服务器.js

// server.js
const express = require('express');
const compression = require('compression');
const path = require('path');
const app = express();

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

app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
    console.log(`App is running on port ${PORT}`);
});

过程文件

web: node server.js

我被卡住了,你知道我该怎么调试吗?

ttvkxqim

ttvkxqim1#

Heroku将自动调用start脚本。您需要将当前的“start”脚本更改为

"start:dev": "react-app-rewired start",

然后创建一个“start”脚本来调用服务器的server.js文件。

// make sure you pass a correct path to server.js
// if server.js is inside server folder, server/server.js 
"start": "node server.js",
6g8kf2rb

6g8kf2rb2#

该问题与我使用的一个新软件包有关:web3auth。根据他们的文档,以下解决了这个问题:
在包.json中替换:

"browserslist": {
"production": [
  "chrome >= 67",
  "edge >= 79",
  "firefox >= 68",
  "opera >= 54",
  "safari >= 14"
],
"development": [
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version"
]

}
来源:https://web3auth.io/docs/troubleshooting/react-big-int-error

相关问题