React app works on Chrome, but not Firefox

I finally figured out the issue.

As shown in my package.json, I'm using redux-devtools. I had Redux DevTools installed on Chrome, but not Firefox. The site works fine after installing it on Firefox.

A browser without the Redux DevTools Extension may produce an error if the Redux store is not properly created. It may happen that the error still produces even though the extension is not working in the browser for some kind of error installation. So if the extension is not working make sure too uninstall it.

To fix the error on browsers without the extension, create the Redux store with window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ instead of window.__REDUX_DEVTOOLS_EXTENSION__:

import { createStore, applyMiddleware, compose } from 'redux';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
  applyMiddleware(...middleware)
));

See documentation: https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup

To fix the error on browsers without the extension and to improve performance in production, the recommended best practice is to use the redux-devtools-extension npm package:

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction';

const composeEnhancers = composeWithDevTools({
  // options like actionSanitizer, stateSanitizer
});

const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

And if you want to disable the extension on production, use the developmentOnly helper instead of logOnlyInProduction:

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';

const composeEnhancers = composeWithDevTools({
  // options like actionSanitizer, stateSanitizer
});

const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

Here you have a working complete code example of store.js where the Redux store is created:

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initialState = {};

const middleware = [thunk];

const store = createStore(
  rootReducer,
  initialState,
  composeWithDevTools(applyMiddleware(...middleware))
);

export default store;

To install the redux-devtools-extension npm package you can use:

npm install --save-dev redux-devtools-extension

But for production builds you may need instead:

npm install redux-devtools-extension

Check documentation: https://github.com/zalmoxisus/redux-devtools-extension#13-use-redux-devtools-extension-package-from-npm

Aditional info: https://medium.com/@zalmoxis/using-redux-devtools-in-production-4c5b56c5600f https://medium.com/@zalmoxis/improve-your-development-workflow-with-redux-devtools-extension-f0379227ff83