Missing peerDependencies for react and react-native causes duplicate React instances in pnpm monorepos

Open Beginner friendly
#769 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
1/5
Estimated time
Under an hour
Newbie friendliness
68/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Stale
Tech stack
react, react-native
Domain
mobile

Research direction

Start with the slider package's package.json and inspect how its dependencies are declared. Add the requested peer dependency declarations, then verify the pnpm monorepo reproduction no longer resolves a separate React instance and avoids the invalid hook call.

Written by the indexing model from the issue text.

Description

bug report

Environment

  • react-native info output:
react-native: 0.81.5
react: 19.1.0
expo: 54.0.33
@react-native-community/slider: 5.1.2
  • are you using the new architecture?
    Yes

  • which version of react & react-native are you using?
    React 19.1.0, React Native 0.81.5

Description

@react-native-community/slider does not declare react or react-native in its peerDependencies. This causes duplicate React instances in pnpm monorepos with strict dependency isolation, resulting in the classic "Invalid hook call" runtime error.

Root cause
The slider package uses React internally (hooks, JSX) but its package.json has no peerDependencies field. In pnpm monorepos without nodeLinker: hoisted, each package only sees its own declared dependencies. Since pnpm doesn't know the slider needs React, it doesn't link the host app's React to the slider. At runtime, the slider resolves a different React copy from pnpm's internal store, causing two React instances in the same app.

Error

ERROR Invalid hook call. Hooks can only be called inside of the body of a function component.
This could happen for one of the following reasons:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app
    Workaround
    Adding packageExtensions in the root package.json fixes it:
{
  "pnpm": {
    "packageExtensions": {
      "@react-native-community/slider": {
        "peerDependencies": {
          "react": "*",
          "react-native": "*"
        }
      }
    }
  }
}

Suggested fix
Add peerDependencies to the slider's package.json:

"peerDependencies": {
  "react": "*",
  "react-native": "*"
}

This is consistent with how other React Native libraries declare their peer dependencies (e.g. react-native-reanimated, react-native-gesture-handler, @gorhom/bottom-sheet).

Reproducible Demo

Create a pnpm monorepo with two apps (e.g. a Next.js web app using React 19.2.x and a React Native app using React 19.1.0)
Do not use nodeLinker: hoisted in pnpm-workspace.yaml (pnpm's default strict isolation)
Install @react-native-community/slider in the React Native app
Use the component
The app crashes at runtime with "Invalid hook call" because the slider resolves a different React instance from pnpm's .pnpm/node_modules/react

Dominant language
TypeScript
Stars
1.4k
Forks
295
PR merge metrics
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from callstack/react-native-slider

All issues in callstack/react-native-slider

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.