Cannot find name 'StaticImageData'. #29788

sakit0 · 2021-10-11T01:38:34Z

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.
#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
);

stefanprobst · 2021-10-11T06:56:25Z

what does your next-env.d.ts look like?

mac-h95 · 2021-10-20T09:38:26Z

@stefanprobst
I’m having the same issue my next-env.d.ts looks like

/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.

And my additional.d.ts looks like


// Declare scss modules
declare module '*.scss' {
  const classes: {[key: string]: string}
  export default classes
}

// Declare png modules
declare module '*.png' {
  const value: string
  export default value
}

- the img attribute in the interface will work as is. there seems to be a casting bug with next.js: vercel/next.js#29788

* image container created - the img attribute in the interface will work as is. there seems to be a casting bug with next.js: vercel/next.js#29788 * images added to pages

leerob · 2021-11-07T01:58:32Z

Related: https://stackoverflow.com/questions/69722076/next-js-type-error-cannot-find-name-staticimagedata

Could anyone create a reproduction of this issue so we can investigate? 🙏

esafev · 2021-11-23T06:23:01Z

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;
};

nbouvrette · 2021-12-08T05:20:07Z

@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 · 2021-12-22T03:52:29Z

I just upgraded today because of the critical issue and had the same problem in Next v12.0.7. I was able to build my project by adding this:

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

Directly in \node_modules\next\dist\client\image.d.ts

I will try to investigate a bit more tomorrow if I can pinpoint the exact change that caused this.

Did not update Next.js as there is a build breaking issue being investigated: vercel/next.js#29788

balazsorban44 · 2021-12-24T00:02:37Z

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.

nbouvrette · 2021-12-24T01:15:38Z

@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

Update Next.js to latest version, but had to implement a workaround related to vercel/next.js#29788

EstebanBorai · 2021-12-29T23:49:49Z

I have the same issue, a reproduction can be found in this repository: https://github.com/TheComputersClub/teampost/commit/0c6b289deada6437b843978fb2421b7fb33f22f7

atcastle · 2022-02-14T23:48:40Z

Is anyone still experiencing this issue? I can't reproduce this, and based on the lack of activity in this issue I'm thinking it's probably fixed. I'll close in a day or two unless I hear otherwise.

nbouvrette · 2022-02-15T00:26:08Z

@atcastle yes - easy to reproduce using v12.0.10:

Clone https://github.com/Avansai/next-multilingual.git
npm install
npm build
Now remove the work around:
mv ./src/Global.d.ts ./src/Global.d.ts.old
npm build

Voilà:

$ npm run build

> next-multilingual@0.10.3 build
> rm -Rf ./lib && tsc

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.

atcastle · 2022-02-15T00:56:26Z

@nbouvrette Thanks, I was able to reproduce with that.

@lfades it looks like this issue was introduced by your change in #28316. Could you take a look at this?

unknownbreaker · 2022-03-03T20:07:54Z

Which *.d.ts file did you insert your workaround into?

SpencerKaiser · 2022-03-03T20:17:21Z

@unknownbreaker I used patch-package and modified next/dist/client/image.d.ts. After configuring patch-package, making the change suggested by @esafev posted to the file above, and running yarn patch-package next this is the output you should get within YOUR_ROOT/patches/next+12.1.0.patch:

diff --git a/node_modules/next/dist/client/image.d.ts b/node_modules/next/dist/client/image.d.ts
index a8bf17f..0908c0e 100644
--- a/node_modules/next/dist/client/image.d.ts
+++ b/node_modules/next/dist/client/image.d.ts
@@ -20,6 +20,12 @@ declare type OnLoadingComplete = (result: {
     naturalHeight: number;
 }) => void;
 declare type ImgElementStyle = NonNullable<JSX.IntrinsicElements['img']['style']>;
+export interface StaticImageData {
+   src: string
+   height: number
+   width: number
+   blurDataURL?: string
+ }
 interface StaticRequire {
     default: StaticImageData;
 }

Hope that helps 🍻

balazsorban44 · 2022-03-03T20:46:00Z

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!

SpencerKaiser · 2022-03-03T20:48:10Z

I dug through the source of the PR that closed this issue and everything looks good, I just wasn't ready to switch to canary just yet 😬

balazsorban44 · 2022-03-03T21:11:44Z

It's fine, I just wanted to point out to the next person reading that there is no need for hacks anymore, as this has been fixed in Next.js already. 👍

SpencerKaiser · 2022-03-03T21:23:29Z

I get that for sure, but I think a lot of folks may not want to switch to a canary branch (or are unfamiliar with how to do so) and I think patch-package is a whole lot better than using an index.d.ts file, so I wanted to share.

unknownbreaker · 2022-03-03T22:17:40Z

@balazsorban44 Unfortunately, I can't use canary. I have to stick with the stable version.

unknownbreaker · 2022-03-04T02:38:07Z

@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.

SpencerKaiser · 2022-03-04T02:49:24Z

@unknownbreaker...

Follow the instructions to setup that package for your project's repo
Make the change to Next as I mentioned above
Run the command to generate the .patch file

