Heroku app only works on Chrome Desktop // React.Js Application

Question

Recently finished putting together a React project that fetches News Articles and displays them. Recently deployed to Heroku and have found that only Chrome on Desktop seems to run it.

Safari and Firefox both give me the same error when I look in the Javascript console. Javascript error

Link to heroku applicatio - https://calm-bastion-47290.herokuapp.com/ ?

Server set up

    const express = require("express");
const mongoose = require("mongoose");
const bodyParser = require("body-parser");
const passport = require("passport");
const path = require("path");

const users = require("./routes/api/users");
const profile = require("./routes/api/profile");

const app = express();
// Body Parser Middleware
app.use(express.urlencoded({ extended: false }));
app.use(express.json());

// DB config
const db = require("./config/keys").mongoURI; //mongodb database url connection

// connect to mongodb
mongoose
  .connect(db)
  .then(() => console.log("MongoDB Connected"))
  .catch(err => console.log(err));

//passport Middleware

app.use(passport.initialize());

//passport config
require("./config/passport")(passport);

//use routes

app.use("/api/users", users);
app.use("/api/profile", profile);

// Server static assets if in production
if (process.env.NODE_ENV === "production") {
  // Set static folder
  app.use(express.static("client/build"));

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

const port = process.env.PORT || 5000;

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

I don't think there is anything wrong with my code as it runs perfectly locally and chrome handles it just fine. Any obvious reason why Safari, Firefox and any browser on mobile simply fails to render any part of my web application?

Answer 1

Just had the same issue. Make sure you take out the redux development tools before deploying.

In your store.js file include the following to not use the "redux devtools" in production.

if(process.env.NODE_ENV === 'production') {
    store = createStore(rootReducer, initialState, compose(
        applyMiddleware(...middleware)
    ));
} else {
    store = createStore(rootReducer, initialState, compose(
        applyMiddleware(...middleware),
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    ));
}

The idea is to only include REDUX_DEVTOOLS while in development. In production this should not be used, because then only browsers with the redux devtool extension will be able to view the page.

Answer 2

This issue comes up because of redux-devtools-extension.

You most likely had the following error in all browsers console where redux-devtools-extension was not installed:

TypeError: undefined is not an object (evaluating 'b.apply')

This is becuase window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() which you most likely have implemented is returning undefined, which means that .apply() is being called on undefined, thereby causing the error.

Either you remove it completely from production like @Vindao mentioned in his truly great answer or go with the following code, which simply will not use redux-devtools-extension if not supported by the current browser:

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; 
const store = createStore(rootReducer, initialState, composeEnhancers(
    applyMiddleware(...middleware)
  ));

For more details or other possibilities about how to create a store with Redux-devtools-extensions in place, see Advanced store setup