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

[bencresty]

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

[bencresty]

This issue is happening pretty much all the time. This makes the plugin pretty much unusable here and is only causing much frustration. Most builds need to be done 2 or even three times just because this plugin holds the webpack process every time.

Also none reaction here whatsoever. Which makes me wonder if this plugin is even maintained.

Getting rid of this plugin now as I don't have any other choice to get a sane workflow againl.

[jantimon]

I am sorry to hear but I can't reproduce this issue on my machine..

The log message you are seeing is the last output so it doesn't really mean that it's coming from the favicon webpack plugin

[bencresty]

@jantimon Thanks for your reaction. I don't like it either. There seem to be no alternative and I'd rather kept using it. However I already have debug messages enabled in webpack and it doesn't give me ANY clue on where to look. The only thing I can see is that it is pretty much always holding on the step I described, showing FaviconWebpackPlugin. So either it is taking forever (meaning hours) to finish or it gets stuck every time. Whatever of both; it's just unworkable.

I'm pretty certain I don't have anything wrong in my webpack setup and I'm not a newbie on that either. Everything is pretty well configured AFAIK. It looks like some errornous thing somewhere is just not handled well in either this plugin, something coming after it or how Webpack handles it. Otherwise I would've expected a descriptive error message popping up in the terminal. It's just frustrating as there seems to be no way to debug this.

Weird thing is that when this happens (which is pretty much 99% of the time) it might build fully when directly after the first try run the prod. build a second or third time. So it does do something and doesn't need to be busy for hours nor needs to get stuck on it.

It is just impossible for me to debug though or even pinpoint what is causing this, so I can only follow what is currently on the output; and that is FaviconWebpackPlugin.

I was hoping this was solved by updating everything to Webpack 5 and all packages accordingly. But unfortunately it only got worse and now happens pretty much all the time. Sigh.

[jantimon]

is it fixed once you remove the plugin?

[bencresty]

@jantimon Yes, on every project not using this plugin the issue isn't there. Also when in dev-mode instead of prod-mode the issue isn't there when the plugin is behind a condition to only execute at production environment.

Could it perhaps be related to the fact that I'm using an SVG as a logo input? I'm using an svgo loader on svgs in the project, but I might expect the plugin isn't using loaders underwater right?

[3nth]

For "reasons", our build ends up running webpack --mode=production twice and I have also noted that this never happens the first time and almost always happens the second time.

Was able to address that in our build by adding cache: { type: 'filesystem' } but that effectively just skips the second build.

[jantimon]

Could you please add some console.log statements in your node_modules/favicons-webpack-plugin/src/index.js file?

The prod favicon generation part is here:

favicons-webpack-plugin/src/index.js

Lines 402 to 427 in c708ca9

	const RawSource = compilation.compiler.webpack.sources.RawSource;
	const favicons = loadFaviconsLibrary();
	// Generate favicons using the npm favicons library
	const { html: tags, images, files } = await favicons(logoSource, {
	// Generate all assets relative to the root directory
	// to allow relative manifests and to set the final public path
	// once it has been provided by the html-webpack-plugin
	path: '',
	...this.options.favicons
	});
	const modifiedFiles = files.map(file => {
	if (file.name.endsWith('manifest.json')) {
	const generatedManifest = JSON.parse(file.contents.toString('utf-8'));
	return {
	...file,
	contents: JSON.stringify(
	mergeManifests(generatedManifest, baseManifest),
	null,
	2
	)
	};
	}
	return file;

you can also enable the favicons logging feature: https://github.com/itgalaxy/favicons

[bencresty]

Could you please add some console.log statements in your node_modules/favicons-webpack-plugin/src/index.js file?

I'll do that in one of the projects here.

The prod favicon generation part is here:

favicons-webpack-plugin/src/index.js

Lines 402 to 427 in c708ca9

	const RawSource = compilation.compiler.webpack.sources.RawSource;
	const favicons = loadFaviconsLibrary();
	// Generate favicons using the npm favicons library
	const { html: tags, images, files } = await favicons(logoSource, {
	// Generate all assets relative to the root directory
	// to allow relative manifests and to set the final public path
	// once it has been provided by the html-webpack-plugin
	path: '',
	...this.options.favicons
	});
	const modifiedFiles = files.map(file => {
	if (file.name.endsWith('manifest.json')) {
	const generatedManifest = JSON.parse(file.contents.toString('utf-8'));
	return {
	...file,
	contents: JSON.stringify(
	mergeManifests(generatedManifest, baseManifest),
	null,
	2
	)
	};
	}
	return file;

Thanks. By only looking at this code piece alone the first thing grabbing my attention in that code is that a catch is missing around the await favicons(.... I would expect either a catch or a try, catch there. Promises without a catch will be deprecated and there also isn't a try { } catch {} around it to replace the catch. I'd say that Promise needs a catch to begin with.

you can also enable the favicons logging feature: https://github.com/itgalaxy/favicons

I did. I see the results, but nothing weird as far as I can tell:

[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.

[bencresty]

@roggenbrot Thanks for your suggestion. I use eslint, but not from within Webpack, so don't use the eslint-plugin nor anything else eslint related in the Webpack workflow. (I only use eslint inside VS Code)

[kalled]

We have been experienced the same issue for a couple of month using Windows 10, Node 10.x to 16.x and with various SVG's Enabling logging does not help much, the output just stops in the middle of the process.

Sometimes the build completes successfully 20 times in a row and then it fails with every other try.

I guess this is not helping solving the problem and I have no idea where to start.

Any help would be much appreciated. :)

[neviljk]

Hi! We are seeing the same issue in our builds. As others mentioned it happens only on the production build and not regularly. Would appreciate if the root cause could be identified or a workaround proposed.

Our FaviconsWebpackPlugin config looks like this:
new FaviconsWebpackPlugin({ logo: "./src/assets/images/favicon.svg" }),

Environment

Node.js v14.17.4
win32 10.0.19041

favicons 6.2.2
favicons-webpack-plugin 5.0.2
html-webpack-plugin 5.3.2
webpack 5.49.0
webpack-cli 4.9.0

[bencresty]

Looks like what we all have in common is that we all use SVG as input.

[jantimon]

did you manage to log any errors with a try catch block?

[bencresty]

did you manage to log any errors with a try catch block?

If you were actually interested to solve this and reading my posts you would know I did some testing. You didn't react to that months ago.

I stop using this plugin now. It never finishes the first build since months/a year now and there have been no indication whatsoever on any active development on your side to solve this unfortunately. Eventhough I'm obviously not the only one having this issue. I remove this plugin from all projects here now and will search for a way that does work.

[peksipatongeis]

Similar behavior here, Azure DevOps builds are timing out for no apparent reason. We are using .svg file as source so the culprit seems to lie somewhere there.

[3nth]

This may be related.
itgalaxy/favicons#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.