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

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 上安装后运行良好。

Answer 2

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

要修复没有扩展的浏览器上的错误，请使用 window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ 而不是 window.__REDUX_DEVTOOLS_EXTENSION__ 创建 Redux 存储：

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-extension npm 包：

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

如果您想在生产环境中禁用扩展，请使用 developmentOnly 助手而不是 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 的工作完整代码示例，其中创建了 Redux 存储：

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-extension-f0379227ff83

Answer 3

这与 Redux DevTools 有关。这对我有用：

const store = createStore(
  rootReducer,
  initialState,
  compose(
    applyMiddleware(
      thunk,
    ),
    process.env.NODE_ENV === 'development'
      ? window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
      : compose,
  ),
);

请注意，compose 无法处理 undefined，因此您必须使用三元并返回 compose。

换句话说(process.env.NODE_ENV === 'development') && (window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())不起作用

其他可能的解决方案可以在redux GitHub页面上找到：https://github.com/reduxjs/redux/issues/2033

Answer 4

对我来说，问题是我在代码中某处的窗口对象上检查了“clientInformation”属性，该属性在 Firefox 中不存在，但在 Chrome 中却存在。

一个简单的可选链（window.clientInformation?.userAgent.....）很快就把它修好了。