I am trying to push my code to Vercel, it fails in the build steps when checking the validity of the types.
This is the full error received:
info - Checking validity of types...
Failed to compile.
./node_modules/next/dist/client/image.d.ts:19:14
Type error: Cannot find name 'StaticImageData'.
I tried rolling back the Next.js version to 11, which didn’t work.
Edit:
I found this similar Github issue however it doesn’t seem to have been much help.
As of February 16th 2022 this has been fixed, now you can just import StaticImageData like so:
import { StaticImageData } from "next/image"
You can temporarily create a global type until the issue is resolved like so:
global-types.d.ts
export {};
declare global {
type StaticImageData = {
src: string
height: number
width: number
blurDataURL?: string
};
}
Then reference it as the first item in your tsconfig.json file:
"include": ["./global-types.d.ts","next-env.d.ts", "**/*.ts", "**/*.tsx"]
Once they fix the issue, remove the reference.
type StaticImageData = { src: string; height: number; width: number; blurDataURL?: string; } in the same TS file with the calling script. Then, I set my interface Props to handle it: src?: string | StaticImageData
import { StaticImageData } from "next/image"