Blank page when deploying React app to Heroku with react-app-rewired

My website (react app) returns a blank page after deploying on Heroku. Although, it runs well on localhost. Hence, it most likely has to do with how Heroku run build and/or start.

The error arose after I had to change the scripts in package.json to :

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

I had to change from react-scripts to react-app-rewired as it was a requirement to use some libraries (e.g. most web3-related libraries).

Below are my package.json and server.js below. I read others having issues with server.js but it was working fine in my case before I made the changes mentioned above.

Package.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"
    ]
  }
}

server.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}`);
});

Procfile

web: node server.js

I am stuck, any idea how I could debug this?

The issue was related to one of the new package I used: web3auth. According to their docs, the following resolved the problem:

Replace in package.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"
]

}

Source: https://web3auth.io/docs/troubleshooting/react-big-int-error