У меня проблема с IE11 в моем React SPA, это приложение для рендеринга на стороне клиента.

Проблема в том, что в то время как в других браузерах он работает отлично, в IE11 он иногда остается в состоянии бесконечной загрузки (не обновляет флаг загрузки из магазина) или переходит непосредственно на панель управления приложения, когда вы вводите знак -на экране (очевидно, что на нем нет данных).

Я установил

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

В index.html, бесполезно, но я вижу, что он «исправляет»: когда я удаляю файл с именем «recaptcha__es_419» в папке INetCache, страница работает так, как задумано.

Есть ли известная проблема с redux и IE11, которую я не мог найти на форумах? может быть, библиотека или полифилл отсутствуют?

Это мой 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 - это массив модулей webpack и unshift поместит этот элемент в первую позицию массива, это важно, потому что в первую очередь должен запускаться polifyll !.

И все, теперь в IE все должно работать идеально!

1
Tomas 11 Сен 2018 в 21:23

1 ответ

Лучший ответ

Вам не хватает babel-polyfill в ваших пакетах и ​​конфигурации веб-пакетов.

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

Просто установите @babel/polyfill и включите их в каждую запись веб-пакета.

Итак, если конфигурация веб-пакета выглядит следующим образом:

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'
  }
};

Надеюсь это поможет

0
Ayushya 11 Сен 2018 в 19:00