Create react app is not loaded (not working) in internet explorer 11 browser

[slgauravsharma]

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

[vinod827]

does it work on other browsers like Chrome?

[slgauravsharma]

@vinod827 yes its working fine in chrome and firefox but internet explorer (IE11) have issue.

[miraage]

What does your browserslist option say?

[slgauravsharma]

@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-kit

[pitric]

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]

@slgauravsharma your browserslist isn't configured correctly to support ie 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]

@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]

@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]

After some experimentation, I found the minimum steps require to run in Internet Explorer.

1. Create the app with: npx create-react-app my-app –typescript
2. To the browserslist development in package.json add: last 1 ie version
3. Delete: node-modules
4. Reinstall react: npm i –save react
5. Run the app: npm run start

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]

@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/.cache when editing browserslist.

[pitric]

@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]

@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]

What's your index.js? did you add the polyfills there?

[pitric]

@slgauravsharma I downloaded your repo and followed the following steps according to the documentation:

1. Add Internet Explorer to the browserslist: last 1 ie version
2. Delete: node_modules/.cache
3. Install the polyfill: npm install react-app-polyfill
4. Add the imports: react-app-polyfill/ie11 and react-app-polyfill/stable
5. Run the app: npm run start

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]

i sovle it by @ianschmitz's solution:

1. edit browserslist in package.json
   "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"
   ]
   }
2. delete .cache in node_modules