Error: Element type is invalid

[danielluca]

Describe the bug By using the Icon my whole page will not render

To Reproduce Steps to reproduce the behavior:

1. Import Infinity from '@phosphor-icons/react'
2. Use <Infinity/> component

Expected behavior Icon is rendered and page is working

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser Chromium (Arc Browser)
• Version 1.11.0

Additional context Error happens after updating to Next 13.2.4. Solution is to redeclare the component name. import Infinity as InfinityIcon from '@phosphor-icons/react'

[rektdeckard]

Yep. You've discovered namespace collision! This isn't a bug, it's just a reality of the JS ecosystem. We can't know all the global variable names for all environments, so import aliasing (import { X as AliasedX } from "module";) is the correct solution here, as opposed to trying to rename icons to try to avoid this.

There's an argument to be made that Infinity is special because it's a numeric global present in all environments, but in reality there are lots of these. On web, for example, all these icon names are also things present on the global object:

• Bluetooth
• Clipboard
• File
• Function
• Image
• Infinity
• Keyboard
• Lock
• Notification
• Option
• Presentation
• Selection

[rektdeckard]

I'm closing this because we don't plan to rename these icons, and your solution is the one we expect devs to arrive at on their own.