Error: Prevent writing to file that only differs in casing or query string from already written file.

[strarsis]

• Operating System: Windows 10 x64 (WSL 2)
• Node Version: v14.15.4
• NPM Version: 7.5.4
• webpack Version: 5.x
• image-minimizer-webpack-plugin Version: 2.2.0

Expected Behavior

webpack build should just run fine, without an error message because of duplicate file names.

Actual Behavior

webpack build fails with error, the files are generated.

webpack-cli] Error: Prevent writing to file that only differs in casing or query string from already written file.
This will lead to a race-condition and corrupted files on case-insensitive file systems.
[...]/images/test-1.jpg
[...]/images/test-1.jpg

Code

.img-orig {
  background: url("../images/test-1.jpg?size=1140");
}

.img-webp {
  background: url("../images/test-1.jpg?size=1140&format=webp");
}

How Do We Reproduce?

Run the webpack build. Notice the error message.

[strarsis]

Addendum: Even when the name options results in non-colliding filenames, the Webpack file cache (when in use) has to be purged. So some cache-invalidation must be added to this loader for changes in output filename.

[noahehall]

@strarsis

how did you resolve this?

[noahehall]

blah

 {
    // @see https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
    test: imgTest,
    type: 'asset/resource',
    generator: { filename: '[file][query][contenthash]' }, // the hash worked, 
  },

[strarsis]

@noahehall: Does this configuration work?

[noahehall]

yea the contenthash fixed the error:

having both webpack5 asset modules and this plugin created a duplicate file, hence the error

howver i couldn't get this plugin to obey webpacks [file] output template so i moved on

[edit]

if you check my repository 'uiproto' there is a PR talking about the error