Как настроить typescript react app для ie 11?
Я не знаю, как правильно настроить приложения для работы в ie 11. Я пробовал много способов, и ни один из них не работал.
Error 1:
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>,
);

