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

Question

我的项目在 Chrome 中运行良好(没有错误)。然而，当我在 Firefox 中打开它时，它显示以下错误:

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

我没有在代码中使用RealRTCPeerConnection，因此我假设此错误来自依赖项。问题是我不确定这是什么依赖关系，或者如何对其进行故障排除。我尝试过在网上查找并自行排除故障，但没有发现任何有用的信息。

另请注意，我正在运行 Desktop bundle 。这是我的项目的配置:

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

我终于明白了这个问题。

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