auto import Link Image not working vscode

[SamyZog]

I set up a nextjs project with typescript, and vscode will not auto import Link or Image components, I have to add them manually.

Also if I import Link in one module I get autocompletion for the Link component in another module but the path shown is wrong next/dist/client/link it should be next/link

Is a nextjs issue? or a vscode issue?

[brianlovin]

I hit this all the time 😅 Typeahead importing works for all my other components and npm packages, except these components from Next.

[Joshua-Chu]

@SamyZog do you happen to find any solution for this problem? How about you @brianlovin ?

[SamyZog]

unfortunately no

[franco-roura]

Add a typescript declaration file with the following content

// someFile.d.ts
import Image from 'next/image'

declare module 'next/image' {
  export default Image = Image
}

Make sure it's matched by the "include" array in your tsconfig.json file.

You should start seeing this

You can do that with next/link too.

[h0lme3]

Hi, Sorry but it doesn't work for me...

[WhyouDev]

It's working! just add on these sections "export default Image" without a quote to "export default Image = Image". Like what I did on the screenshot. These files on C:bla..bla..bla\node_modules\next\image.d.ts

[sidvud98]

@WhyouDev Still not working

[baranelitez]

Hi. Any idea why this happens, why it won't work, and why we have to do this type declaration? I'm using Webstorm but having the same issue.

Asking to see if there's some wrong configuration on my side or this is a thing everybody deals with? This discussion having only 3 answers made me think it might be something I'm doing wrong.

[franco-roura]

Usually, this happens when you have an unnamed default export. Compare the following:

Unnamed

Named

It's just the Typescript server on your IDE not being able to find where you want to get that variable from until you name the default export. This can happen either in the source code or using module augmentation with an additional .d.ts file, in the end, it's about helping your IDE find the variable.

In the case of next/image, they're doing export default function Image() {}

next.js/packages/next/client/image.tsx

Line 298 in 75b7a57

export default function Image({

I'm not sure why most IDEs can't find it, but until they change/fix it, adding a declaration file works fine.

[lelabo-m]

I have the same problem in VScode, tried the suggested solution but VScode thinks <Image> is of type HTMLImageElement, thus not suggesting other imports (even with a .d.ts file).

Any suggestions ?

[franco-roura]

@lelabo-m
Does your tsconfig.json file have your newly created d.ts file in this array? Remember to restart VSCode after updating tsconfig.json.

[lelabo-m]

I double checked with an explicit path to the file.d.ts.

But I still get the following:

[franco-roura]

Sorry, I noticed what you mean now, with my solution you can't do Ctrl+. or Cmd+. after you've finished writing the <Image /> tag, it just suggests auto-importing it from next/image while you're typing it, before closing the JSX tag.

[Awsome-obedeh]

I am having same issue, I need help