Missing peerDependencies for react and react-native causes duplicate React instances in pnpm monorepos
まだ誰も着手していません。
評価
- 難易度
- 1/5
- 見積もり時間
- 1時間未満
- 初心者へのやさしさ
- 68/100
調査の方向性
slider パッケージの package.json から始めて、依存関係がどのように宣言されているかを確認します。要求された peer dependency の宣言を追加し、その後、pnpm モノレポの再現環境で別の React インスタンスが解決されなくなり、invalid hook call が回避されることを確認します。
索引モデルが issue の本文から書いたものです。
説明
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:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- 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
- 主要言語
- TypeScript
- スター
- 1.4k
- フォーク
- 295
- PR マージ指標
- 30日以内にマージされた PR はありません
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
callstack/react-native-slider のほかの issue
-
bug report platform: iOS
難易度 4/5 3〜5日 初心者へのやさしさ 42/100
callstack/react-native-slider#782 · コメント 6 件 ·
-
bug report
難易度 3/5 1〜2日 初心者へのやさしさ 65/100
callstack/react-native-slider#780 · コメント 1 件 ·
-
bug report
難易度 3/5 1〜2日 初心者へのやさしさ 35/100
callstack/react-native-slider#767 ·
-
bug report platform: iOS
難易度 4/5 3〜5日 初心者へのやさしさ 45/100
callstack/react-native-slider#758 · コメント 4 件 ·
-
bug report
難易度 4/5 3〜5日 初心者へのやさしさ 35/100
callstack/react-native-slider#745 · コメント 3 件 ·
callstack/react-native-slider の issue をすべて見る
似ている issue
-
S: triage
難易度 1/5 1時間未満 初心者へのやさしさ 85/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
-
fix(errors): EHOSTUNREACH from a happy-eyeballs connect is reported as a resolver error (STAMP-80) オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 90/100
snapshot-labs/stamp#666 ·
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
GauravKarakoti/SecureFlow#1070 · コメント 1 件 ·
-
comp/desktop P3 type/bug
難易度 1/5 1時間未満 初心者へのやさしさ 92/100
NousResearch/hermes-agent#118866 ·