Production build hangs on "92% sealing asset processing FaviconsWebpackPlugin"

Current behaviour 💣

A lot of times Webpack build process hangs on 92% sealing asset processing FaviconsWebpackPlugin. This doesn’t happen always, but occurs ‘randomly’ with the exact same configuration and files; sometimes it continues without issues, sometimes it hangs forever.

The issue occurs on several projects here and it was already the case with webpack 4 and previous versions of this plugin. I was hoping this would be fixed with moving to webpack 5 and the latest version of the plugin, but it’s still the exact same issue happening ‘randomly’.

The hanging only appears when using the favicons-webpack-plugin or the terser-webpack-plugin. In all projects not using either of those (wich are around 15 projects) the issue never happens. I’m not sure if there is a common factor between these plugins causing this though. Could be two different issues.

I’ve tried fixing it by settings the NODE_OPTIONS’s --max_old_space_size to 5020 when launching webpack and checked that it actually changed the memory size (and it did), but that doesn’t help fixing the issue unfortunately.

It doesn’t seem to matter how large the project is so I’m completely blank on what this issue could be. I don’t get any error message and so it’s hard for me to debug what’s going wrong here.

To be clear: the times the process continues (around 70% of the times I run the build) everything works just fine and everything is generated exactly as expected. So I don’t see any issue in the configuration.

Also this issue never happens when running a Webpack build in development mode, which is also using the favicons webpack plugin.

How can we debug what’s going on and why the process hangs?

Expected behaviour ☀️

Continue and finishing build process.

Reproduction Example 👾

Configuration:

config.plugins.push(new FaviconsWebpackPlugin({
        mode: 'webapp',
        logo: `${srcAssetsPath}/favicon/faviconForGenerating.svg`,
        outputPath: `./${relativeFaviconOutputPath}`,
        inject: false,
        cache: true,

        favicons: {
            appName: projectName,
            appShortName: projectShortName,
            appDescription: appDescription,
            developerName: companyName,
            developerURL: companyWebsiteUrl,
            start_url: './', // eslint-disable-line camelcase
            scope: '.',
            lang: 'en-US',
            background: '#fff',
            theme_color: appThemeColor,
            icons: {
                android: true,
                appleIcon: false,
                appleStartup: false,
                coast: false,
                favicons: true,
                firefox: false,
                windows: true,
                yandex: false,
            },
        },
    }));

Environment 🖥

Node.js v14.17.5
win32 10.0.19042

favicons 6.2.2
favicons-webpack-plugin 5.0.2
html-webpack-plugin 5.5.0
webpack 5.61.0
webpack-cli 4.9.1

[roggenbrot]

Do you use eslint and have you updated it to version 8 lately?

I stumble upon this issue while searching for a solution for a nearly similar problem with WorkboxPlugin

Error was more or less the same, and I spend hours to debug the root cause of the problem until I disabled the eslint-plugin to speed up the build and debugging process and the error was gone.

It seems that the eslint causes deadlocks since version 8 on other plugins when using the option threads: true.

Removing this option on the eslint-plugin solved our problems.

[3nth]

This may be related. https://github.com/itgalaxy/favicons/issues/318

Noted there that favicons sometimes hangs at: [Favicons] Images:composite: Compositing favicon on 64x64 canvas with offset 0...

which is the same thing @bencresty has noted.