React app works on Chrome, but not Firefox

Question

My project runs fine in Chrome (without errors). When I open it in Firefox, however, it shows the following errors:

TypeError: RealRTCPeerConnection is undefined app:190:1
TypeError: b is undefined compose.js:29

I'm not using RealRTCPeerConnection in my code, so I'm assuming this error is from a dependency. The problem is I'm not sure what dependency that'd be, or how to go about troubleshooting it. I've tried looking online and troubleshooting it myself, but I didn't find anything useful.

Also note that I'm running the Desktop bundle. Here's my project's config:

webpack.config.js

var path = require('path')
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

module.exports = {
  context: __dirname,
  devtool: 'source-map',
  entry: {
    desktop: [
      'react-hot-loader/patch',
      'webpack-dev-server/client?http://localhost:3000',
      'webpack/hot/only-dev-server',
      './src/js/Desktop/index'
    ],
    mobile: './src/js/Mobile/index'
  },
  output: {
    path: path.resolve('./src/bundles/'),
    filename: '[name]-[hash].js',
    publicPath: 'http://localhost:3000/src/bundles/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(), // Don't hot reload if there is an error
    new webpack.NamedModulesPlugin(),
    new BundleTracker({filename: './webpack-stats.json'})
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: [
          path.resolve('./node_modules/')
        ],
        include: [
          path.resolve('./src/js/')
        ],
        use: [
          'babel-loader',
          'eslint-loader'
        ]
      }
    ]
  },
  resolve: {
    modules: [
      'node_modules',
      path.resolve(__dirname + '/node_modules'),
      path.resolve(__dirname + '/src/js')
    ],
    alias: {
      Common: path.resolve(__dirname, 'src/js/Common'),
      Desktop: path.resolve(__dirname, 'src/js/Desktop'),
      Mobile: path.resolve(__dirname, 'src/js/Mobile'),
    },
    extensions: ['.js', '.jsx']
  }
}

package.json

{
  "scripts": {
    "build": "webpack --config webpack.config.js --progress --colors",
    "build:prod": "webpack --config webpack.prod.config.js --progress --colors",
    "lint": "eslint src",
    "test": "jest",
    "test:watch": "npm test -- --watch",
    "watch": "node server.js"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-eslint": "^8.0.2",
    "babel-jest": "^21.2.0",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "clean-webpack-plugin": "^0.1.16",
    "enzyme": "^3.1.0",
    "enzyme-adapter-react-16": "^1.0.2",
    "eslint": "^4.10.0",
    "eslint-config-standard-preact": "^1.1.6",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.4.0",
    "jest": "^21.2.1",
    "jsdom": "11.3.0",
    "jsdom-global": "3.0.2",
    "nock": "^9.0.22",
    "radium": "^0.19.4",
    "react-a11y": "^0.3.4",
    "react-hot-loader": "^3.0.0-beta.7",
    "react-test-renderer": "^16.0.0",
    "redux-devtools": "^3.4.0",
    "redux-mock-store": "^1.3.0",
    "webpack": "^3.5.4",
    "webpack-bundle-tracker": "^0.2.0",
    "webpack-dev-server": "^2.7.1"
  },
  "dependencies": {
    "airbnb-prop-types": "^2.8.1",
    "axios": "^0.17.0",
    "babel-polyfill": "^6.26.0",
    "classnames": "^2.2.5",
    "color": "^2.0.0",
    "lodash": "^4.17.4",
    "normalizr": "^3.2.4",
    "preact": "^8.2.6",
    "preact-compat": "^3.17.0",
    "preact-material-components": "^1.3.1",
    "preact-redux": "^2.0.3",
    "preact-router": "^2.6.0",
    "prop-types": "^15.5.10",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "react-transition-group": "^2.2.1",
    "reactstrap": "^5.0.0-alpha.3",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-promise-middleware": "^4.4.1",
    "redux-thunk": "^2.2.0",
    "redux-undo": "^0.6.1",
    "reselect": "^3.0.1"
  },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules",
      "src/js"
    ],
    "setupFiles": [
      "./src/js/Common/shim.js",
      "./src/js/Common/setupTests.js"
    ],
    "testEnvironment": "jsdom"
  }
}

server.js

var webpack = require('webpack')
var WebpackDevServer = require('webpack-dev-server')
var config = require('./webpack.config')

new WebpackDevServer(webpack(config), {
  headers: { 'Access-Control-Allow-Origin': '*' },
  historyApiFallback: true,
  hot: true,
  inline: true,
  overlay: {
    errors: true,
    warnings: true,
  },
  publicPath: config.output.publicPath,
}).listen(3000, '0.0.0.0', function (err) {
  if (err)
    console.log(err)

  console.log('Listening at 0.0.0.0:3000')
})

babel.rc

{
  "env": {
    "development": {
      "plugins": [
        "react-hot-loader/babel",
        "transform-decorators-legacy",
        "transform-object-rest-spread"
      ],
      "presets": [
        ["env", { "modules": false }],
        "react",
        "stage-1"
      ]
    },
    "test": {
      "plugins": [
        "react-hot-loader/babel",
        "transform-decorators-legacy",
        "transform-object-rest-spread"
      ],
      "presets": [
        "env",
        "react",
        "stage-1"
      ]
    }
  }
}

Answer 1

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