vue.js - Vue 3 / Webpack 5 Issue while trying to Uglify my bundles

Question

I'm currently setting up a project with Vue 3 and Webpack. My dev config in webpack is now working as we expected, but when I'm trying to move to my prod one while using the uglify plugin I'm getting this error. Webpack Error at Prod Config While Using Uglify

I'm confused at this, I'm not sure if I made a mistake over the config while following the docs, or if Uglify is not supported for Webpack 5.

Here's my Prod config.

/*globals exports*/ // < EsLint exceptions
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const { LoaderOptionsPlugin, SourceMapDevToolPlugin } = require('webpack');
const BASE = require('./base.js');
const ID = 'production';

exports.isIt = NODE_ENV => NODE_ENV === ID;

/**
 * @pure true
 * @side_effect false
 * @return {object} webpack module config in mode production
 */
exports.generateData = () => {
    let processedConfig = BASE.generateData(ID);
    processedConfig.mode = ID;
  
    processedConfig.plugins.push(
        new LoaderOptionsPlugin({ minimize: true, debug: false })
    );

    //Generate external sourceMap
    processedConfig.devtool = false;

    processedConfig.plugins.push(
        new SourceMapDevToolPlugin({
            filename: 'production-js.js.map'
        })
    );

    processedConfig.optimization = {
        /* runtimeChunk: 'single',
        splitChunks: {
            cacheGroups: {
            vendor: {
                test: /[\/]node_modules[\/]/,
                name: 'vendors',
                priority: -10,
                chunks: 'all',
            },
            },
        }, */
        moduleIds: 'deterministic',
        minimizer: [
            new UglifyJsPlugin({
                cache: false,
                parallel: true,
                uglifyOptions: {
                    output: {
                        comments: false,
                        beautify: false,
                    },
                    compress: {
                        dead_code: true,
                        drop_console: true,
                        drop_debugger: true,
                    },
                    ecma: 5,
                    mangle: true,
                },
                sourceMap: true,
            }),
        ],
    };
    return processedConfig;
};

question from:https://stackoverflow.com/questions/66066770/vue-3-webpack-5-issue-while-trying-to-uglify-my-bundles

Answer 1

Waitting for answers