Как настроить typescript react app для ie 11?

Я не знаю, как правильно настроить приложения для работы в ie 11. Я пробовал много способов, и ни один из них не работал.

Error 1:

enter image description here

Error 2: enter image description here

tsconfig.json

{
  "compilerOptions": {
    "noEmit": true,
    "target": "es5",
    "noImplicitAny": false,
    "sourceMap": true,
    "preserveConstEnums": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "noUnusedLocals": true,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "lib": [
      "dom","es5","es6","es7","es2017","es2015",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "esModuleInterop": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ],
  "awesomeTypescriptLoaderOptions": {
    "useBabel": true,
    "forkChecker": true,
    "useCache": false,
    "babelOptions": {
      "babelrc": false,
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": "last 2 versions, ie 11",
            "modules": false
          }
        ]
      ]
    },
    "babelCore": "@babel/core",
    "reportFiles": [
      "**/*.ts",
      "**/*.tsx"
    ]
  }
}

webpack.config.js

const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const glob = require('glob');
// const TerserPlugin = require('terser-webpack-plugin');
require('core-js/stable');

module.exports = {
  entry: ['core-js/stable', '@babel/preset-env', '@babel/preset-react', './src/index.tsx'],
  // {
  // app: ['core-js/stable', glob.sync('build/static/?(js|css)/main.*.?(js|css)').map(f => path.resolve(__dirname, f))],
  // app: ['core-js/stable', './src/index.tsx'],
  // },
  output: {
    filename: 'build/static/js/index.js',
    publicPath: 'auto',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: [/\bcore-js\b/, /\bwebpack\/buildin\b/],
        use: {
          loader: 'babel-loader',
          options: {
            babelrc: false,
            configFile: path.resolve(__dirname, 'babel.config.js'),
            compact: false,
            cacheDirectory: true,
            sourceMaps: false,
          },
        },
      },
      {
        test: /\.(css|scss)$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(woff2|ttf|svg)$/,
        type: 'asset/inline',
      },
    ],
  },
  // plugins: [new UglifyJsPlugin()],
  optimization: {
    minimize: true,
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          warnings: false,
          parse: {},
          compress: {},
          mangle: true, // Note `mangle.properties` is `false` by default.
          output: null,
          toplevel: false,
          nameCache: null,
          ie8: true,
          keep_fnames: false,
        },
      }),
    ],
  },
  resolve: {
    alias: {
      'core-js/features/symbol': 'core-js/features/symbol/index',
      'core-js/features/symbol/iterator': 'core-js/features/symbol/iterator',
      'core-js/features/symbol/to-string-tag': 'core-js/features/symbol/to-string-tag',
    },
  },
  target: ['web', 'browserslist:ie 11'],
};


package.json

{
  "name": "ui",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "dependencies": {
    "@floating-ui/react": "^0.22.3",
    "@reduxjs/toolkit": "^1.9.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.11",
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "apexcharts": "^3.37.1",
    "axios": "^1.2.6",
    "babel-polyfill": "^6.26.0",
    "classnames": "^2.3.2",
    "core-js": "3",
    "countries-and-timezones": "^3.4.1",
    "fast-text-encoding": "^1.0.6",
    "glob": "^8.1.0",
    "html-react-parser": "^3.0.9",
    "install": "^0.13.0",
    "loglevel": "^1.8.1",
    "moment": "^2.29.4",
    "normalize.scss": "^0.1.0",
    "ramda": "^0.28.0",
    "react": "^18.2.0",
    "react-apexcharts": "^1.4.0",
    "react-app-polyfill": "^3.0.0",
    "react-datepicker": "^4.10.0",
    "react-dom": "^18.2.0",
    "react-hot-keys": "^2.7.2",
    "react-hotkeys-hook": "^4.3.8",
    "react-input-mask": "^3.0.0-alpha.2",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.7.0",
    "react-scripts": "5.0.1",
    "react-tagsinput": "^3.20.0",
    "react-time-picker": "^5.2.0",
    "react-usestateref": "^1.0.8",
    "reactjs-popup": "^2.0.5",
    "redux": "^4.2.0",
    "redux-thunk": "^2.4.2",
    "sass": "^1.57.1",
    "terser-webpack-plugin": "^5.3.7",
    "ts-key-enum": "^2.0.12",
    "typescript": "*",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "url-loader": "^4.1.1",
    "uuid": "^9.0.0",
    "web-vitals": "^2.1.4",
    "webpack": "^5.75.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "npm run build:react && npm run build:bundle",
    "build:react": "react-scripts build",
    "build:bundle": "webpack --config webpack.config.js --mode=production"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": [
    "IE 11"
  ],
  "devDependencies": {
    "@babel/core": "^7.6.4",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-proposal-decorators": "^7.6.0",
    "@babel/plugin-transform-runtime": "^7.6.2",
    "@babel/preset-env": "^7.6.3",
    "@babel/preset-typescript": "^7.21.4",
    "@babel/runtime": "^7.6.3",
    "@types/ramda": "^0.28.22",
    "@types/react-datepicker": "^4.8.0",
    "@types/react-input-mask": "^3.0.2",
    "@types/react-tagsinput": "^3.19.9",
    "@types/react-time-picker": "^4.0.3",
    "@types/uuid": "^9.0.1",
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "@typescript-eslint/parser": "^5.54.0",
    "awesome-typescript-loader": "^5.2.1",
    "babel-loader": "^9.1.2",
    "eslint": "^8.0.1",
    "eslint-config-prettier": "^8.6.0",
    "eslint-config-standard-with-typescript": "^34.0.0",
    "eslint-import-resolver-typescript": "^3.5.3",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-n": "^15.0.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-react": "^7.32.2",
    "prettier": "^2.8.4",
    "react-svg-loader": "^3.0.3",
    "svg-url-loader": "^8.0.0",
    "webpack-cli": "^5.0.1"
  }
}

babel.config.js

module.exports = function (api) {
  api.cache(true);
  const presets = [
    [
      '@babel/preset-env',
      {
        corejs: {
          version: '3',
          proposals: true,
        },
        useBuiltIns: 'usage',
        targets: {
          browsers: ['edge >= 16', 'safari >= 9', 'firefox >= 57', 'ie >= 11', 'ios >= 9', 'chrome >= 49'],
        },
      },
    ],
  ];
  const plugins = [
    ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }],
  ];
  return {
    presets,
    plugins,
  };
};

index.tsx

import 'babel-polyfill';

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.scss';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { store } from './redux/store';
import logger from './helper/logger';

const root = ReactDOM.createRoot(document.getElementById('app') as HTMLElement);

import { injectStore } from './api/axios';
injectStore(store);
logger.info(navigator.userAgent);
root.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
);


Ответы (0 шт):