test: add test to reproduce issue with cache filesystem, #130

webdiscus · Dec 16, 2024 · f43dfa8 · f43dfa8
1 parent 1ac2ec1
commit f43dfa8
Show file tree

Hide file tree

Showing 5 changed files with 170 additions and 0 deletions.
diff --git a/test/manual/cache-filesystem-rebuild-image-minimizer/README.md b/test/manual/cache-filesystem-rebuild-image-minimizer/README.md
@@ -0,0 +1,60 @@
+# BUG in image-minimizer-webpack-plugin
+
+See https://github.com/webdiscus/html-bundler-webpack-plugin/issues/130
+
+Webpack compilations fail when using filesystem cache:
+
+```
+Can't handle conflicting asset info for sourceFilename
+```
+
+# How to reproduce
+
+Clone repository
+
+```
+git clone https://github.com/webdiscus/html-bundler-webpack-plugin.git
+```
+
+Install dev dependencies
+```
+cd html-bundler-webpack-plugin
+npm i
+```
+
+Install this test case
+```
+cd ./test/manual/cache-filesystem-rebuild-image-minimizer
+npm i
+```
+
+## How to reproduce the bug
+
+```
+npm run build <= OK
+npm run build <= second rebuild occurs error
+```
+
+## Expected Behavior
+
+A path to the source file in `sourceFilename` must be relative to the output.path directory.
+
+## How to fix
+
+1. Open the file `./test/manual/cache-filesystem-rebuild-image-minimizer/node_modules/image-minimizer-webpack-plugin/dist/loader.js`
+
+1. Change the line 154:
+   ```diff
+   -  const filename = isAbsolute ? this.resourcePath : path.relative(this.rootContext, this.resourcePath);
+   +  const filename = !isAbsolute ? this.resourcePath : path.relative(this.rootContext, this.resourcePath);
+   ```
+
+**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:
+```js
+newAssetInfo = mergeAssetInfo(data.get("assetInfo"), newAssetInfo); // <= here occurs error
+```
+When in both objects data.get("assetInfo") and newAssetInfo the same `sourceFilename` contains different (relative and absolute) paths, then the `mergeAssetInfo` function throws the error.
diff --git a/test/manual/cache-filesystem-rebuild-image-minimizer/package.json b/test/manual/cache-filesystem-rebuild-image-minimizer/package.json
@@ -0,0 +1,10 @@
+{
+  "scripts": {
+    "start": "webpack serve --mode development",
+    "build": "webpack --mode=production --progress"
+  },
+  "devDependencies": {
+    "html-bundler-webpack-plugin": "file:../../..",
+    "image-minimizer-webpack-plugin": "4.1.1"
+  }
+}
diff --git a/test/manual/cache-filesystem-rebuild-image-minimizer/src/index.html b/test/manual/cache-filesystem-rebuild-image-minimizer/src/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <h1>Hello World!</h1>
+    <img src="@images/token.svg" />
+  </body>
+</html>
diff --git a/test/manual/cache-filesystem-rebuild-image-minimizer/src/index.js b/test/manual/cache-filesystem-rebuild-image-minimizer/src/index.js
@@ -0,0 +1,3 @@
+import img from './img.jpg';
+
+console.log('test', img);
diff --git a/test/manual/cache-filesystem-rebuild-image-minimizer/webpack.config.js b/test/manual/cache-filesystem-rebuild-image-minimizer/webpack.config.js
@@ -0,0 +1,86 @@
+const path = require('path');
+const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
+
+const svgoConfig = {
+  multipass: true,
+  plugins: [
+    'removeDimensions',
+    {
+      name: 'cleanupNumericValues',
+      params: {
+        floatPrecision: 3,
+        leadingZero: true,
+        defaultPx: true,
+        convertToPx: true,
+      },
+    },
+    {
+      name: 'preset-default',
+      params: {
+        overrides: {
+          removeUnknownsAndDefaults: {
+            unknownContent: true,
+            unknownAttrs: true,
+            defaultAttrs: true,
+            uselessOverrides: true,
+            keepDataAttrs: true,
+            keepAriaAttrs: true,
+            keepRoleAttr: true,
+          },
+          removeViewBox: false,
+        },
+      },
+    },
+  ],
+};
+
+/** @type {import('webpack').Configuration} */
+module.exports = {
+  mode: 'production',
+  output: {
+    path: `${__dirname}/dist`,
+    clean: true,
+  },
+  resolve: {
+    alias: {
+      '@images': path.resolve(__dirname, '../../fixtures/images'),
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(png|jpe?g|webp|avif|svg|gif|ico)$/i,
+        type: 'asset/resource',
+      },
+    ],
+  },
+  plugins: [
+    new HtmlBundlerPlugin({
+      entry: {
+        index: './src/index.html',
+      },
+    }),
+  ],
+  optimization: {
+    minimizer: [
+      new ImageMinimizerPlugin({
+        test: /\.(png|jpe?g|webp|avif|svg|gif|ico)$/i,
+        deleteOriginalAssets: false,
+        minimizer: {
+          implementation: ImageMinimizerPlugin.svgoMinify,
+          options: {
+            encodeOptions: svgoConfig,
+          },
+        },
+      }),
+    ],
+  },
+
+  // test cache filesystem: BUG in image-minimizer-webpack-plugin/dist/loader.js:154
+  // See https://github.com/webdiscus/html-bundler-webpack-plugin/issues/130#issuecomment-2544123713
+  cache: {
+    type: 'filesystem',
+    cacheDirectory: path.join(__dirname, '.cache'),
+  },
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import img from './img.jpg';

		console.log('test', img);