IE11 browser: getting SCRIPT1002 Syntax Error in React App

Question

Been trying to make my React app work with IE11 with not luck so far.

Getting the error:

Basically this error points to arrow function during bundle

I already tried adding react-app-polyfill in my index.js file and then in my package the advised config from this article and other posts .

I downgraded query-string to 5.1.1 like advised here.

And also tried importing core-js/stable and regenerator like advised here.

Also deleted node_modules and or only cache via rm -rf node_modules/.cache/.

And probably checked all similar issues as mine here in SO.

Sadly none of these options have helped me at all.

Anybody sees something in my config?

My package.json config:

{
  "scripts": {
    "postinstall": "patch-package",
    "start": "cross-env NODE_ENV=development node ./server.js",
    "start:debug": "cross-env NODE_ENV=development node --inspect ./server.js",
    "start:prod": "cross-env NODE_ENV=production node ./server.js",
    "lint": "eslint --fix ./src ./server",
    "build": "cross-env NODE_ENV=production webpack",
    "prestart": "npm run lint",
    "prebuild": "npm run lint"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 11"
    ]
  },
  "author": "elios264",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/preset-env": "^7.12.7",
    "@babel/preset-react": "^7.12.7",
    "@hot-loader/react-dom": "^17.0.1",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.2",
    "babel-preset-env": "^1.7.0",
    "classnames": "^2.2.6",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^6.3.2",
    "core-js": "^3.8.0",
    "cross-env": "^7.0.3",
    "crypto-browserify": "^3.12.0",
    "css-loader": "^5.0.1",
    "css-minimizer-webpack-plugin": "^1.1.5",
    "downscale": "^1.0.6",
    "eslint": "^7.14.0",
    "eslint-import-resolver-node": "^0.3.4",
    "eslint-import-resolver-webpack": "^0.13.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "file-dialog": "0.0.8",
    "file-loader": "^6.2.0",
    "jwt-decode": "^3.1.2",
    "less": "^3.12.2",
    "less-loader": "^7.1.0",
    "mini-css-extract-plugin": "^1.3.1",
    "moment-duration-format": "^2.3.2",
    "moment-locales-webpack-plugin": "^1.2.0",
    "patch-package": "^6.2.2",
    "path-browserify": "^1.0.1",
    "process": "^0.11.10",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-day-picker": "^7.4.8",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-hot-loader": "^4.13.0",
    "react-rangeslider": "^2.2.0",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-virtualized": "^9.22.2",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
    "search-parser": "^0.1.19",
    "semantic-ui-less": "^2.4.1",
    "semantic-ui-react": "^2.0.1",
    "stream-browserify": "^3.0.0",
    "sweetalert": "^2.1.2",
    "tachyons": "^4.12.0",
    "terser-webpack-plugin": "^5.0.3",
    "webpack": "^5.9.0",
    "webpack-assets-manifest": "^3.1.1",
    "webpack-cli": "^4.2.0",
    "webpack-dev-middleware": "^4.0.2",
    "webpack-hot-middleware": "^2.25.0",
    "xlsx": "^0.16.9"
  },
  "dependencies": {
    "@azure/storage-blob": "^12.3.0",
    "@supercharge/promise-pool": "^1.6.0",
    "applicationinsights": "^1.8.10",
    "compression": "^1.7.4",
    "cors": "^2.8.5",
    "env2": "^2.2.2",
    "express": "^4.17.1",
    "fast-xml-parser": "^3.17.5",
    "joi": "^17.3.0",
    "jsonwebtoken": "^8.5.1",
    "jwk-to-pem": "^2.0.4",
    "knex": "^0.21.12",
    "locutus": "^2.0.14",
    "lodash": "^4.17.20",
    "mjml": "^4.7.1",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.32",
    "mssql": "^6.2.3",
    "nanoid": "^3.1.20",
    "node-cache": "^5.1.2",
    "node-fetch": "^2.6.1",
    "nodemailer": "^6.4.16",
    "parse": "^2.17.0",
    "parse-dashboard": "^2.1.0",
    "parse-server": "^4.4.0",
    "query-string": "^5.1.1",
    "react-app-polyfill": "^2.0.0",
    "react-sortable-hoc": "^1.11.0",
    "saslprep": "^1.0.3",
    "sharp": "^0.26.3",
    "uuid": "^8.3.1"
  }
}

My babel.config.js

module.exports = {
  sourceType: process.env.NODE_ENV === 'production' ? 'unambiguous' : 'module',
  presets: [
    ['@babel/preset-react', { 'runtime': 'automatic' }],
    ['@babel/preset-env', {
      loose: true,
      useBuiltIns: 'usage',
      corejs: { version: 3, proposals: true },
      modules: false,
      targets: { browsers: process.env.NODE_ENV === 'production' ? 'chrome 53' : 'chrome 86' },
    }],
  ],
  plugins: [
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    'react-hot-loader/babel',
  ],
};

