I'm having a problem with IE11 in my React SPA, it is a client-side rendered app.
The issue is that while in others browsers it just works perfectly fine, in IE11 it sometimes wills stay in an infinite loading state (won't update loading flag from store) or it goes directly to the dashboard of the app when you enter the sign-in screen (obviusly it doesn't have any data).
I've setted
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
in the index.html, with no use but one thing I see it "fixes it" is that when I delete a file named "recaptcha__es_419" in the INetCache folder, the page works as intended.
Is there a known problem with redux and IE11 that i couldn't find in the forums? maybe a library or a polyfill that is missing?
This is my package.json in case it can be of help. I can't actually put any code because it's a really big project and really don't know where the problem is, since IE11 doesn't tell me about any error.
{
"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"
}
}
EDIT: If you're having the same problem I had, as @Ayushya said, adding Babel-Polyfill might help. It did in my case, and since I'm using CRA with Rewired I'll leave here how I configured it:
1) Install @babel/polyfill package:
npm install --save @babel/polyfill
2) In your config-override.js:
module.exports = function override(config, env) {
config.entry.unshift('@babel/polyfill');
...All your other code...
return config;
};
In this case, entry is the array of modules of webpack and unshift will put that item in the first position of the array, this is important because the polifyll should run first of all things!.
And that's it, everything should work perfect now in IE!
You are missing babel-polyfill in your packages and webpack configuration.
https://babeljs.io/docs/en/babel-polyfill#usage-in-node-browserify-webpack
Just install @babel/polyfill and include them in each of the webpack entry.
So if webpack configuration looks like below:
var path = require('path');
module.exports = {
mode: 'development',
entry: './foo.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'foo.bundle.js'
}
};
Add the @babel/polyfill in entry as follows.
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'
}
};
Hope this helps