Complex union type in Polymorphic components

[walmartwarlord]

Astro Info

Astro                    v4.15.1
Node                     v20.17.0
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             none

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

Getting a TS error in a fresh project with a simple Polymorphic component:

ts: Expression produces a union type that is too complex to represent.

What's the expected result?

It should not have any TypeScript error as it does have a default value.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-e3ih6w?file=src%2Fpages%2Findex.astro

Participation

• [ ] I am willing to submit a pull request for this issue.

[michaelpayne02]

I have this error as well. The prop spreading is what inflates the number of type variations that TS needs to evaluate and check.

[walmartwarlord]

I have this error as well. The prop spreading is what inflates the number of type variations that TS needs to evaluate and check.

So if you dont spread it, the TS error is gone? If yes, do you have a basic example of a component

[michaelpayne02]

I believe so, yes. I encountered this a while ago and the only way I was able to get the error to go away was by removing the prop spreading when destructuring Astro.props. I think there are so many different HTMLTag type variations that when combined with the spread operator, the number of type permutations grows exponentially.

[ArmandPhilippot]

In CustomButton.astro, you need to define the default value in the Props generic parameter as well:

-type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }>;
+type Props<Tag extends HTMLTag = "button"> = Polymorphic<{ as: Tag }>;

I think this is why Typescript complains about too complex union type. By doing this you will see that props is no longer inferred as any and your index.astro page no longer reports an error.

[florian-lefebvre]

@walmartwarlord does Armand's solution work for you?