Production build hangs at 92%

[melloc01]

Hello,

I think this is probably a bug with this plugin since the dev build works fine and when I run webpack --progress it gets stuck in:

92% chunk asset optimization UglifyJSPlugin

Below, the relevant parts of my webpack.config:

....

module.exports = {
    mode,
    node: { fs: 'empty' },
    entry: {
        ...entries
    },

    output: {
        filename: '[name].js',
        path: path.join(__dirname, '/public/assets/')
    },

    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: /(node_modules)/,
                use: 'babel-loader'
            },
            {
                test: /\.(scss|css)$/,
                use: [
                    MiniCssExtractPlugin.loader,

                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            }
        ]
    },

    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css'
        })
    ],

    resolve: {
        alias: {
            core: path.join(__dirname, 'js/core')
        }
    },

    optimization: {
        splitChunks: {
            minSize: 100000,
            chunks: 'initial',
            maxAsyncRequests: Infinity,
            maxInitialRequests: Infinity,
            name: true,
            cacheGroups: {
                styles: {
                    name: 'core',
                    test: /\.(scss|css)$/,
                    chunks: 'all',
                    enforce: true
                },
                vendor: {
                    name: 'vendor',
                    test: function (module) {
                        return /\/node_modules\//.test(module.context)
                    }
                },
                'core': {
                    name: 'core',
                    test: function (module) {
                        return /live-core\//.test(module.context)
                    }
                }
            }
        }
    }
}

Is this enough info? I tried to run with --debug --progress --display-error-details --verbose but nothing else came out

[melloc01]

Well, I post the config in case there is an error on it - if you don't spot an error I can create a repo that reproduces the error,

Thanks in advance 😊

[melloc01]

Instead of using the build-in module from webpack, when actually use the plugin on my webpack-config.js adding it to the plugins array and in dev mode, it works as expected, productionfails again.
Perhaps it's related to webpack.. 🤔

[melloc01]

Still experimenting...

Using -p seems to be the reason that I get stuck. (maybe it's the only way to activate the plugin?)

Using https://github.com/pingyuanChen/webpack-uglify-js-plugin works on -p mode, it was the workaround to get going for now

[alexander-akait]

@melloc01 can you create minimum reproducible test repo?

[alexander-akait]

@melloc01 Friendly ping 👍

[melloc01]

Thanks @evilebottnawi
Did not forget - just overloaded with other upgrade issues. HMR now :|

Will save some time on the weekend to set up the repo

News: someone on Gitter is having the same issue

[zlk89]

Same here, and I get out of memory error after a while:

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

This error happens to me every time I tried to use UglifyJSPlugin.

My dependencies:

{
    "autodll-webpack-plugin": ">=0.3.9",
    "autoprefixer": ">=8.2.0",
    "babel-loader": ">=8.0.0-beta.2",
    "babel-plugin-import": ">=1.7.0",
    "circular-dependency-plugin": ">=5.0.1",
    "compression-webpack-plugin": ">=1.1.11",
    "css-loader": ">=0.28.11",
    "file-loader": ">=1.1.11",
    "font-loader": ">=0.1.2",
    "happypack": ">=5.0.0-beta.3",
    "html-webpack-plugin": ">=3.2.0",
    "lodash": ">=4.17.5",
    "null-loader": ">=0.1.1",
    "postcss-loader": ">=2.1.3",
    "preload-image-loader": ">=1.0.0",
    "react-hot-loader": ">=4.0.1",
    "resolve-url-loader": ">=2.3.0",
    "sass-loader": ">=6.0.7",
    "stats-webpack-plugin": ">=0.6.2",
    "style-loader": ">=0.20.3",
    "uglifyjs-webpack-plugin": ">=1.2.4",
    "webpack": ">=4.5.0",
    "webpack-cli": ">=2.0.14"
  }

[alexander-akait]

@zlk89 do you use latest version?

[alexander-akait]

@zlk89 Also please create new issue, your problem is other

[erickwilder]

I just upgraded to webpack 4 (4.5.0) and I'm experiencing the same. It takes ages to finish the build process as it gets stuck on 92%.

[alexander-akait]

@erickwilder Can you crete minimum reproducible test repo?

[erickwilder]

My issue was apparently caused by the compress: true option of uglify - which is the default. Setting a custom uglify plugin instance overriding this configuration under the plugins list had no effect to change the compilation behavior.

I did solve it by moving uglify from the plugins to the optimization.minimizer list.

optimization.minimizer: [ new UglifyJsPlugin(...custom options) ]

Unfortunately this was the work of some digging through the code and other people's setup - I didn't find clear documentation about it.

[alexander-akait]

@erickwilder in webpack@4 you don't use plugins for minification, use minimizer property. If you use plugin field you have 2 instance of plugin. But will be great minimum reproducible test repo. In theory it is don't hangs.

[melloc01]

@evilebottnawi actually, if you specify the minimize property you just overwrite the default (built-in) UglifyJS as seen here:
https://survivejs.com/webpack/optimizing/minifying/

I actually set up a dummy repo that mimics the file structure (w/ dummy modules) of the original project but unfortunately it didn't hang, so it's not reproducible using dummy modules

I'm up for a call if you wanna dig into it @evilebottnawi, it's private so I can't just put on gh =\