Skip to content

Commit 30dc081

Browse files
webdiscuswebdiscus
committed
test: add test to reproduce issue with cache filesystem, #130 
1 parent 1ac2ec1 commit 30dc081

5 files changed

Lines changed: 171 additions & 0 deletions

File tree

‎test/manual/cache-filesystem-rebuild-image-minimizer/README.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# BUG in image-minimizer-webpack-plugin
2+
3+
See https://github.com/webdiscus/html-bundler-webpack-plugin/issues/130
4+
5+
## Bug
6+
7+
Webpack compilations fail after second rebuild when using filesystem cache:
8+
9+
```
10+
Can't handle conflicting asset info for sourceFilename
11+
```
12+
13+
## Prepare the test
14+
15+
Clone repository
16+
17+
```
18+
git clone https://github.com/webdiscus/html-bundler-webpack-plugin.git
19+
```
20+
21+
Install dev dependencies
22+
```
23+
cd html-bundler-webpack-plugin
24+
npm i
25+
```
26+
27+
Install this test case
28+
```
29+
cd ./test/manual/cache-filesystem-rebuild-image-minimizer
30+
npm i
31+
```
32+
33+
## How to reproduce the bug
34+
35+
```
36+
npm run build <= OK
37+
npm run build <= second rebuild occurs error
38+
```
39+
40+
## How to fix
41+
42+
1. Open the file `./test/manual/cache-filesystem-rebuild-image-minimizer/node_modules/image-minimizer-webpack-plugin/dist/loader.js`
43+
44+
1. Change the line 154:
45+
```diff
46+
- const filename = isAbsolute ? this.resourcePath : path.relative(this.rootContext, this.resourcePath);
47+
+ const filename = !isAbsolute ? this.resourcePath : path.relative(this.rootContext, this.resourcePath);
48+
```
49+
50+
**In the line 154 is the BUG (logical error):**\
51+
if the path is absolute, then do nothing, else transform it to relative. This doesn't make sense!
52+
53+
**Correctly should be:**\
54+
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:
55+
```js
56+
newAssetInfo = mergeAssetInfo(data.get("assetInfo"), newAssetInfo); // <= here occurs error
57+
```
58+
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.
59+
60+
> [!CAUTION]
61+
> A path to the source file in `sourceFilename` must be relative to the `output.path` directory.

‎test/manual/cache-filesystem-rebuild-image-minimizer/package.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"scripts": {
3+
"start": "webpack serve --mode development",
4+
"build": "webpack --mode=production --progress"
5+
},
6+
"devDependencies": {
7+
"html-bundler-webpack-plugin": "file:../../..",
8+
"image-minimizer-webpack-plugin": "4.1.1"
9+
}
10+
}

‎test/manual/cache-filesystem-rebuild-image-minimizer/src/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
</head>
7+
<body>
8+
<h1>Hello World!</h1>
9+
<img src="@images/token.svg" />
10+
</body>
11+
</html>

‎test/manual/cache-filesystem-rebuild-image-minimizer/src/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import img from './img.jpg';
2+
3+
console.log('test', img);

‎test/manual/cache-filesystem-rebuild-image-minimizer/webpack.config.js‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
const path = require('path');
2+
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
3+
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
4+
5+
const svgoConfig = {
6+
multipass: true,
7+
plugins: [
8+
'removeDimensions',
9+
{
10+
name: 'cleanupNumericValues',
11+
params: {
12+
floatPrecision: 3,
13+
leadingZero: true,
14+
defaultPx: true,
15+
convertToPx: true,
16+
},
17+
},
18+
{
19+
name: 'preset-default',
20+
params: {
21+
overrides: {
22+
removeUnknownsAndDefaults: {
23+
unknownContent: true,
24+
unknownAttrs: true,
25+
defaultAttrs: true,
26+
uselessOverrides: true,
27+
keepDataAttrs: true,
28+
keepAriaAttrs: true,
29+
keepRoleAttr: true,
30+
},
31+
removeViewBox: false,
32+
},
33+
},
34+
},
35+
],
36+
};
37+
38+
/** @type {import('webpack').Configuration} */
39+
module.exports = {
40+
mode: 'production',
41+
output: {
42+
path: `${__dirname}/dist`,
43+
clean: true,
44+
},
45+
resolve: {
46+
alias: {
47+
'@images': path.resolve(__dirname, '../../fixtures/images'),
48+
},
49+
},
50+
module: {
51+
rules: [
52+
{
53+
test: /\.(png|jpe?g|webp|avif|svg|gif|ico)$/i,
54+
type: 'asset/resource',
55+
},
56+
],
57+
},
58+
plugins: [
59+
new HtmlBundlerPlugin({
60+
entry: {
61+
index: './src/index.html',
62+
},
63+
}),
64+
],
65+
optimization: {
66+
minimizer: [
67+
new ImageMinimizerPlugin({
68+
test: /\.(png|jpe?g|webp|avif|svg|gif|ico)$/i,
69+
deleteOriginalAssets: false,
70+
minimizer: {
71+
implementation: ImageMinimizerPlugin.svgoMinify,
72+
options: {
73+
encodeOptions: svgoConfig,
74+
},
75+
},
76+
}),
77+
],
78+
},
79+
80+
// test cache filesystem: BUG in image-minimizer-webpack-plugin/dist/loader.js:154
81+
// See https://github.com/webdiscus/html-bundler-webpack-plugin/issues/130#issuecomment-2544123713
82+
cache: {
83+
type: 'filesystem',
84+
cacheDirectory: path.join(__dirname, '.cache'),
85+
},
86+
};

0 commit comments

Comments
 (0)