reactjs – react component disappears on heroku after a second

my website is https://swiftdeskph.herokuapp.com/
when you access my site, it will show the component for a second then its empty

My observations/question:

  1. accessing any route not specified shows my Error404 component just fine.
  2. even if there is an error on my api call, it should return and display the error in component. Which is whats happening on my dev server.
  3. no error on heroku logs
  4. If i rewrite my server.js and just put
app.get("/", (req, res) => {

    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
  });

The whole app is working just fine BUT will only work if you start accessing from “/” route.

App.js

import React, { useEffect } from "react";
import { useDispatch } from "react-redux";
import "./sass/App.scss";
import "bootstrap/dist/css/bootstrap.min.css";
import { Route, BrowserRouter as Router, Switch } from "react-router-dom";

// COMPONENTS---------------------------------------
import Navbar from "./components/NavbarComponent";
import Footer from "./components/Footer";
import Dashboard from "./components/Dashboard/Dashboard";
import { Orders } from "./components/Orders/Orders";
import UserInventory from "./components/UserInventory/UserInventory";
import Error404 from "./components/Error404";

//Import fetch actions
import { fetchProducts } from "./redux/userInventory/inventoryActions";
import { fetchOrder } from "./redux/order/orderActions";

function App() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchOrder());
    dispatch(fetchProducts());
  }, ());

  return (
    <React.Fragment>
      <Router>
        <Navbar />
        <div className="appContainer">
          <Switch>
            <Route path="/" exact component={Dashboard} />
            <Route path="/orders" component={Orders} />
            <Route path="/inventory" component={UserInventory} />
            <Route path="*" component={Error404} />
          </Switch>
        </div>
      </Router>
      <Footer />
    </React.Fragment>
  );
}

export default App;


server.js

const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
require("dotenv").config();

const app = express();
const PORT = process.env.PORT || 80;
const { MONGO_URI } = require("./config/keys");
const connection = mongoose.connection;

app.use(cors());
app.use(express.json());

mongoose.connect(MONGO_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  useCreateIndex: true,
  useFindAndModify: false,
});

connection.once("open", () => {
  console.log("MongoDB database connection established successfully.");
});

if (process.env.NODE_ENV == "production") {
  app.use(express.static("client/build"));

  const path = require("path");
  app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
  });
}

//ADDING OF ROUTES
const products = require("./routes/products");
const userInventory = require("./routes/userInventory");
const transactions = require(".//routes/transactions");
app.use("/api/products", products);
app.use("/api/user/inventory", userInventory);
app.use("/api/transactions", transactions);

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