Compatibility Issue with React 19 Release Candidate

[ramayudanto]

I ran into an issue when trying to install @heroicons/react with the React 19 release candidate (19.0.0-rc-69d4b800-20241021). The installation fails due to a dependency conflict because @heroicons/react currently supports React versions >= 16, which doesn’t appear to include compatibility with React 19.

Error Details

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"19.0.0-rc-69d4b800-20241021" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@">= 16" from @heroicons/[email protected]
npm ERR! node_modules/@heroicons/react
npm ERR!   @heroicons/react@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Steps to Reproduce

1. Start a new Next.js project with React 19 (e.g., npx create-next-app@latest).
2. Attempt to install @heroicons/react:

   npm install @heroicons/react

3. The error appears due to the dependency conflict.

Environment:

• @heroicons/react version: 2.1.5
• React version: 19.0.0-rc-69d4b800-20241021
• Node version: 20.10.0
• npm version: 10.2.3

Workarounds I Found:

1. Downgrade React to version 18.

Request:
Any chance you could add support for the React 19 release candidates? It would make it easier for others exploring the latest React updates to use Heroicons!

Thanks so much!

[davecarlson]

I believe this is due to the forwardRef changes, I did a quick test of mty codebase & couldn't compile under 19

[theboss001]

i'm encountering the same issue

Error Details

npm install @heroicons/react
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"19.0.0-rc-02c0e824-20241028" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@">= 16" from @heroicons/[email protected]
npm ERR! node_modules/@heroicons/react
npm ERR! @heroicons/react@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

[mbunge]

I've encountered the same issue. with Nextjs 15 and React 19. Installing with --legacy-peer-deps works.

npm i -S @headlessui/[email protected]
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: @heroicons/[email protected]
npm error Found: [email protected]
npm error node_modules/react
npm error   peer react@"^18.2.0 || 19.0.0-rc-69d4b800-20241021" from [email protected]
npm error   node_modules/next
npm error     peer next@"^14.0.0-0 || ^15.0.0-0" from [email protected]
npm error     node_modules/next-auth
npm error       next-auth@"^5.0.0-beta.25" from the root project
npm error     next@"15.0.1" from the root project
npm error   peer react@"^18.2.0 || ^19.0.0-0" from [email protected]
npm error   node_modules/next-auth
npm error     next-auth@"^5.0.0-beta.25" from the root project
npm error   5 more (react-dom, styled-jsx, use-debounce, the root project, @headlessui/react)
npm error
npm error Could not resolve dependency:
npm error peer react@">= 16" from @heroicons/[email protected]
npm error node_modules/@heroicons/react
npm error   @heroicons/react@"^2.1.5" from the root project
npm error
npm error Conflicting peer dependency: [email protected]
npm error node_modules/react
npm error   peer react@">= 16" from @heroicons/[email protected]
npm error   node_modules/@heroicons/react
npm error     @heroicons/react@"^2.1.5" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

[theboss001]

use this

    "@heroicons/react": "^2.1.5",
    "next": "15.0.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"

[davecarlson]

use this

    "@heroicons/react": "^2.1.5",
    "next": "15.0.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"

This pins to react 18, which is not what this ticket is about. This is about support for React 19.

[reinink]

Hey folks, thanks for making us aware of this. We've just added React 19 support in #1247 and will get a new release cut shortly 👍

[reinink]

Hey just another update on this—we've got the release out. You can now install the latest version of Heroicons in a React 19 project without having to use "force":

npm install @heroicons/react@latest

Let me know if you run into any issues! 👍