TypeError: Cannot assign to read only property 'crop' of object '#<Object>'

[cibulka]

Hi, thanks for a nice library!

Today I've ran into a problem though - my client uploaded PNG to Sanity and the Next.js Typescript app failed with the following error: TypeError: Cannot assign to read only property 'crop' of object '#<Object>'.

This is the image in question that I receive from BE (and which I pass as the hook's argument):

{
  _type: 'image',
  asset: {
    _ref: 'image-f5d4883f18beaed14143983cad78110e4e81ce93-1920x969-png',
    _type: 'reference'
  },
  crop: {
    _type: 'sanity.imageCrop',
    bottom: 0,
    left: 0.001763668430335097,
    right: 0,
    top: 0
  },
  hotspot: {
    _type: 'sanity.imageHotspot',
    height: 1,
    width: 0.998236331569665,
    x: 0.5008818342151675,
    y: 0.5
  }
}

This is how I use the hook: useNextSanityImage(sanityClient, props.image);. When I try/catch the error, I see that the hook returns null. Also I do not have any problem with any other image across the whole app.

"next-sanity-image": "^3.1.5"

Am I missing something obvious? Thanks in advance!

[cibulka]

Interestingly enough it seems that the error happens only during the build (so on the server, not on client). If I do console.log from useEffect, those imageProps show just fine.

Also if I delete the crop property manually like this...

const image = {
   ...props.image,
   crop: undefined,
};

...everything works as expected.

[lorenzodejong]

It seems like this might have something to do with the @sanity/image-url library. This library does not handle crops, so i can't imagine this being an issue here. Could you open this issue over there and link it in this one so we can track the progress? Thanks!