Type '"fill"' is not assignable to type '"fixed" | "intrinsic" | "responsive" | undefined'.

What version of Next.js are you using?

10.2.3

What version of Node.js are you using?

16.1.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next start

Describe the Bug

I am using a simple next/image component:

import Image, { ImageProps } from 'next/image'

export const Img = ({ className = '', ...props }: ImageProps) => (
	<div className="unset-img full-bleed">
		<Image className={`${className} custom-img`} layout="fill" {...props} />
	</div>
)

I get red-squiggly lines on layout saying:

Type ‘“fill”’ is not assignable to type ‘“fixed” | “intrinsic” | “responsive” | undefined’.

Expected Behavior

It shouldn’t show a TS error.

To Reproduce

Clone this commit, install the dependencies & run the app. VSCode should yell.

The error is in this file. See layout="fill there.

[kb1995]

I found this issue because I’m also experiencing the same problem when I try to pass preload={true} prop to the <Image> component.

The red-squiggly line disappears if I remove the preload prop.

import Image from "next/image";


<Image
  layout="fill"
  preload={true}
  src={image.url}
  alt={image.alt}
  objectFit="cover"
/>

[ycscholes]

@brandonchinn178 not sure ImageProps has to do anything with it as I removed it from beside the props & it still threw an error.

Try to use the type below to replace the default ImageProps

type FillImageProps = Omit<ImageProps, 'layout' | 'height' | 'width'>;

In your case, you can do like this

import Image, { ImageProps } from 'next/image'

type FillImageProps = Omit<ImageProps, 'layout' | 'height' | 'width'>;

export const Img = ({ className = '', ...props }: FillImageProps) => (
	<div className="unset-img full-bleed">
		<Image className={`${className} custom-img`} layout="fill" {...props} />
	</div>
)