ERROR in bundle.js from Terser Invalid assignment bundle.js

Question

I have a problem with terser-webpack-plugin I can't minify my bundle the error is

ERROR in bundle.js from Terser Invalid assignment bundle.js

I have the version of "terser-webpack-plugin": "4.2.3", "webpack": "^4.33.0", "clean-webpack-plugin": "^3.0.0", "dotenv-webpack": "^1.7.0" and React 17.0.0

here you can see my webpack configuration

const HtmlWebpackPlugin = require('html-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { EnvironmentPlugin, ProgressPlugin } = require('webpack');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

const modeConfig = (env, target) => require(`./build-utils/webpack.${env}`)(target);
const presetConfig = require('./build-utils/loadPresets');
const targetUtils = require('./build-utils/targetUtils');

module.exports = ({ mode, presets, target } = { mode: 'production', presets: [] }) => {
    return webpackMerge(
        {
            mode, // minify the code in production mode
            entry: './src/index.tsx',
            output: {
                path: path.join(__dirname, 'dist'),
                filename: 'bundle.js',
            },
            module: {
                rules: [
                    {
                        test: /\.tsx?$/,
                        loader: 'awesome-typescript-loader',
                        options: {
                            configFileName: 'tsconfig.build.json',
                        },
                    },
                ],
            },
            resolve: {
                extensions: ['.ts', '.tsx', '.json', '.js'],
                plugins: [new TsconfigPathsPlugin()],
            },
            plugins: [
                new CleanWebpackPlugin(),
                new Dotenv({ path: targetUtils.getEnvFile(target), systemvars: true }),
                new ProgressPlugin(),
                new HtmlWebpackPlugin({
                    template: path.resolve(rootDir, 'index.html'),
                    mode,
                }),

                new EnvironmentPlugin(process.env),
            ],
            externals: targetUtils.getExternals(target),
            node: {
                fs: 'empty',
            },
        },
        modeConfig(mode, target),
        presetConfig({ mode, presets }),
    );
};

const targetUtils = require('./targetUtils');
const TerserJSPlugin = require('terser-webpack-plugin');

module.exports = target => ({
    optimization: {
        minimize: true,
        minimizer: [
            new TerserJSPlugin({
                extractComments: false,
                terserOptions: {
                    compress: {
                        drop_console: true,
                    },
                },
            }),
        ],
    },
    stats: {
        warnings: false,
    },
    resolve: {
        alias: targetUtils.getAlias(target),
    },
});```


I did a yarn build without going through the Terser and it compiles without problems until the terser enters configuration, I don't know if it is a dependency problem or some extra config that I need with the Terser. 

change libraries, change configurations in my webpack 

Answer 1

I resolved this problem by using a new loader to support Webpack 5 and TS-LOADER, along with other updates by Webpack 5.