Webpack compilations fail when using filesystem cache

[vralle]

Bug report

The plugin generates an absolute file path in sourceFilename, but webpack needs a filename of asset modules as relative path inside the output.path directory. This behavior causes a compilation error when using the filesystem cache.

Detailed review: webdiscus/html-bundler-webpack-plugin#130 (comment)

How reproduce and fix: https://github.com/webdiscus/html-bundler-webpack-plugin/tree/master/test/manual/cache-filesystem-rebuild-image-minimizer/README.md

Actual Behavior

If set cache.type: 'filesystem' in Webpack configuration, the first compilation will complete without errors. Subsequent compilations that use the filesystem cache will fail.

Expected Behavior

A path to the source file in sourceFilename must be relative to the output.path directory.
Compilation should complete without errors when using the file system cache.

How Do We Reproduce?

Use that test https://github.com/webdiscus/html-bundler-webpack-plugin/tree/master/test/manual/cache-filesystem-rebuild-image-minimizer

The first compilation will complete without errors. Subsequent compilations that use the filesystem cache will fail.

Please paste the results of npx webpack-cli info here, and mention other relevant information

npx webpack-cli info:

System:
    OS: Linux 6.5 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (2) x64 Intel(R) Xeon(R) Platinum 8370C CPU @ 2.80GHz
    Memory: 5.56 GB / 7.74 GB
  Binaries:
    Node: 22.12.0 - /usr/local/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.9.0 - /usr/local/bin/npm
  Monorepos:
    Yarn Workspaces: 1.22.22

Upstream issue: webdiscus/html-bundler-webpack-plugin/issues/130

[webdiscus]

@alexander-akait

There is the minimal (small as possible) test to reproduce the issue issue-cache-filesystem-rebuild-image-minimizer.

More details to the Bug

If set cache.type: 'filesystem' in Webpack configuration,
the first compilation will complete without errors.
Second compilations will fail:

ERROR in ./src/token.svg
Can't handle conflicting asset info for sourceFilename
Error: Can't handle conflicting asset info for sourceFilename
    at mergeAssetInfo (.../node_modules/webpack/lib/asset/AssetGenerator.js:99:12)
    at AssetGenerator.generate (.../node_modules/webpack/lib/asset/AssetGenerator.js:545:20)

Prepare

git clone https://github.com/webdiscus/issue-cache-filesystem-rebuild-image-minimizer.git
cd issue-cache-filesystem-rebuild-image-minimizer
npm i

How to reproduce the issue

npm run build <= OK
npm run build <= second rebuild occurs error

How to fix

1. Open the file ./test/manual/cache-filesystem-rebuild-image-minimizer/node_modules/image-minimizer-webpack-plugin/dist/loader.js

2. Change the line 153:

   -  const filename = ABSOLUTE_URL_REGEX.test(this.resourcePath) && !WINDOWS_PATH_REGEX.test(this.resourcePath) ? this.resourcePath : this.utils.contextify(this.rootContext, this.resourcePath);
   +  const filename = ABSOLUTE_URL_REGEX.test(this.resourcePath) && !WINDOWS_PATH_REGEX.test(this.resourcePath) ? this.resourcePath : path.relative(this.rootContext, this.resourcePath);

The filename must be the relative path without leading ./:

• this.utils.contextify(this.rootContext, this.resourcePath) => ./src/image.svg (❌ wrong filename)
• path.relative(this.rootContext, this.resourcePath) => src/image.svg (✅ correct filename)

Webpack expected the exactly same filename in both objects data.get("assetInfo") and newAssetInfo, see in webpack/lib/asset/AssetGenerator.js:545:

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

Very easy to debug it, just add console.log(...) in node_modules/webpack/lib/asset/AssetGenerator.js:545

if (data && data.get("assetInfo")) {
+  console.log({ assetInfo: data.get("assetInfo"), newAssetInfo });
  newAssetInfo = mergeAssetInfo(data.get("assetInfo"), newAssetInfo);
}

Output with npm run build:

 assetInfo: {
    sourceFilename: './src/image.svg', ❌ wrong filename generated in loader.js:153
    minimized: true,
    minimizedBy: [ 'svgo' ],
    immutable: true,
    contenthash: '1af5b17a3b8b790db1d4'
  },
  newAssetInfo: {
    sourceFilename: 'src/image.svg',  ✅ correct filename generated by Webpack
    immutable: true,
    contenthash: '1af5b17a3b8b790db1d4'
  }

[webdiscus]

I will make a PR to fix the bug.