Menu
My react+redux app is not working on Internet explorer 11. It is working fine on edge, Firefox and chrome.
I have already tried so many answers available on internet like this but didn't get any success, below attached error is I am getting in console
when I opened this error it shows like this 
this file is generating when I am serving my app and can't change anything manually
package.json
{
"jest": {
"roots": [
"<rootDir>/"
],
"moduleFileExtensions": [
"js",
"jsx",
"json"
],
"testURL": "http://localhost",
"moduleDirectories": [
"node_modules",
"utils"
],
"testPathIgnorePatterns": [
"/node_modules/"
],
"coverageReporters": [
"text"
],
"collectCoverageFrom": [
"**/*.{js,jsx}",
"!**/node_modules/**",
"!**/flow-typed/**",
"!**/vendor/**",
"!./*"
],
"setupFilesAfterEnv": [
"./utils/jestUtils/setupTests.js"
],
"testEnvironment": "./utils/jestUtils/freezeDateEnvironment.js",
"moduleNameMapper": {
"\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/utils/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/utils/__mocks__/fileMock.js"
}
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@synapsestudios/react-drop-n-crop": "^0.2.0",
"attr-accept": "^1.1.0",
"axios": "^0.19.0",
"babel-polyfill": "^6.26.0",
"classnames": "^2.2.6",
"clone-deep": "^3.0.1",
"d3": "^4.9.1",
"deep-equal": "^1.0.1",
"draft-js": "0.10.5",
"draft-js-buttons": "2.0.1",
"draft-js-export-html": "1.2.0",
"file-saver": "^1.3.8",
"formsy-react": "^0.19.5",
"history": "^4.6.3",
"libphonenumber-js": "1.7.16",
"locate-path": "^2.0.0",
"mime": "^2.0.3",
"moment": "^2.18.1",
"nanoid": "^1.0.1",
"node": "^12.10.0",
"node-gyp": "^5.0.3",
"path-to-regexp": "^2.2.1",
"prettier": "^1.6.1",
"prop-types": "^15.5.10",
"qs": "6.7.0",
"query-string": "5.1.1",
"react": "16.7.0",
"react-app-polyfill": "^1.0.5",
"react-autofill": "^1.1.4",
"react-cropper": "^1.0.0",
"react-datepicker": "^1.4.1",
"react-dom": "16.7.0",
"react-dropzone": "^4.1.3",
"react-geosuggest": "2.12.0",
"react-html-parser": "^2.0.2",
"react-infinite-scroller": "^1.1.1",
"react-input-range": "^1.1.4",
"react-intl": "^2.4.0",
"react-intl-redux": "^0.7.0",
"react-media": "^1.8.0",
"react-modal": "^2.3.3",
"react-phone-number-input": "2.3.2",
"react-quill": "^1.0.0",
"react-redux": "^5.0.5",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.2",
"react-scripts": "1.0.10",
"react-select": "^1.0.0-rc.5",
"react-select-plus": "^1.1.0",
"react-tooltip": "^3.3.0",
"react-transition-group": "2.5.3",
"recompact": "^3.3.0",
"redux": "4.0.1",
"redux-form": "7.3.0",
"redux-thunk": "^2.2.0",
"reselect": "^3.0.1",
"resolve-url-loader": "^2.0.2",
"select2": "^4.0.3",
"snake-case": "^2.1.0",
"svg-inline-loader": "^0.7.1",
"svg-url-loader": "^2.0.2",
"validator": "^8.0.0"
},
"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"
]
},
"devDependencies": {
"@babel/core": "7.4.4",
"@babel/node": "7.4.5",
"@babel/plugin-proposal-class-properties": "7.4.4",
"@babel/plugin-proposal-object-rest-spread": "7.4.4",
"@babel/plugin-proposal-optional-chaining": "7.2.0",
"@babel/plugin-transform-arrow-functions": "7.2.0",
"@babel/plugin-transform-classes": "7.4.4",
"@babel/plugin-transform-runtime": "7.4.4",
"@babel/preset-env": "7.4.4",
"@babel/preset-flow": "7.0.0",
"@babel/preset-react": "7.0.0",
"autoprefixer": "^9.5.1",
"axios-mock-adapter": "^1.10.0",
"babel-eslint": "10.0.1",
"babel-loader": "8.0.6",
"babel-plugin-react-intl": "3.0.1",
"babel-plugin-react-intl-auto": "1.7.0",
"colors": "1.3.3",
"cross-env": "^5.1.4",
"css-loader": "3.0.0",
"cssnano": "4.1.10",
"del-cli": "^1.1.0",
"enzyme": "3.8.0",
"enzyme-adapter-react-16": "1.7.1",
"eslint": "5.16.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-import-resolver-webpack": "^0.10.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-babel": "^5.1.0",
"eslint-plugin-flowtype": "3.8.2",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jest": "22.1.2",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.1.0",
"file-loader": "3.0.1",
"flow-babel-webpack-plugin": "1.1.1",
"flow-bin": "0.102.0",
"flow-typed": "2.5.2",
"glob": "^7.1.2",
"jest": "24.8.0",
"mini-css-extract-plugin": "^0.6.0",
"node-sass": "^4.12.0",
"postcss-easy-import": "^3.0.0",
"postcss-loader": "^3.0.0",
"react-docgen": "^2.20.1",
"react-hot-loader": "^4.3.12",
"react-test-renderer": "^15.6.2",
"redux-devtools": "3.5.0",
"redux-devtools-dock-monitor": "1.1.3",
"redux-devtools-log-monitor": "1.4.0",
"redux-mock-store": "^1.4.0",
"sass-loader": "^6.0.6",
"uglifyjs-webpack-plugin": "^1.1.2",
"url-loader": "^2.1.0",
"webpack": "4.31.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "3.3.1"
}
}
.babelrc
{
"presets": [
["@babel/preset-env", { "targets": { "ie": "11", "esmodules": true }}],
"@babel/preset-react",
"@babel/preset-flow"
],
"plugins": [
"@babel/plugin-transform-runtime",
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-optional-chaining",
"react-hot-loader/babel",
"@babel/plugin-transform-classes",
"@babel/plugin-transform-arrow-functions"
],
"env": {
"lang":{
"plugins": ["@babel/plugin-syntax-object-rest-spread", ["react-intl", {
"messagesDir": "../assets/build-translations/messages/"
}]]
}
}
}
webpackconfig.js
const { DefinePlugin, NamedModulesPlugin } = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const FlowBabelWebpackPlugin = require('flow-babel-webpack-plugin');
const path = require('path');
require('babel-polyfill');
const webpackAlias = require('./webpack.config.alias');
const pagenames = require('./utils/pageNames');
const DEV_SERVER_PUBLIC_PATH = 'http://192.168.1.14:44444/webpack/static/';
const environment = process.env && process.env.NODE_ENV || 'production';
const PROD = environment === 'production';
const environmentValues = new DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(environment)
});
const UglifyJSPluginInit = new UglifyJSPlugin({
uglifyOptions: {
beautify: false,
ecma: 6,
compress: true,
comments: false,
parallel: true,
sourceMap: true,
warnings: false,
}
});
const flowPlugin = environment === 'lang' ? [] : [new FlowBabelWebpackPlugin()];
const commonPlugins = [environmentValues, ...flowPlugin, new MiniCssExtractPlugin({
filename: '[name].css',
})];
const productionPlugins = [UglifyJSPluginInit];
const pluginsArr = PROD
? [...commonPlugins, ...productionPlugins]
: [...commonPlugins, new NamedModulesPlugin()];
const devtool = PROD ? false : 'cheap-source-map';
const imagePublicPath = PROD ? '/static/' : DEV_SERVER_PUBLIC_PATH;
const modeAlias = PROD ? 'production' : 'development';
const outputPath = path.resolve(__dirname, '../assets');
const entry = {
app: './utils/app.js',
'password-reset': './utils/scss/password-reset.scss',
[pagenames.pageNames1]: './fileurl.js',
[pagenames.pageNames2]: './fileurl.js',
[pagenames.pageNames3]: './fileurl.js',
[pagenames.pageNames4]: './fileurl.js',
};
const config = {
...webpackAlias,
mode: modeAlias,
optimization: {
splitChunks: {
cacheGroups: {
commons: {
minChunks: 13,
name: 'commons',
chunks: 'all',
},
},
}
},
context: __dirname,
entry,
devtool,
output: {
path: outputPath,
publicPath: '/webpack/static/',
filename: '[name].js',
},
devServer: {
contentBase: outputPath,
port: 44444,
host: '192.168.1.14',
publicPath: DEV_SERVER_PUBLIC_PATH,
stats: {
errors: true,
warnings: true,
assets: false,
chunks: true,
chunkGroups: true,
chunkModules: true,
chunkOrigins: true,
builtAt: false,
cached: false,
timings: false,
outputPath: false,
modules: true,
entrypoints: true,
},
headers: {
"Access-Control-Allow-Origin": "\*",
}
},
module: {
rules: [
{
test: /\.svg$/,
loader: 'svg-url-loader'
},
{
test: /\.js$/,
exclude: path.resolve(__dirname, "node_modules"),
include: __dirname,
use: [
{
loader: 'babel-loader',
},
{
loader: 'eslint-loader',
options: {
failOnWarning: false,
failOnError: true
}
}
]
},
{
test: /\.(png|jpg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000, // Convert images < 10kb to base64 strings
publicPath: imagePublicPath // Since the fallback is file-loader, We end up serving from /static/{file} or during development - wherever the server is located
}
}
]
},
{
test: /\.scss|css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: !PROD,
reloadAll: true,
},
},
{
loader: 'css-loader',
options: {
sourceMap: true,
}
},
{ loader: 'postcss-loader' },
{
loader: 'resolve-url-loader'
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
},
]
}
]
},
plugins: pluginsArr
};
console.log('process.env.NODE_ENV', environment);
module.exports = config;
Any help would be appreciated, Thanks in advance.
287
That's why the application not run properly on IE. The solution is to use polyfill to make your existing code backward compatible. A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.
Learn more at the React docs. If you use arrow functions within render , each call to render will create new function objects. If you then pass these functions to child elements via props , optimizations based on PureComponent or shouldComponentUpdate will fail (as the arrow function props will change on every render).
This is why IE does not run properly with the application.Replace the obsolete coding patterns in your existing code by using polyfill.It is code (JavaScript on the Web) that provides modern functionality to older browsers that have not natively supported it natively. Why Does My React App Not Work On Internet Explorer?
Thanks in advance. React supports all popular browsers, including Internet Explorer 9 and above, although some polyfills are required for older browsers such as IE 9 and IE 10.
REACT – Simple Intro Component Not Rendering? One of the great things about React is its flexible component system. Once you get a hang of it, you can break up your application into reusable components and include them all over your project.
One of the great things about React is its flexible component system. Once you get a hang of it, you can break up your application into reusable components and include them all over your project.
I can see on your .babelrc presets, under @babel/preset-env you are defining "esmodules": true.
Based on the @babel/preset-env documentation, if you set esmodules to true, browsers targets will be ignored.
Please note: when specifying the esmodules target, browsers targets will be ignored.
Can you try changing this option to see if you have any luck?
Also, I suggest you try a production build to see if you get the same error/behavior.
165
Try to delete the package-lock.json and the node_modules folder, then using the following package.json content (change the name to your application name. In this file, I changed some package version.) and execute the npm install commands to install the related package. I have created a sample using this file, it works well on my side.
{
"name": "<your application name>",
"version": "0.1.0",
"private": true,
"dependencies": {
"@synapsestudios/react-drop-n-crop": "^0.2.0",
"attr-accept": "^1.1.0",
"axios": "^0.19.0",
"babel-polyfill": "^6.26.0",
"classnames": "^2.2.6",
"clone-deep": "^3.0.1",
"d3": "^4.9.1",
"deep-equal": "^1.0.1",
"draft-js": "0.10.5",
"draft-js-buttons": "2.0.1",
"draft-js-export-html": "1.2.0",
"file-saver": "^1.3.8",
"formsy-react": "^0.19.5",
"history": "^4.6.3",
"libphonenumber-js": "1.7.16",
"locate-path": "^2.0.0",
"mime": "^2.0.3",
"moment": "^2.18.1",
"nanoid": "^1.0.1",
"node": "^12.10.0",
"node-gyp": "^5.0.3",
"path-to-regexp": "^2.2.1",
"prettier": "^1.6.1",
"prop-types": "^15.5.10",
"qs": "6.7.0",
"query-string": "5.1.1",
"raf": "^3.4.1",
"react": "^16.8.6",
"react-app-polyfill": "^1.0.1",
"react-autofill": "^1.1.4",
"react-cropper": "^1.0.0",
"react-datepicker": "^1.4.1",
"react-dom": "^16.8.6",
"react-dropzone": "^4.1.3",
"react-geosuggest": "2.12.0",
"react-html-parser": "^2.0.2",
"react-infinite-scroller": "^1.1.1",
"react-input-range": "^1.3.0",
"react-intl": "^2.4.0",
"react-intl-redux": "^0.7.0",
"react-media": "^1.8.0",
"react-modal": "^2.3.3",
"react-phone-number-input": "2.3.2",
"react-quill": "^1.0.0",
"react-redux": "^7.1.0",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.2",
"react-scripts": "3.0.1",
"react-select": "^1.0.0-rc.5",
"react-select-plus": "^1.1.0",
"react-tooltip": "^3.3.0",
"react-transition-group": "2.5.3",
"recompact": "^3.3.0",
"redux": "^4.0.4",
"redux-form": "^8.2.5",
"redux-thunk": "^2.2.0",
"reselect": "^3.0.1",
"resolve-url-loader": "^2.0.2",
"select2": "^4.0.3",
"snake-case": "^2.1.0",
"svg-inline-loader": "^0.7.1",
"svg-url-loader": "^2.0.2",
"validator": "^8.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"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"
]
},
"devDependencies": {
"@babel/core": "7.4.4",
"@babel/node": "7.4.5",
"@babel/plugin-proposal-class-properties": "7.4.4",
"@babel/plugin-proposal-object-rest-spread": "7.4.4",
"@babel/plugin-proposal-optional-chaining": "7.2.0",
"@babel/plugin-transform-arrow-functions": "7.2.0",
"@babel/plugin-transform-classes": "7.4.4",
"@babel/plugin-transform-runtime": "7.4.4",
"@babel/preset-env": "7.4.4",
"@babel/preset-flow": "7.0.0",
"@babel/preset-react": "7.0.0",
"autoprefixer": "^9.5.1",
"axios-mock-adapter": "^1.10.0",
"babel-eslint": "10.0.1",
"babel-loader": "8.0.6",
"babel-plugin-react-intl": "3.0.1",
"babel-plugin-react-intl-auto": "1.7.0",
"colors": "1.3.3",
"cross-env": "^5.1.4",
"css-loader": "3.0.0",
"cssnano": "4.1.10",
"del-cli": "^1.1.0",
"enzyme": "3.8.0",
"enzyme-adapter-react-16": "1.7.1",
"eslint": "5.16.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-import-resolver-webpack": "^0.10.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-babel": "^5.1.0",
"eslint-plugin-flowtype": "3.8.2",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jest": "22.1.2",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.1.0",
"file-loader": "3.0.1",
"flow-babel-webpack-plugin": "1.1.1",
"flow-bin": "0.102.0",
"flow-typed": "2.5.2",
"glob": "^7.1.2",
"jest": "24.8.0",
"mini-css-extract-plugin": "^0.6.0",
"node-sass": "^4.12.0",
"postcss-easy-import": "^3.0.0",
"postcss-loader": "^3.0.0",
"react-docgen": "^2.20.1",
"react-hot-loader": "^4.3.12",
"react-test-renderer": "^15.6.2",
"redux-devtools": "^3.5.0",
"redux-devtools-dock-monitor": "1.1.3",
"redux-devtools-log-monitor": "1.4.0",
"redux-mock-store": "^1.4.0",
"sass-loader": "^6.0.6",
"uglifyjs-webpack-plugin": "^1.1.2",
"url-loader": "^2.1.0",
"webpack": "4.31.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "3.3.1"
}
}
Unless you're supplying a .babelrc or babel.config.js (documentation) that you didn't include with your question, then your @babel/preset-env dependency may not be getting applied during transpilation.
The default behavior for @babel/preset-env is to transpile down to EMCAScript 2015+, which would then work for IE11.
Sidenote, if no targets are specified, @babel/preset-env will transform all ECMAScript 2015+ code by default.
I would suggest adding one of those. For example:
.babelrc
{
"presets": ["@babel/preset-env"]
}
babel.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: ["@babel/preset-env"],
};
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
