React-Redux 未在 IE11 中更新

Question

我的 React SPA 中的 IE11 有问题，它是客户端呈现的应用程序。

问题是，虽然在其他浏览器中它运行得非常好，但在 IE11 中它有时会保持无限加载状态（不会从商店更新加载标志）或者直接进入应用程序的仪表板当您进入登录屏幕时（显然它没有任何数据）。

我设置了

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">

在 index.html 中，没有用，但我看到它 "fixes it" 的一件事是，当我删除 INetCache 文件夹中名为 "recaptcha__es_419" 的文件时，该页面按预期工作.

redux 和 IE11 是否存在我在论坛中找不到的已知问题？可能缺少库或 polyfill？

这是我的 package.json 以备不时之需。我实际上无法放置任何代码，因为它是一个非常大的项目并且真的不知道问题出在哪里，因为 IE11 没有告诉我任何错误。

{
    "version": "0.1.0",
    "private": true,
    "dependencies": {
    "@material-ui/core": ">=1.0.0",
    "@material-ui/icons": ">=1.0.0",
    "@trainline/react-skeletor": "^1.0.2",
    "apisauce": ">=0.14.1",
    "autoprefixer": "^8.6.3",
    "card-validator": ">=4.3.0",
    "downloadjs": "^1.4.7",
    "es5-shim": ">=4.5.9",
    "es6-shim": ">=0.35.3",
    "es7-shim": ">=6.0.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "history": ">=4.6.1",
    "i18next": ">=10.0.1",
    "lodash": ">=4.17.4",
    "mobile-detect": ">=1.3.6",
    "moment": ">=2.19.1",
    "node-sass": "^4.9.0",
    "numeral": ">=2.0.6",
    "prop-types": ">=15.5.10",
    "raf": "^3.3.2",
    "rc-slider": "^8.6.1",
    "react": ">=16.3.2",
    "react-app-rewire-hot-loader": "^1.0.1",
    "react-app-rewired": "^1.5.2",
    "react-credit-cards": "^0.7.0",
    "react-dom": ">=16.0.0",
    "react-facebook-login": "^4.0.1",
    "react-google-login": "^3.2.1",
    "react-google-maps": "^9.4.5",
    "react-google-recaptcha": "^1.0.1",
    "react-hot-loader": "^4.3.3",
    "react-markdown": "^3.4.1",
    "react-ms-login": "^0.1.2",
    "react-redux": ">=5.0.4",
    "react-responsive": "^4.1.0",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "react-router-redux": "next",
    "react-scripts": "^1.1.4",
    "react-twitter-auth": "^0.0.12",
    "recharts": "^1.1.0",
    "redux": ">=3.6.0",
    "redux-form": ">=6.8.0",
    "redux-recompose": "^1.0.11",
    "redux-thunk": ">=2.2.0",
    "reselect": "^3.0.1",
    "rollbar": "^2.3.9",
    "sass-loader": "^7.0.3",
    "seamless-immutable": ">=7.1.2",
    "url-search-params-polyfill": ">=2.0.1"
  },
  "devDependencies": {
    "babel-eslint": ">=8.0.1",
    "babel-plugin-module-resolver": "^3.1.1",
    "babel-preset-react-app": "^3.1.2",
    "eslint": ">=4.9.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-config-prettier": ">=2.6.0",
    "eslint-import-resolver-babel-module": "^4.0.0",
    "eslint-plugin-flowtype": ">=2.39.1",
    "eslint-plugin-import": ">=2.8.0",
    "eslint-plugin-jsx-a11y": ">=5.0.3",
    "eslint-plugin-prettier": ">=2.3.1",
    "eslint-plugin-react": ">=7.4.0",
    "husky": ">=0.14.3",
    "prettier": ">=1.7.4",
    "prettier-eslint": ">=8.2.1",
    "sass-lint": "^1.12.1"
  },
  "scripts": {
    "sass-lint": "./node_modules/sass-lint/bin/sass-lint.js -v -q",
    "lint": "./node_modules/eslint/bin/eslint.js src && npm run sass-lint",
    "lint-fix": "./node_modules/eslint/bin/eslint.js src --fix",
    "lint-diff": "git diff --name-only --cached --relative --diff-filter=ACM | grep \.js$ | xargs ./node_modules/eslint/bin/eslint.js",
    "precommit": "npm run lint-diff & npm run sass-lint",
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom"
  }
}

编辑：如果您遇到与我相同的问题，正如@Ayushya 所说，添加 Babel-Polyfill 可能会有所帮助。在我的情况下确实如此，并且由于我将 CRA 与 Rewired 一起使用，我将在此处保留我的配置方式：

1) 安装@babel/polyfill 包：

npm install --save @babel/polyfill

2) 在你的配置中-override.js:

module.exports = function override(config, env) {
  config.entry.unshift('@babel/polyfill');

   ...All your other code...

  return config;
};

在这种情况下，entry 是 array of modules of webpack 而 unshift 会将该项放在数组的第一个位置，这很重要，因为 polifyll 应该运行首先是事情！

就是这样，现在一切都应该在 IE 中完美运行！

Answer 1

您的包和 webpack 配置中缺少 babel-polyfill。

https://babeljs.io/docs/en/babel-polyfill#usage-in-node-browserify-webpack

只需安装 @babel/polyfill 并将它们包含在每个 webpack 条目中。

所以如果 webpack 配置如下所示：

var path = require('path');

module.exports = {
  mode: 'development',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }
};

在条目中添加@babel/polyfill如下。

var path = require('path');
require("@babel/polyfill");

module.exports = {
  mode: 'development',
  entry: ['@babel/polyfill', './foo.js'],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }
};

希望对您有所帮助

React-Redux 未在 IE11 中更新

React-Redux not updating in IE11

internet-explorer-11

reactjs

redux