TypeError: Cannot create property 'displayName' on number 'Infinity'

[Sunday Power Inemesit]

Infinity is a number (and/or reserved word) in JavaScript, hence the Infinity icon's name conflicts with the same.

This makes my NextJS (14) app build break.

[Tobias Fried]

Just use import aliasing to rename it to whatever you want. We have addressed this one before, andInfinity is not the only JS or web platform global that gets reused.

import { Infinity as InfinityIcon } from "@phosphor-icons/react”;

[Sunday Power Inemesit]

The error occurs during compilation (or should I say in the compiled/built code) independent of whether I'm using the icon or not.

Currently, I am not using the icon, I don't have it imported anywhere.

...Infinity is not the only JS or web platform global that gets reused.

That's not good practice, IMO. And even if the global must be "reused" (overridden), then they should, at least, have the same base (data) type.

Now, the compiler sees Infinity and reckons it is a number, but it is a RFC in this context.💔

[Mark Massoud]

We're running into the same issue, @power-f-GOD did you find a workaround? 🙏🏼

[Tobias Fried]

We've decided to rename the icon Lemniscate, which is apparently another name for the symbol. It will continue to be available under the Infinity alias, bust since we aren't assigning anything to the Infinity global, this should serve you well and not break compatibility for existing users. Expect this patch in a day or two.

[Tobias Fried]

@power-f-GOD to clarify what I meant, we will be careful not to use global names internally, but it should not matter if we provided aliased named exports that occasionally conflict with globals.

[Mark Massoud]

Thanks @rektdeckard ! Let's hope it helps 🤞🏼 As @power-f-GOD mentioned, even if the icon is not used, the error occurs during compilation (in our case, during Jest test runs). Let's see! 🥁

[Tobias Fried]

Try upgrading to@phosphor-icons/react@2.0.15, should have fixed the issue