我的项目在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"
]
}
}
}
答案 0 :(得分：5)
我终于找到了问题。
如我package.json所示，我使用redux-devtools。我在Chrome上安装了Redux DevTools，但没有安装Firefox。在Firefox上安装后，该网站运行正常。
答案 1 :(得分：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
));
这里有一个{strong {@ 1}}的工作完整代码示例，在其中创建了Redux存储：
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;
npm软件包，您可以使用：
redux-devtools-extension但是对于生产版本，您可能需要：
npm install --save-dev redux-devtools-extension
附加信息： https://medium.com/@zalmoxis/using-redux-devtools-in-production-4c5b56c5600f https://medium.com/@zalmoxis/improve-your-development-workflow-with-redux-devtools-extension-f0379227ff83
答案 2 :(得分：0)
这与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
答案 3 :(得分：0)
对我来说，问题是我在代码中某处的窗口对象上检查了“ clientInformation”属性，该属性在Firefox中不存在，但在Chrome中却存在。
一个简单的可选链（window.clientInformation？.userAgent .....）将其快速修复。