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

Question

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?

Answer 1

Heroku will call start script automatically. You need to change the current "start" script to
"start:dev": "react-app-rewired start",
then create a "start" script which calls the server.js file of your server.
// make sure you pass a correct path to server.js
// if server.js is inside server folder, server/server.js
"start": "node server.js",

Answer 2

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