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

[power-f-GOD]

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.

[rektdeckard]

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”;

[power-f-GOD]

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.💔

[markmssd]

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

[rektdeckard]

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.

[rektdeckard]

@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.

[markmssd]

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! 🥁

[rektdeckard]

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