[BUG] Class extends value undefined is not a constructor or null

[kasparsiricenko]

Hi first time trying to use this library. Got in to possibly a bug. From reading the docs I understood it should not render by default.

Component does not retrieve icon data until it is mounted. For server side rendering it means HTML will not include SVGs, they will be dynamically added only when hydrating DOM on client side.

Created fresh Next.js project

Followed instruction on https://iconify.design/docs/icon-components/react/

installed using: pnpm install --save-dev @iconify/react

when added

import { Icon } from "@iconify/react";
<Icon icon="mdi-light:home" />

to the component it fails with

Error: Class extends value undefined is not a constructor or null

This might be caused by a React Class Component being rendered in a Server Component, React Class Components only works in Client Components. Read more: https://nextjs.org/docs/messages/class-component-in-server-component

Node 18.20.1
React 18.3.1
Next 14.2.3
Iconify 4.1.1

[cyberalien]

That's a known issue with Next. Version 4 of component is old, it was designed many years ago and based on classes. Next does not support class based components.

There are several solutions:

• Update to version 5. You can install it by installing @iconify/react@next
• Use web component @iconify-icon/react
• Wrap version 4 in client only file.

[kasparsiricenko]

Thanks for pointing out these solutions. Maybe we can add this information to the documentation to help others facing the same issue.