NextJS 11 + SVGR + Typescript

[SalahAdDin]

Hello guys,

I'm migrating my portfolio from JavaScript to TypeScript and from NextJS 10 to 11.

But I'm getting a problem with every SVG icon i'm importing:
TS2604: JSX element type 'GitLab' does not have any construct or call signatures..

I followed a lot of tutorials, i tried many ways but i can't fix this; i realized the problem is the global configuration, since when i do click on the importe SVG in Visual Studio Code it always send me to the Next typescript definitions:
node_modules/next/types/global.d.ts

I deduced the way to fix it is replacing the SVG module definition by the custom one:

declare module "*.svg" {
  import type { ReactElement, SVGProps } from "react";

  const content: (props: SVGProps<SVGElement>) => ReactElement;
  export default content;
}

It is now in a types/custom.d.ts and I think there is not a problem importing it because i have another types and there is no problem with them; i deduce the problem is the global.d.ts included on Next. It does not matter if i declare a indux.d.ts at root project or inside of a @types folder on the root project, it still does not work.

What's the correct way to override that definition?

Thanks

[jan-wilhelm]

dealing with the exact same issue right now, have you found a fix yet?

[SalahAdDin]

dealing with the exact same issue right now, have you found a fix yet?

I handled it by:

1. Setting up a folder layout like the next:
   
2. Declaring a SVG type as follows:

declare module "*.svg" {
  import type { ReactElement, SVGProps } from "react";

  const content: (props: SVGProps<SVGElement>) => ReactElement;
  export default content;
}