Generating multiple sizes only uses the last size for the entire set about imagetools

[JonasKruckenberg]

Fixed and published please upgrade to [email protected]

[JonasKruckenberg]

This is really bad 😟
This only appears during development right? So when you do yarn build all the right images get generated?

[jpoep]

Oh, I haven't even thought about testing that. And yeah, you're right, it works in production, so it isn't that terrible after all.

[bronze]

This only appears during development right? So when you do yarn build all the right images get generated?

oh god dammit... I've been cracking my head trying to figure this one out...
yeah.... can confirm, at least on my testing, the switch happens alright once deployed, just during dev that it only shows the last size

[jugglingcats]

@JonasKruckenberg I just hit this one too. The problem seems to be in the vite plugin and the middleware added in configureServer. To debug I looked for use of generatedImages and added the following:

// before generatedImage.set
console.log("set image", id, imagetoolsCore.getMetadata(image, 'width'))

// after generatedImage.get (in middleware)
console.log("get image", id, imagetoolsCore.getMetadata(image, 'width'))

In the logs...

set image 6269821afe096f8aea2f2ba455cddea6fa0b734a 500
set image cb68b63cfb6eadc77da1ba1b4f5866595fe545e2 700
get image 6269821afe096f8aea2f2ba455cddea6fa0b734a 700 <--- ooops!
get image cb68b63cfb6eadc77da1ba1b4f5866595fe545e2 700

Something is being reused somewhere...? I then modified this line:

//             generatedImages.set(id, image); // from
                generatedImages.set(id, image.clone()); // to

New log output:

set image 6269821afe096f8aea2f2ba455cddea6fa0b734a 500
set image cb68b63cfb6eadc77da1ba1b4f5866595fe545e2 700
get image 6269821afe096f8aea2f2ba455cddea6fa0b734a undefined
get image cb68b63cfb6eadc77da1ba1b4f5866595fe545e2 undefined

... and images in the site are the correct size 🎉.

[jugglingcats]

I guess it is because of this line:

            const img = imagetoolsCore.loadImage(decodeURIComponent(srcURL.pathname));

... this img is passed to imagetoolsCore.applyTransforms and returned, so same image is put in the Set.

[JonasKruckenberg]

Good catch! The sharp instance is mutable indeed and so will be changed by subsequent iterations, cloning should solve this!

[suamai]

Hey, this issue seems to have been fixed by the PR #218 , but was rolled back by this commit f6cec96 .

Is there a reason for that?

[JonasKruckenberg]

Oups, must have been lost in the merges somehow!