gluestack-ui `@gluestack-ui/themed`: Invalid peer dependency warning for React 18

trafficstars

Description

The @react-aria/checkbox dependency in the current version of @gluestack-ui/themed does not report itself as being compatible with React 18.

CodeSandbox/Snack link

No response

Steps to reproduce

Follow the installation instructions for creating an Expo-based project with the themed version of Gluestack.

Using pnpm, a warning is issued when the dependencies are installed:

 WARN  Issues with peer dependencies found
app
└─┬ @gluestack-ui/themed 1.0.37
  └─┬ @gluestack-ui/checkbox 0.1.22
    └─┬ @react-native-aria/checkbox 0.2.8
      └─┬ @react-aria/checkbox 3.2.1
        └── ✕ unmet peer react@"^16.8.0 || ^17.0.0-rc.1": found 18.2.0

gluestack-ui Version

@gluestack-ui/themed 1.0.37

Platform

[X] Expo
[ ] React Native CLI
[ ] Next
[ ] Web
[ ] Android
[ ] iOS

Other Platform

No response

Additional Information

@react-aria/checkbox introduced support for React 18 in v3.4.0, which was released 2 years ago. Bumping the dependency in the @react-native-aria/checkbox package to at least this version will solve the peer dependency issue.

Jan 18 '24 14:01 ts-candide

@ts-candide Thanks for reporting this. We'll have a look.

Jan 31 '24 06:01 surajahmed

I'm running into this issue as well. Getting warnings during my pre-build and build stages. I'll tag this issue to track for an update!

Feb 01 '24 13:02 millerm30

@surajahmed, any update on the progress for a fix for this.

Mar 05 '24 18:03 millerm30

@millerm30 Please update to the latest version of @gluestack-style/themed, @gluestack-style/react and @gluestack-ui/config. Thanks for your patience.

Apr 05 '24 12:04 surajahmed

@surajahmed

Thank you for the update! I will update to the latest today for testing.

Apr 05 '24 12:04 millerm30

@surajahmed

Just updated to the latest. I am running the following:

"@gluestack-style/react": "^1.0.52", "@gluestack-ui/config": "^1.1.18", "@gluestack-ui/themed": "^1.1.17",

But I am still running into the same issue.

m WARN ERESOLVE overriding peer dependency npm WARN While resolving: @react-aria/[email protected] npm WARN Found: [email protected] npm WARN node_modules/react npm WARN react@"18.2.0" from the root project npm WARN 129 more (@gluestack-ui/accordion, @gluestack-ui/actionsheet, ...) npm WARN npm WARN Could not resolve dependency: npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-aria/[email protected] npm WARN node_modules/@react-native-aria/checkbox/node_modules/@react-aria/checkbox npm WARN @react-aria/checkbox@"3.2.1" from @react-native-aria/[email protected] npm WARN node_modules/@react-native-aria/checkbox npm WARN npm WARN Conflicting peer dependency: [email protected] npm WARN node_modules/react npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-aria/[email protected] npm WARN node_modules/@react-native-aria/checkbox/node_modules/@react-aria/checkbox npm WARN @react-aria/checkbox@"3.2.1" from @react-native-aria/[email protected] npm WARN node_modules/@react-native-aria/checkbox

Apr 05 '24 13:04 millerm30

@ts-candide We'll have a look, there is a conflicting peer dependency with @react-aria/checkbox. For now, you can try with --legacy-peer-deps flag while installing packages. eg, npm i --legacy-peer-deps

Apr 15 '24 06:04 surajahmed

It seems that the react-native-aria is relying on an outdated dependency in "@react-aria/checkbox": "3.2.1" which is now I believe running 3.14.1 which includes support for React 18

"dependencies": { "@react-aria/checkbox": "3.2.1", "@react-aria/utils": "^3.6.0", "@react-native-aria/toggle": "^0.2.8", "@react-native-aria/utils": "0.2.11", "@react-stately/toggle": "^3.2.1" },

Apr 22 '24 16:04 millerm30

Hi team, I'm facing the same issue on install: Found: [email protected] node_modules/react react@"18.2.0" from the root project peer react@">=16" from @gluestack-ui/[email protected] node_modules/@gluestack-ui/themed @gluestack-ui/themed@"*" from the root project

Could not resolve dependency: peer react@"^18.3.1" from [email protected] node_modules/react-dom peer react-dom@">=16" from @gluestack-ui/[email protected] node_modules/@gluestack-ui/themed @gluestack-ui/themed@"*" from the root project

Any update on the progress for a fix for this?

May 06 '24 10:05 jahazielmtz

We're working on it. For now, please use --legacy-peer-deps flag.

May 06 '24 10:05 surajahmed

Hi team, I'm facing the same issue on install: Found: [email protected] node_modules/react react@"18.2.0" from the root project peer react@">=16" from @gluestack-ui/[email protected] node_modules/@gluestack-ui/themed @gluestack-ui/themed@"*" from the root project

Could not resolve dependency: peer react@"^18.3.1" from [email protected] node_modules/react-dom peer react-dom@">=16" from @gluestack-ui/[email protected] node_modules/@gluestack-ui/themed @gluestack-ui/themed@"*" from the root project

Any update on the progress for a fix for this?

Having this exact same issue, which looks like the opposite of the original in this thread.

It seems like we bumped all the way to [email protected] which is not yet supported by the latest react native sdk, I think we need to bump to no more than 18.2.0 which is the current supported version in react native. Thoughts? @surajahmed

May 08 '24 21:05 vzla0094

Using --legacy-peer-deps doesn't seem to fix the issue unfortunately. Installing in an expo SDK v50+ application causes the app to freeze/hang at post-bundling with no errors or warnings. Connecting a debugger fails, and eventually the app kills itself.

May 18 '24 17:05 joeyfigaro

Hi,

Is there a reason that the fix isn't simply to unlock the version in here:

https://github.com/gluestack/gluestack-ui/blame/aeb48302cad4a7e155f548b59ff90d6cbbde3f33/packages/react-native-aria/checkbox/package.json#L54

Why is it 3.2.1 and not, say, ^3.2?

May 20 '24 13:05 njt1982

Using --legacy-peer-deps doesn't seem to fix the issue unfortunately. Installing in an expo SDK v50+ application causes the app to freeze/hang at post-bundling with no errors or warnings. Connecting a debugger fails, and eventually the app kills itself.

@joeyfigaro Can you provide repo or reproduction of this? This seems to be working for us.

May 23 '24 12:05 Viraj-10

Hi,

Is there a reason that the fix isn't simply to unlock the version in here:

https://github.com/gluestack/gluestack-ui/blame/aeb48302cad4a7e155f548b59ff90d6cbbde3f33/packages/react-native-aria/checkbox/package.json#L54

Why is it 3.2.1 and not, say, ^3.2?

@nishant7156, I tried with latest version of @react-aria/checkbox but seems to be breaking in some cases. That's why we have froze the version to 3.2.1 instead of ^3.2. We will be running sprint some to update all the react-aria deps to latest versions.

May 23 '24 12:05 Viraj-10

So will this ever be fixed? I see issues being closed as duplicated of this one but this one doesn't go forward. This should be a priority! I've been unable to update my clients projects for over two months now! And before someone tries that again, using legacy flag is not a solution.