Question

我在React SPA中遇到IE11的问题，它是客户端渲染的应用程序。

问题是，尽管在其他浏览器中它可以正常工作，但在IE11中，有时它会保持无限加载状态（不会更新商店中的加载标志），或者当您将其直接转到应用程序的仪表板时进入登录屏幕（显然它没有任何数据）。

我已设置

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

在index.html中，没有任何用途，但我看到它“修复了它”的一件事是，当我删除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）在您的config-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'
  }
};

希望这会有所帮助

IE11中未更新React-Redux

1 个答案: