Argument of type "import('path/to/project/.../sanity/client) is not assignable to parameter of type import('path/to/project/.../sanity-next-image)

[RayedB]

Since updating to Next 11, I am getting a Type error shown below:

Argument of type 'import("/path/to/project/node_modules/@sanity/client/sanityClient").SanityClient' is not assignable to parameter of type 'import("/path/to/project/node_modules/next-sanity-image/node_modules/@sanity/image-url/lib/types/types").SanityClient'.
  Types of property 'clientConfig' are incompatible.

My code: sanity.ts:

import sanityClient from '@sanity/client'

export default sanityClient({
  projectId: 'projectId',
  dataset: 'production',
  useCdn: true,
})

component.ts:

...
const serializers = {
  {
    types: {
      image: function imageSerializer(props){
        const imageProps = useNextSanityImage(sanity, props.node)
        return (
          <div className="w-full rounded-lg">
            <Image {...imageProps} sizes="(max-width: 750) 100vw, 750px" />
          </div>
      )
      }
    }
  }
}
...

It seems like sanity/client and sanity-next-image are not having the same type for the sanity client object

Any help on how to fix this ?

[lorenzodejong]

It seems like you're running an incompatible version of @sanity/client. I've just upgraded to Next 11.0.0 and @sanity/client 2.11.0 and i don't seem to be getting this typescript error. What version are you running currently?

[RayedB]

I'm running on @sanity/client: ^2.11.0 and Next 11.0.0

It happens as I build my project, webpack 5 checks types and this is where the error strikes

[lorenzodejong]

I'm running the same versions. I've also tried creating a new project using create-next-app (which now includes Next.js 11.0.0 by default), which works fine when installing @sanity/client@2.11.0 and next-sanity-image@3.1.2 and building the application. Could you confirm that this is also the case on your side?

If this is the case, i'm fairly sure that this has to do with some of your project's dependencies. Just to make sure: are you perhaps running a custom webpack config in Next.js? If you're running a custom config, it's a fairly high chance that this is the cause of your issues. https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config

[lorenzodejong]

Closed due to inactivity, if you're still running into this issue please reopen this issue or create a new one.