[BUG in image-minimizer-webpack-plugin] Error after second build if cache is filesystem

[webdiscus]

I have just tried to set cache to filesystem and had got similar errors.

I turned logging on in webpack.config

infrastructureLogging: {
    level: 'verbose',
},

The first build has some information about caching, but succeeds:

...
[IdleFileCachePlugin] Initial cache was generated and cache will be persisted in 5s.
[webpack-cli] Compiler finished
[webpack.cache.PackFileCacheStrategy] Pack got invalid because of write to: ResolverCachePlugin|normal|default|dependencyType=|esm|path=|/workspace/projects/domain|request=|/workspace/projects/domain/src/views/endpoint.html
...

Second build without any changes fails with errors:

...
[IdleFileCachePlugin] Initial cache was generated and cache will be persisted in 5s.
[webpack-cli] Compiler finished
[webpack.cache.PackFileCacheStrategy] Pack got invalid because of write to: Compilation/assets|html-bundler-webpack-plugin.650
...

...
ERROR in ./src/image.any
Can't handle conflicting asset info for sourceFilename
Error: Can't handle conflicting asset info for sourceFilename
...

I use image-minimizer-webpack-plugin with minimizer and generator setup and all of endpoint images have getting the same error.

HTML Bundler Plugin   ▶▶▶ (webpack 5.97.1) compiled with 22 errors

I haven't found any clear instructions on caching for plugins. I guess it's not an easy task with the current Webpack architecture.

There is the repository.

Originally posted by @vralle in #109 (comment)

[webdiscus]

@vralle

I think this is a BUG in image-minimizer-webpack-plugin.
See in image-minimizer-webpack-plugin/dist/worker.js:56:

let result = {
    data: options.input,
    filename: options.filename,
    warnings: [],
    errors: [],
    info: {
      sourceFilename: options.info && typeof options.info === "object" && typeof options.info.sourceFilename === "string" ? options.info.sourceFilename : typeof options.filename === "string" ? options.filename : undefined
    }
  };

Note

Try to disable the sourceFilename on the line 56, then all works fine!

There will be defined the sourceFilename from options.filename, but the filename is always resolved absolute path.
The sourceFilename must be a relative path.

See in webpack/lib/asset/AssetGenerator.js:216:

	getSourceFileName(module, runtimeTemplate) {
		return makePathsRelative( // <== Return always relative path
			runtimeTemplate.compilation.compiler.context,
			module.matchResource || module.resource,
			runtimeTemplate.compilation.compiler.root
		).replace(/^\.\//, "");
	}

Intern webpack uses the sourceFilename as relative path.

Where occurs the error

See in webpack/lib/asset/AssetGenerator.js:545:

newAssetInfo = mergeAssetInfo(data.get("assetInfo"), newAssetInfo); // <= here occurs error

When in both objects data.get("assetInfo") and newAssetInfo the sourceFilename are different, then the mergeAssetInfo function throws the error.

Bugfix in image-minimizer-webpack-plugin

So we know that the image-minimizer-webpack-plugin generate WRONG (absolute) path in sourceFilename.

Where is this bug?

See in image-minimizer-webpack-plugin/dist/loader.js:154:

 let isAbsolute = isAbsoluteURL(this.resourcePath);
-  const filename = isAbsolute ? this.resourcePath : path.relative(this.rootContext, this.resourcePath);
+  const filename = !isAbsolute ? this.resourcePath : path.relative(this.rootContext, this.resourcePath);
  const minifyOptions = /** @type {import("./index").InternalWorkerOptions<T>} */{
    input: content,
    filename, // <= this option will be used to define the `sourceFilename` in worker.js:56
    severityError,
    transformer,
    generateFilename: /** @type {Compilation} */
    this._compilation.getAssetPath.bind(this._compilation)
  };

In the line 154 is the BUG (logical error): if the path is absolute, then do nothing, else transform it to relative. This doesn't make sense!
Correctly should be: if the path is absolute, then transform it to relative, else do nothing. This is exactly that expected Webpack in webpack/lib/asset/AssetGenerator.js:545.

---

Can you please create the issue by image-minimizer-webpack-plugin with a hint to the BUG in image-minimizer-webpack-plugin/dist/loader.js:154.

[vralle]

webpack-contrib/image-minimizer-webpack-plugin/issues/458

[webdiscus]

There is the minimal test to reproduce the issue cache-filesystem-rebuild-image-minimizer.

How to reproduce and How to fix read in the README

[webdiscus]

@vralle
The bug is fixed in image-minimizer-webpack-plugin v4.1.2, can you please test it?

[vralle]

I updated image-minimizer-webpack-plugin to v4.1.2
Removed all in node_modules/.cache/webpack
Commented assetModuleFilename in Webpack configuration.
Run build task first time => Ok
Run again and got errors.

Build log:

[webpack.cache.PackFileCacheStrategy] starting to restore cache content 0 (4.26 MiB) because of request to: html-bundler-webpack-plugin|PersistentCache
<t> [webpack.cache.PackFileCacheStrategy] restore cache content 0 (4.26 MiB): 36.241242 ms
    [IdleFileCachePlugin] Initial cache was generated and cache will be persisted in 5s.
    [webpack-cli] Compiler finished
    [webpack.cache.PackFileCacheStrategy] Pack got invalid because of write to: Compilation/assets|html-bundler-webpack-plugin.650

At the end:

ERROR in ./src/img/logo.svg
Can't handle conflicting asset info for sourceFilename
Error: Can't handle conflicting asset info for sourceFilename
    at mergeAssetInfo (/workspace/node_modules/webpack/lib/asset/AssetGenerator.js:99:12)
    at AssetGenerator.generate (/workspace/node_modules/webpack/lib/asset/AssetGenerator.js:545:20)
    at NormalModule.codeGeneration (/workspace/node_modules/webpack/lib/NormalModule.js:1428:49)
    at /workspace/node_modules/webpack/lib/Compilation.js:3505:22
    at /workspace/node_modules/webpack/lib/Cache.js:95:34
    at Array.<anonymous> (/workspace/node_modules/webpack/lib/cache/MemoryCachePlugin.js:45:13)
    at /workspace/node_modules/webpack/lib/Cache.js:95:19
    at eval (eval at create (/workspace/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
 @ ./src/views/home.html 1:844-901

[webdiscus]

hm, in my very simple example (cache-filesystem-rebuild-image-minimizer) I can reproduce the issue with v4.1.1, but after update to v4.1.2 no error anymore.
By switch back v4.1.1, after rebuild appears the error. So I can stable reproduce the issue and working fix.

Possible, you have more complex use case. I will create then next minimal example to reproduce the issue.
So step by step we find a solution.

[vralle]

You can deploy webpack-html-bundler-starting-template in Codespaces (top right corner -> "Code" button -> Codespaces) and play with code there.

[vralle]

Offtopic: try new webpack.edge.mjs. There's significant boost of performance without file cache)

[webdiscus]

Offtopic: try new webpack.edge.mjs. There's significant boost of performance without file cache)

using edge config, it's really much faster: 1.6 sec vs 4 sec :-)

[webdiscus]

@vralle
yes, I can reproduce the issue with new minimalistic repository issue-cache-filesystem-rebuild-image-minimizer

The fix #460 doesn't fix the issue.
Please, see the details in my updated comment.

[webdiscus]

@vralle

The issue is now fixed in the image-minimizer-webpack-plugin v4.1.3, PR.