Skip to content

Commit

Permalink
test: add test to reproduce issue with cache filesystem, #130
Browse files Browse the repository at this point in the history
  • Loading branch information
webdiscus committed Dec 16, 2024
1 parent 1ac2ec1 commit 30dc081
Show file tree
Hide file tree
Showing 5 changed files with 171 additions and 0 deletions.
61 changes: 61 additions & 0 deletions test/manual/cache-filesystem-rebuild-image-minimizer/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
# BUG in image-minimizer-webpack-plugin

See https://github.com/webdiscus/html-bundler-webpack-plugin/issues/130

## Bug

Webpack compilations fail after second rebuild when using filesystem cache:

```
Can't handle conflicting asset info for sourceFilename
```

## Prepare the test

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
```

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

> [!CAUTION]
> A path to the source file in `sourceFilename` must be relative to the `output.path` directory.
10 changes: 10 additions & 0 deletions test/manual/cache-filesystem-rebuild-image-minimizer/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import img from './img.jpg';

console.log('test', img);
Original file line number Diff line number Diff line change
@@ -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'),
},
};

0 comments on commit 30dc081

Please sign in to comment.