Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New global.d.ts "*.svg" type blocks locally defined definition (for use with SVGR) #26357

Closed
mikestopcontinues opened this issue Jun 19, 2021 · 5 comments
Labels
bug Issue was opened via the bug report template.

Comments

@mikestopcontinues
Copy link

What version of Next.js are you using?

11.0.0

What version of Node.js are you using?

14.16.1

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

I use SVGR to convert svg imports into react components. I define a custom type in next-env.d.ts to support this:

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

declare module '*.svg' {
  import type React from 'react';

  const SVG: React.VFC<React.SVGProps<SVGSVGElement>>;
  export default SVG;
}

However, with the upgrade to Next 11, I find the type definition in next/types/global blocks my custom definition:

declare module '*.svg' {
  const content: StaticImageData

  export default content
}

Expected Behavior

While I understand the utility—and I'm really excited for the direction Next is headed—my apps all only consume SVG as components. Inlining SVGs allows us to do a lot more with them than if they were squashed in image tags. While I would like the ability to do both for cases where it was warranted, it's most important that my types compile now.

I see this bug as applying to all of the module types defined by next. They're important, but they need to be overridable.

To Reproduce

It's as easy as adding the above type definition to next-env.d.ts, then trying to import an svg file into typescript. You'll see the locally defined types are not being used.


NOTE: This bug is about the types only. If you landed here for the webpack fix:

     cfg.module.rules[2] = {
        oneOf: [
          {
            test: /\.svg$/,
            use: ['@svgr/webpack'],
          },
          cfg.module.rules[2],
        ],
      };
@mikestopcontinues mikestopcontinues added the bug Issue was opened via the bug report template. label Jun 19, 2021
@stefanprobst
Copy link
Contributor

i think this is already fixed by #26281

@mikestopcontinues
Copy link
Author

@stefanprobst Even better than I was hoping. Thanks!

@SalahAdDin
Copy link

@stefanprobst how can i test it?
I got this #26400

@stefanprobst
Copy link
Contributor

@SalahAdDin the fix will be in the next release. if you want to test it now, you need to install the next@canary version.

@balazsorban44
Copy link
Member

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.

@vercel vercel locked as resolved and limited conversation to collaborators Jan 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template.
Projects
None yet
Development

No branches or pull requests

4 participants