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

[ts-candide]

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

1. 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

• 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.

[surajahmed]

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

[millerm30]

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!

[millerm30]

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

[surajahmed]

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

[millerm30]

@surajahmed

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

[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/checkbox@3.2.1
npm WARN Found: react@18.2.0
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/checkbox@3.2.1
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/checkbox@0.2.9
npm WARN node_modules/@react-native-aria/checkbox
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-aria/checkbox@3.2.1
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/checkbox@0.2.9
npm WARN node_modules/@react-native-aria/checkbox

[surajahmed]

@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

[millerm30]

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"
},

[jahazielmtz]

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

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

Any update on the progress for a fix for this?

[surajahmed]

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

[vzla0094]

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

Could not resolve dependency: peer react@"^18.3.1" from react-dom@18.3.1 node_modules/react-dom peer react-dom@">=16" from @gluestack-ui/themed@1.1.22 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 react@18.3.1 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

[joeyfigaro]

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.

[njt1982]

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?

[Viraj-10]

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.

[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.