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

オープン 初心者向け
#769 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
1/5
見積もり時間
1時間未満
初心者へのやさしさ
68/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
停滞
技術スタック
react, react-native
領域
mobile

調査の方向性

slider パッケージの package.json から始めて、依存関係がどのように宣言されているかを確認します。要求された peer dependency の宣言を追加し、その後、pnpm モノレポの再現環境で別の React インスタンスが解決されなくなり、invalid hook call が回避されることを確認します。

索引モデルが issue の本文から書いたものです。

説明

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

主要言語
TypeScript
スター
1.4k
フォーク
295
PR マージ指標
30日以内にマージされた PR はありません

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

callstack/react-native-slider のほかの issue

callstack/react-native-slider の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。