React router not working on heroku

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.

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

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;

Getting this error in the console btw. This is not happening on dev server or on production if i use app.get("/", (req, res) => in server.js

all my state has initial empty array value

image

Well, the error message shows that error in the UserInventory.jsx file on line 65.

Why there is a double slash in transactions require path?

Usually it’s better to post link to a repo and not just some parts of code.

1 Like

Yeah, I agree with jevovs.

The error “A.map is not a function” means that A ( a terrible variable name, btw) is not what you think it is, at least not an array. Or whatever it is doesn’t have that method (like if you defined it on an object.) You should find out what A is. It seems defined and not null or it would be a different error.

1 Like

Map function is not working because my request is returning an html file instead of object because:

Is there a way to make this work? My nodejs w/ backend api + react is running on 1 server on heroku?

Or do i need to host a new nodejs server for the api and just have my project connect to that endpoint?

Issue fix. Since issue is conflict with routes, i just manually coded the routes.

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"));
  });
  app.get("/orders", (req, res) => {
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
  });
  app.get("/inventory", (req, res) => {
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
  });
}