And my appLoader which is equivalent to index.js

/* eslint-disable import/first */
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
// also tried with 
// import core-js/stable; 
// import regenerator-runtime/runtime
import 'tachyons';

import ReactDOM from 'react-dom';
import { MemoryRouter, Route } from 'react-router-dom';


import { App } from './components/app';


ReactDOM.render(
  <MemoryRouter>
    <Route component={App} />
  </MemoryRouter>,
  document.getElementById('root')
);

Finally my webpack.config.js

require('env2')('./.env');

const _ = require('lodash');
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const WebpackAssetsManifest = require('webpack-assets-manifest');
const ClosurePlugin = require('closure-webpack-plugin');

const isDev = process.env.NODE_ENV !== 'production';
const ifDev = (then) => (isDev ? then : null);
const ifProd = (then) => (!isDev ? then : null);

module.exports = {
  target: isDev ? 'web' : ['web', 'es5'],
  profile: true,
  mode: isDev ? 'development' : 'production',
  entry: {
    admin: [ifDev('webpack-hot-middleware/client'), ifDev('react-hot-loader/patch'), './admin/appLoader'].filter(_.identity),
    sso: ['./sso/publicPath', ifDev('webpack-hot-middleware/client?dynamicPublicPath=true'), ifDev('react-hot-loader/patch'), './sso/appLoader'].filter(_.identity),
  },
  optimization: {
    runtimeChunk: isDev,
    minimizer: [
      new TerserPlugin({ extractComments: false, terserOptions: { toplevel: true, output: { comments: false } } }),
      new CssMinimizerPlugin(),
      new ClosurePlugin({mode: 'STANDARD'}, {
        debug: true,
        languageOut: 'ECMASCRIPT5',
        renaming: false
      })
    ],
  },
  performance: { hints: false },
  context: path.resolve(__dirname, './src'),
  devtool: false,
  output: {
    publicPath: '/',
    path: path.resolve(__dirname, './dist'),
    filename: isDev ? '[name].bundle.js' : '[name].bundle.[contenthash].js',
  },
  resolve: {
    fallback: {
      'crypto': require.resolve('crypto-browserify'),
      'path': require.resolve('path-browserify'),
      'stream': require.resolve('stream-browserify'),
    },
    modules: [path.resolve(__dirname, './src'), path.resolve(__dirname, './assets'), 'node_modules'],
    alias: {
      '@': path.resolve(__dirname, './src'), // include your file like this in less files: ~@/yourFile.less
      '../../theme.config$': path.join(__dirname, './src/theme/semantic/theme.config.less'), // semantic requirement
      'react-dom': isDev ? '@hot-loader/react-dom' : 'react-dom',
    },
  },
  plugins: [
    new webpack.ProvidePlugin({ process: 'process/browser' }),
    ifDev(new webpack.SourceMapDevToolPlugin({ filename: '[file].map', exclude: /node_modules/ })),
    ifProd(new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: ['**/*', path.join(process.cwd(), 'logs/**/*')], verbose: true })),
    ifProd(new webpack.LoaderOptionsPlugin({ minimize: true, debug: false })),
    new MomentLocalesPlugin(),
    ifDev(new webpack.HotModuleReplacementPlugin()),
    new WebpackAssetsManifest({ publicPath: true, writeToDisk: true, entrypoints: true, output: '../rendering-manifest.json' }),
    new MiniCssExtractPlugin({ filename: isDev ? '[name].css' : '[name].bundle.[contenthash].css' }),
    ifProd(new CopyWebpackPlugin({ patterns: [{ from: path.resolve(__dirname, './assets/static') }] })),
  ].filter(_.identity),
  module: {
    rules: [{
      test: /\.js$/,
      include: [path.resolve(__dirname, './src'), ifProd(path.resolve(__dirname, './node_modules/joi'))].filter(_.identity),
      use: 'babel-loader',
    }, {
      test: /\.(css|less)$/,
      use: [
        { loader: MiniCssExtractPlugin.loader },
        { loader: 'css-loader', options: { importLoaders: 1, sourceMap: isDev } },
        { loader: 'less-loader', options: { sourceMap: isDev } },
      ],
    }, {
      test: /\.jpe?g$|\.gif$|\.png$|\.ico$|\.ttf$|\.eot$|\.svg$|\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      use: [{ loader: 'file-loader', options: { esModule: false, name: isDev ? '[name].[ext]' : '[name].[contentHash].[ext]' } }],
    }],
  },
};