Repository navigation
Create react app is not loaded (not working) in internet explorer 11 browser #7084
Description
Create react app is not loaded (not working) in internet explorer 11
Version:-
"react": "^16.8.6",
"react-app-polyfill": "^1.0.1",
"react-dom": "^16.8.6",
"react-redux": "^7.0.3",
"react-router-dom": "^5.0.0",
"react-scripts": "3.0.1",
"redux": "^4.0.1",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0"
setup is react-redux
- reference for store configuration if anything wrong inside then let me know
i tried index.js in polyfill config also
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable'; but its not working.
import rootReducer from "../reducers/index";
import thunk from "redux-thunk";
import { composeWithDevTools } from 'redux-devtools-extension';
import { createStore, applyMiddleware } from "redux";
import initialStoreState from "./initialStoreState";
const initialState = initialStoreState;
const middlewares = [];
if (process.env.NODE_ENV === 'development') {
middlewares.push(/* loggerMiddleware, */);
}
const configureStore = createStore(
rootReducer,
initialState,
composeWithDevTools(
applyMiddleware(...middlewares, thunk))
)
export default configureStore;
its working fine chrome and firefox browser.
#HELPPLEASE
Activity
vinod827 commentedon May 20, 2019
does it work on other browsers like Chrome?
[-]Create react app is not loaded (working) in internet explorer 11 browser[/-][+]Create react app is not loaded (not working) in internet explorer 11 browser[/+]slgauravsharma commentedon May 20, 2019
@vinod827 yes its working fine in chrome and firefox but internet explorer (IE11) have issue.
miraage commentedon May 20, 2019
What does your
browserslistoption say?slgauravsharma commentedon May 20, 2019
@miraage
this is showing in IE11 in console and app is not loaded.
and if you see more details then there is repo link:-
https://github.com/slgauravsharma/react-redux-starter-kitpitric commentedon May 20, 2019
I am having the same issue. Create a new app with ‘npx create-react-app my-app –typescript’,
add Internet Explorer to the browserslist option and start the app.
It works fine in Edge and Chrome but will not start in Internet Explorer.
The deprecated version ‘npx create-react-app my-app --scripts-version=react-scripts-ts’ works in Internet Explorer with no problems.
ianschmitz commentedon May 20, 2019
@slgauravsharma your
browserslistisn't configured correctly to supportie 11. Please refer to our docs to properly configure it for your supported browsers: https://facebook.github.io/create-react-app/docs/supported-browsers-features#configuring-supported-browsers.pitric commentedon May 20, 2019
@ianschmitz it does not work from me. I create the app with ‘npx create-react-app my-app –typescript’, ‘npm install react-app-polyfill’ and add Internet Explorer to the browserslist option. It runs in Edge and Chrome but will not start in Internet Explorer.
Am I missing something?
bugzpodder commentedon May 20, 2019
@pitric did you run yarn start/npm start or yarn build/npm run build? Did you add the ie11 polyfills? It doesn't sound like you did. Please include full details.
pitric commentedon May 20, 2019
After some experimentation, I found the minimum steps require to run in Internet Explorer.
No need to add any polyfills since according to the documentation: ‘The browserslist configuration controls the outputted JavaScript so that the emitted code will be compatible with the browsers specified.’
ianschmitz commentedon May 21, 2019
@pitric please read the page I linked above in it's entirety. You will need to polyfill for ie support as mentioned in those docs. The docs also call out the need to delete
node_modules/.cachewhen editing browserslist.pitric commentedon May 21, 2019
@ianschmitz thanks Ian you are right. You do need the polyfills for more advanced applications, but the basic one works without them. You can delete node-modules to delete the cache or as you point out you can also delete node_modules/.cache directly.
slgauravsharma commentedon May 21, 2019
@ianschmitz @bugzpodder @petetnt i tried many ways as mentions in documentation but not getting success
this is my browserslist and i configured as mentions in official docs:-
browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"last 1 ie version"
]
}
i tried "last 1 ieversion", "IE 11", in node_modules delete cache and all stuff but still ie is not loaded (not working)
lastly i found and add index.html in
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>now its working. please let me know if i am not wrong or any suggestions is more appreciable.bugzpodder commentedon May 21, 2019
What's your index.js? did you add the polyfills there?
pitric commentedon May 21, 2019
@slgauravsharma I downloaded your repo and followed the following steps according to the documentation:
After all of this it still did not run in Internet Explorer, so I closed Visual Studio Code and re-opened it and it worked.
nononocat commentedon May 22, 2019
i sovle it by @ianschmitz's solution:
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"ie 11",
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}