React应用程序可在Chrome上运行，但不能在Firefox上运行

Question

我的项目在Chrome中运行正常（没有错误）。但是，当我在Firefox中打开它时，它显示以下错误：

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

我没有RealRTCPeerConnection在我的代码中使用，所以我假设此错误来自某个依赖项。问题是我不确定会是什么样的依赖关系，或者不确定如何对其进行故障排除。我尝试过在线查找并自己进行故障排除，但没有发现任何有用的方法。

另请注意，我正在运行Desktop捆绑软件。这是我的项目的配置：

webpack.config.js

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

package.json

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']
  }
}

server.js

{
  "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"
  }
}

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

如果没有正确创建 Redux 存储，没有 Redux DevTools 扩展的浏览器可能会产生错误。即使扩展程序在浏览器中无法运行以进行某种错误安装，错误仍然可能发生。因此，如果扩展程序不起作用，请确保也将其卸载。

要在没有扩展名的浏览器上修复错误，请使用window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__而不是创建 Redux 存储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)
));

查看文档：https : //github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup

要在没有扩展的浏览器上修复错误并提高生产性能，推荐的最佳实践是使用redux-devtools-extensionnpm 包：

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

如果您想在 production上禁用扩展，请使用developmentOnlyhelper 而不是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
));

在这里，你有一个工作的完整的代码示例的store.js创建终极版专卖店里：

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;

要安装的redux-devtools-extension，你可以使用NPM包：

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

但是对于生产版本，您可能需要：

npm install redux-devtools-extension

检查文档：https : //github.com/zalmoxisus/redux-devtools-extension#13-use-redux-devtools-extension-package-from-npm

附加信息：https : //medium.com/@zalmoxis/using-redux-devtools-in-production-4c5b56c5600f https://medium.com/@zalmoxis/improve-your-development-workflow-with-redux-devtools-扩展名-f0379227ff83

Answer 2

我终于弄清楚了这个问题。

如我所示package.json，我正在使用redux-devtools。我在Chrome上安装了Redux DevTools，但在Firefox上却没有。在Firefox上安装该网站后，该网站可以正常运行。