How to override Next.js `*.svg` module declaration?

Issue

Next.js has recently made a modification (in v11.0.x) which has the following type definitions:

In next-env.d.ts (non-modifiable, regenerated at every build):

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

In node_modules/next/image-types/global.d.ts (non-modifiable, don't wanna use patch-package):

declare module '*.svg' {
  const content: any
  export default content
}

Now the issue is that I am using @svgr/webpack, and as a result I need to do the following:

declare module '*.svg' {
  const content: React.FC<React.SVGAttributes<SVGElement>>
  export default content
}

Earlier placing this code in index.d.ts in the assets folder used to work. But now it doesn't and as result I am forced to cast every import separately. Any way to do this directly?

Solution

I am using the following workaround:

• Add next-env.d.ts to exclude array in tsconfig.json:

  {
    // ...
    "exclude": ["node_modules", "next-env.d.ts"]
  }
  

• Add next-env.d.ts to .gitignore/.eslintignore.

• Create new file custom.d.ts:

  /// <reference types="next" />
  /// <reference types="next/types/global" />
  
  // additional things that one used to put here before Next.js v11
  

• Create new file images.d.ts:

  type StaticImageData = {
    src: string;
    height: number;
    width: number;
    placeholder?: string;
  };
  
  declare module '*.png' {
    const content: StaticImageData;
    export default content;
  }
  
  declare module '*.svg' {
    const content: React.FC<React.SVGProps<SVGSVGElement>>;
    export default content;
  }
  
  declare module '*.jpg' {
    const content: StaticImageData;
    export default content;
  }
  
  declare module '*.jpeg' {
    const content: StaticImageData;
    export default content;
  }
  
  declare module '*.gif' {
    const content: StaticImageData;
    export default content;
  }
  
  declare module '*.webp' {
    const content: StaticImageData;
    export default content;
  }
  
  declare module '*.ico' {
    const content: StaticImageData;
    export default content;
  }
  
  declare module '*.bmp' {
    const content: StaticImageData;
    export default content;
  }
  

• Make sure that these files are handled by patterns specified in include array of tsconfig.

• Add declarations for *.avif too if you're using them in next@12:

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

Answered By - brc-dd