Click here to Skip to main content
14,545,215 members
Rate this:
Please Sign up or sign in to vote.
HI,
I am facing an issue with the browser support in IE 11 of my reactjs project.
Here is my code sample.

package.json
{
  "name": "my-project",
  "version": "0.1.0",
  "description": "",
  "scripts": {
    "start": "npm run dev",
    "dev": "node_modules/.bin/webpack-dev-server",
    "build": "node_modules/.bin/webpack --config webpack.config.prod.js"
  },
  "dependencies": {
    "antd": "^3.26.7",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.5",
    "babel-plugin-import": "^1.11.0",
    "classnames": "^2.2.6",
    "connected-react-router": "^6.6.1",
    "dotenv-webpack": "^1.7.0",
    "es6-promise": "^4.2.8",
    "formik": "^2.1.2",
    "history": "^4.9.0",
    "lodash": "^4.17.11",
    "office-ui-fabric-react": "^7.83.2",
    "prop-types": "^15.7.2",
    "q": "^1.5.1",
    "react": "^16.8.6",
    "react-csv": "^1.1.2",
    "react-dom": "^16.8.6",
    "react-drag-listview": "^0.1.6",
    "react-redux": "^7.1.3",
    "react-router": "^5.0.0",
    "react-router-dom": "^5.0.0",
    "react-select": "^3.0.8",
    "react-table": "^6.9.0",
    "reactjs-popup": "^1.5.0",
    "redux": "^4.0.5",
    "redux-auth-wrapper": "^3.0.0",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "xlsx": "^0.15.4",
    "yup": "^0.28.0"
  },
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/polyfill": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "@babel/preset-react": "^7.0.0",
    "@types/history": "^4.7.2",
    "@types/react": "^16.8.13",
    "autoprefixer": "^9.5.1",
    "autoprefixer-loader": "^3.2.0",
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "clean-webpack-plugin": "^2.0.1",
    "copy-webpack-plugin": "^5.0.2",
    "cross-env": "^5.2.0",
    "css-loader": "^2.1.1",
    "dotenv": "^7.0.0",
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.17.2",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.12.4",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "loader-utils": "^1.2.3",
    "mini-css-extract-plugin": "^0.6.0",
    "node-sass": "^4.13.1",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "postcss-loader": "^3.0.0",
    "style-loader": "^0.23.1",
    "stylelint": "^10.0.1",
    "stylelint-config-standard": "^18.3.0",
    "svg-sprite-loader": "4.1.3",
    "uglifyjs-webpack-plugin": "^2.1.2",
    "url-loader": "^1.1.2",
    "webpack": "^4.30.0",
    "webpack-bundle-analyzer": "^3.3.2",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.3.1"
  }
}


webpack.config.js
// const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const Dotenv = require('dotenv-webpack');

require('dotenv').config();

const {
  NODE_ENV,
  HOST,
  PORT,
  CONNECTION_TYPE,
  APP_NAME,
  VERSION,
  THEME_COLOR,
  PROXY_URL,
} = require('./webpack.constants');

const pathSource = path.resolve(__dirname, 'src');

const proxyConfig = PROXY_URL
  ? {
    proxy: {
      '/api/*': {
        target: PROXY_URL,
        pathRewrite: {'^/api/': ''},
        changeOrigin: true,
        secure: false,
        logLevel: 'debug',
        proxyTimeout: 1e3 * 60 * 5,
      },
    },
  }
  : {};

module.exports = {
  context: pathSource,
  entry: ['@babel/polyfill', './App.js'],
  mode: NODE_ENV,
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
    chunkFilename: '[name].bundle.js',
    publicPath: '/',
  },
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: path.resolve(__dirname, 'node_modules'),
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
        ],
      },
      {
        test: /\.less$/,
        exclude: /\.module\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'less-loader',
        ],
      },
      {
        test: /\.module\.less$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              modules: true,
              localIdentName: '[local]___[hash:base64:5]',
            },
          },
          'postcss-loader',
          'less-loader',
        ],
      },
      {
        test: /\.(ico)$/i,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
        },
      },
      {
        test: /\.pdf$/i,
        loader: 'file?name=[path][name].[ext]',
      },
      {
        test: /\.(jpe?g|png|gif|mp4)$/i,
        loader: 'url-loader',
        options: {
          name: '[path][name]-[sha512:hash:base64:4].[ext]',
          limit: 16384,
        },
      },
      {
        test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]',
        },
      },
    ],
  },
  optimization: {
    minimize: false,
    nodeEnv: NODE_ENV,
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.ProvidePlugin({}),
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html',
      themeColor: THEME_COLOR,
      version: VERSION,
      projectName: APP_NAME,
    }),
    new MiniCssExtractPlugin({
      filename: 'bundle.css',
    }),
    new CopyWebpackPlugin([{
      from: 'assets/images',
      to: 'images',
    }]),
    new Dotenv(),
    new CleanWebpackPlugin(),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  ],
  devtool: 'source-map',
  devServer: {
    port: PORT,
    host: HOST,
    disableHostCheck: true,
    historyApiFallback: true,
    hot: true,
    overlay: true,
    https: CONNECTION_TYPE === 'https',
    stats: {
      assets: false,
      children: false,
      colors: true,
      entrypoints: false,
      env: true,
      modules: false,
      moduleTrace: false,
    },
    ...proxyConfig,
  },
};


webpack.constant.js

module.exports = {
    NODE_ENV: process.env.NODE_ENV || 'development',
    HOST: process.env.HOST || 'localhost',
    PORT: process.env.PORT || 3000,
    CONNECTION_TYPE: process.env.CONNECTION_TYPE || 'http',
    APP_NAME: process.env.APP_NAME || 'Application',
    VERSION: process.env.VERSION || '0.1',
    THEME_COLOR: process.env.THEME_COLOR || '#000000',
    PROXY_URL: process.env.PROXY_URL || false,
};


When i do
npm start

every things works perfectly, But when i tries to run the project on IE11, It gives me below error under bundle.js at this specified line: 

function encoderForArrayFormat(options) {
	switch (options.arrayFormat) {
		case 'index':
			return key => (result, value) => {
				const index = result.length;
				if (value === undefined || (options.skipNull && value === null)) {
					return result;
				}

				if (value === null) {


What I have tried:

i have tried changing versions of webpack , @wabpack/polyfill and babel-loader. but its not working. Same error i am facing in IE 11.

Is there i am missing something? Please give some suggestion i can try.
Posted
Updated 10-Mar-20 3:24am
Comments
FireMonkey92 11-Mar-20 7:03am
   
I have already tried those solutions. I do not know where i am doing something wrong.

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

you have to install react-app-polyfill

this is added in index.js
import "react-app-polyfill/ie9";
import "react-app-polyfill/stable";
in package.js the following is added
"browserslist": {
    "production": [
        ">0.2%",
        "not dead",
        "not op_mini all"
    ],
    "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version",
        "ie 11"
    ]
}
and finally it is added in the .babelrc
{
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "browsers":[
              "last 5 versions",
              "ie >= 9"
            ],
            "node": "current"
          } 
        }
      ],
        "@babel/preset-react"
    ]
}
node cache is removed and should work
   
v2
Comments
Richard Deeming 18-May-20 12:28pm
   
This is an English-language site. Please post in English only.

Este es un sitio en inglés. Por favor, publique solo en inglés.
FireMonkey92 19-May-20 2:18am
   
This is English only
Richard Deeming 19-May-20 5:14am
   
It is now, but only because I edited the answer to translate it. It was originally posted in Spanish.
FireMonkey92 19-May-20 5:50am
   
Ok alright

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100