responsive-loader
responsive-loader copied to clipboard
Error: Prevent writing to file that only differs in casing or query string from already written file.
- 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.
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.
@strarsis
how did you resolve this?
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,
},
@noahehall: Does this configuration work?
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