0

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?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Clement
  • 31
  • 5
  • Another information that may help: I am not seeing any logs in the backend (which is a separate heroku app built with Django), when refreshing my react app. – Clement Feb 07 '23 at 18:41

2 Answers2

1

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

Clement
  • 31
  • 5
0

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",
Yilmaz
  • 35,338
  • 10
  • 157
  • 202
  • I am getting the same blank page. The only error I see in the console is coming from a library (ethereumjs): "Uncaught TypeError: Cannot convert a BigInt value to a number" Could it be that this error aborts the backend requests, hence I am not getting any info back and I have a blank page? – Clement Feb 08 '23 at 06:16