The next time someone runs npm i or yarn, it'll apply that patch and things will work as expected 😄

github-actions · 2022-04-03T12:05:33Z

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

sakit0 added the bug Issue was opened via the bug report template. label Oct 11, 2021

zimeg added a commit to hack4impact-calpoly/hack4impact-website that referenced this issue Oct 30, 2021

image container created

69a1e71

- the img attribute in the interface will work as is. there seems to be a casting bug with next.js: vercel/next.js#29788

timneutkens added Image (next/image) Related to Next.js Image Optimization. TypeScript Related to types with Next.js. labels Nov 8, 2021

timneutkens assigned kara Nov 18, 2021

This comment has been minimized.

Sign in to view

nbouvrette added a commit to next-multilingual/next-multilingual that referenced this issue Dec 22, 2021

chore: update dependencies

dc6c082

Did not update Next.js as there is a build breaking issue being investigated: vercel/next.js#29788

balazsorban44 added kind: bug and removed bug Issue was opened via the bug report template. labels Dec 24, 2021

nbouvrette added a commit to next-multilingual/next-multilingual that referenced this issue Dec 24, 2021

build(dependencies): update dev dependencies

69ad80c

Update Next.js to latest version, but had to implement a workaround related to vercel/next.js#29788

evantahler mentioned this issue Jan 1, 2022

Bump next from 12.0.4 to 12.0.7 actionhero/ah-next-plugin#257

Closed

kara assigned atcastle and unassigned kara Jan 31, 2022

atcastle assigned timneutkens and unassigned atcastle Feb 15, 2022

lfades mentioned this issue Feb 15, 2022

Don't import internally from types in next-env.d.ts #34394

Merged

3 tasks

balazsorban44 closed this as completed in #34394 Feb 19, 2022

github-actions bot locked as resolved and limited conversation to collaborators Apr 3, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot find name 'StaticImageData'. #29788

Cannot find name 'StaticImageData'. #29788

sakit0 commented Oct 11, 2021

stefanprobst commented Oct 11, 2021

mac-h95 commented Oct 20, 2021 •

edited

Loading

leerob commented Nov 7, 2021

esafev commented Nov 23, 2021 •

edited

Loading

nbouvrette commented Dec 8, 2021 •

edited

Loading

This comment has been minimized.

nbouvrette commented Dec 22, 2021

balazsorban44 commented Dec 24, 2021 •

edited

Loading

nbouvrette commented Dec 24, 2021

EstebanBorai commented Dec 29, 2021

atcastle commented Feb 14, 2022

nbouvrette commented Feb 15, 2022

atcastle commented Feb 15, 2022

unknownbreaker commented Mar 3, 2022

SpencerKaiser commented Mar 3, 2022

balazsorban44 commented Mar 3, 2022 •

edited

Loading

SpencerKaiser commented Mar 3, 2022

balazsorban44 commented Mar 3, 2022

SpencerKaiser commented Mar 3, 2022 •

edited

Loading

unknownbreaker commented Mar 3, 2022

unknownbreaker commented Mar 4, 2022

SpencerKaiser commented Mar 4, 2022

github-actions bot commented Apr 3, 2022

Cannot find name 'StaticImageData'. #29788

Cannot find name 'StaticImageData'. #29788

Comments

sakit0 commented Oct 11, 2021

What version of Next.js are you using?

What version of Node.js are you using?

What browser are you using?

What operating system are you using?

How are you deploying your application?

Describe the Bug

Expected Behavior

To Reproduce

stefanprobst commented Oct 11, 2021

mac-h95 commented Oct 20, 2021 • edited Loading

leerob commented Nov 7, 2021

esafev commented Nov 23, 2021 • edited Loading

nbouvrette commented Dec 8, 2021 • edited Loading

This comment has been minimized.

nbouvrette commented Dec 22, 2021

balazsorban44 commented Dec 24, 2021 • edited Loading

nbouvrette commented Dec 24, 2021

EstebanBorai commented Dec 29, 2021

atcastle commented Feb 14, 2022

nbouvrette commented Feb 15, 2022

atcastle commented Feb 15, 2022

unknownbreaker commented Mar 3, 2022

SpencerKaiser commented Mar 3, 2022

balazsorban44 commented Mar 3, 2022 • edited Loading

SpencerKaiser commented Mar 3, 2022

balazsorban44 commented Mar 3, 2022

SpencerKaiser commented Mar 3, 2022 • edited Loading

unknownbreaker commented Mar 3, 2022

unknownbreaker commented Mar 4, 2022

SpencerKaiser commented Mar 4, 2022

github-actions bot commented Apr 3, 2022

mac-h95 commented Oct 20, 2021 •

edited

Loading

esafev commented Nov 23, 2021 •

edited

Loading

nbouvrette commented Dec 8, 2021 •

edited

Loading

balazsorban44 commented Dec 24, 2021 •

edited

Loading

balazsorban44 commented Mar 3, 2022 •

edited

Loading

SpencerKaiser commented Mar 3, 2022 •

edited

Loading