next.js: Cannot find name 'StaticImageData'.

What version of Next.js are you using?

11.1.2 & 11.1.3-canary.57

What version of Node.js are you using?

14.16.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next build

Describe the Bug

The following error occurs during type checking.

node_modules/next/dist/client/image.d.ts:19:14 - error TS2304: Cannot find name 'StaticImageData'.

19     default: StaticImageData;
                ~~~~~~~~~~~~~~~

node_modules/next/dist/client/image.d.ts:21:45 - error TS2304: Cannot find name 'StaticImageData'.

21 declare type StaticImport = StaticRequire | StaticImageData;

I got the following Issue in v11.0.0, upgraded to v11.1.2 and the problem was solved, but now I get this error instead. https://github.com/vercel/next.js/issues/26892

Expected Behavior

TS compiler should not give errors.

To Reproduce

Here’s the full code to my component:

import { memo, useState, VFC } from 'react';
import Image, { ImageProps } from 'next/image';
import { isTest } from 'src/lib/environmentDetector';

type PropsType = ImageProps & {
  fallback: string | JSX.Element;
};

export const ImageWithFallback: VFC<PropsType> = memo(
  ({ src, fallback, ...rest }) => {
    const [showFallback, setShowFallback] = useState(false);
    if (isTest()) return null;

    const onError = () => {
      setShowFallback(true);
    };

    if (showFallback && typeof fallback !== 'string') return fallback;
    return <Image {...rest} src={showFallback ? (fallback as string) : src} onError={onError} />;
  },
  (p, n) => p.src === n.src
);

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 15
Comments: 23 (10 by maintainers)

Commits related to this issue

image container created - the img attribute in the interface will work as is. there seems to be a casting bug with next.js: https://github.com/vercel/next.js/issues/29788 — committed to hack4impact-calpoly/hack4impact-website by zimeg 3 years ago
photo container created (#57) * image container created - the img attribute in the interface will work as is. there seems to be a casting bug with next.js: https://github.com/vercel/next.js/iss... — committed to hack4impact-calpoly/hack4impact-website by zimeg 3 years ago
chore: update dependencies Did not update Next.js as there is a build breaking issue being investigated: https://github.com/vercel/next.js/issues/29788 — committed to Avansai/next-multilingual by nbouvrette 3 years ago
build(dependencies): update dev dependencies Update Next.js to latest version, but had to implement a workaround related to https://github.com/vercel/next.js/issues/29788 — committed to Avansai/next-multilingual by nbouvrette 3 years ago

Most upvoted comments

@timneutkens @leerob I was able to reproduce when updating Next to v12.0.5 or above

Reproduction steps:

clone https://github.com/Avansai/next-multilingual
npm install
Update to Next v12.0.5
Run npm run build

Result:

node_modules/next/dist/client/image.d.ts:19:14 - error TS2304: Cannot find name 'StaticImageData'.

19     default: StaticImageData;
                ~~~~~~~~~~~~~~~

node_modules/next/dist/client/image.d.ts:21:45 - error TS2304: Cannot find name 'StaticImageData'.

21 declare type StaticImport = StaticRequire | StaticImageData;
                                               ~~~~~~~~~~~~~~~


Found 2 errors.

nbouvrette on Dec 8, 2021

@balazsorban44 I was actually bisecting on my end as well 😃 good find, I confirm that 12.0.5-canary.10 can build but 12.0.5-canary.11 or above cannot. The only change related to “images” in all the PRs is the one you found (as far as I could tell).

I am not sure exactly which part of that change is causing this in next/dist/client/image.d.ts

I’m also a bit surprised that this is the only issue on this topic given that 12.0.5 has been released 20 days ago. Is the original issue in this thread the same one or should we open a new one related to 12.0.5-canary.11?

Also, I found a workaround:

Create a Global.d.ts type file in my src directory
Add the following code:

// Workaround related to: https://github.com/vercel/next.js/issues/29788
declare type StaticImageData = {
  src: string;
  height: number;
  width: number;
  placeholder?: string;
};

Build

nbouvrette on Dec 24, 2021

@SpencerKaiser Do you have to manually change the image.d.ts file AFTER you’ve cloned down the repo? I need to make sure that my app just works after cloning and installing.

unknownbreaker on Mar 4, 2022

patch-package should not be necessary anymore, a fix has been released. Could you test out canary and if it does not work, open a new bug report? Thanks!

balazsorban44 on Mar 3, 2022

I believe this change might be related: #28316

Using @nbouvrette’s repo, I bisected the releases and found that the issue was introduced in 12.0.5-canary.11.

balazsorban44 on Dec 24, 2021

So, you can add StaticImageData as workaround to your *.d.ts file like this:

type StaticImageData = {
  src: string;
  height: number;
  width: number;
  placeholder?: string;
};

declare module '*.gif' {
  const content: StaticImageData;
  export default content;
};

esafev on Nov 23, 2021