On every build my custom *.svg type declaration is removed for some reason

[gherciu]

What version of Next.js are you using?

11.0.1

What version of Node.js are you using?

14

What browser are you using?

What operating system are you using?

How are you deploying your application?

Describe the Bug

I have a custom declaration for *.svg in next-env.d.ts

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

and a import in my app (I'm using @svgr to handle svg imports)

import { ReactComponent as Logo } from '../../public/static/logo.svg'

And for some reason when I'm trying to start the app Next removes this TS declaration from next-env.d.ts
And that results in TS errors because your default declaration just exports any

Module '"*.svg"' has no exported member 'ReactComponent'. Did you mean to use 'import ReactComponent from "*.svg"' instead?

Expected Behavior

I'm expecting that custom TS declarations will be not removed because that doesn't make any sense...if someone uses strict TS..to fix that users should only add a TS ignore comment

To Reproduce

add a custom TS declaration in next-env.d.ts....and run next dev.....and it will remove this custom dts declaration

[gurkerl83]

Same here; the next-env.d.ts constantly gets overwritten by next when the build starts.

Before starting, the file contents looks like

/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="@stefanprobst/next-svg" />

and after the build has started

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

The build works precisely one time, removing dist and .next folders and restarting the build crashes, of course, because a required type declaration, in my case "" is missing.

Update: Maybe this commit provides a valid solution to work around this problem. Following the comment and custom types work again!

Instead of editing next-env.d.ts, you can include additional types by adding a new file e.g. additional.d.ts and then referencing it in the include array in your tsconfig.json.

1012630

[gherciu]

@gurkerl83 yep the workaround works, I just created a separated index.d.ts file with my custom types...and it works perfectly

But I'll keep this issue opened...cause it is not a developer-friendly approach to delete something which is not part of next.js....
Because default next js svg declaration exports (any) ....and a lot of users wants to customize this type and I'm pretty sure that custom types don't affect any next js functional so it makes no sense to remove them ...

[ijjk]

@gherciu the next-env.d.ts file is a part of Next.js and we need to be able to edit it at any point in the future to provide additional/more accurate types. I'm gonna close this since documentation has been updated to reflect this.

[pbredenberg]

@gherciu the next-env.d.ts file is a part of Next.js and we need to be able to edit it at any point in the future to provide additional/more accurate types. I'm gonna close this since documentation has been updated to reflect this.

Thank you. Would you mind linking to the documentation, so that others (like me 😸!) who come here searching for this same issue can hop right over to the new documentation?

Thanks for all the great work on Next.js!

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.