callstack / callstack/react-native-slider

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

未关闭 适合新手
#769 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
bug report
主要语言
TypeScript
星标
1.4k
派生
295
平均合并
5 分钟
30 天内合并 PR
1

描述

## 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

贡献指南

打开贡献指南

调研方向

从 slider 包的 package.json 开始,检查其依赖项是如何声明的。添加所请求的 peer dependency 声明,然后验证 pnpm monorepo 的复现不再解析出单独的 React 实例,并避免 invalid hook call。

由索引模型根据 Issue 内容生成。

评估

技术栈
react, react-native
领域
mobile
Issue 类型
缺陷
难度
1/5
预计耗时
1 小时以内
活跃度
停滞
描述清晰度
描述清楚
新手友好度
68/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。