use-subscription could not resolve dependency for react 18 #33540

jenskuhrjorgensen · 2022-03-31T19:27:51Z

Description

The latest react-native (v0.68.0) depends on use-subscription: ^1.0.0, but v1.6.0 of use-subscription was just released two days ago and it peer depends on react: ^18.0.0 whereas react-native 0.68.0 peer depends on react v17.0.2 which is also what is installed in the vanilla React Native project (npx react-native init). This results in this warning when running npm install:

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: use-subscription@1.6.0
npm WARN Found: react@17.0.2
npm WARN node_modules/react
npm WARN   react@"17.0.2" from the root project
npm WARN   3 more (react-native, react-test-renderer, react-shallow-renderer)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^18.0.0" from use-subscription@1.6.0
npm WARN node_modules/use-subscription
npm WARN   use-subscription@"^1.0.0" from react-native@0.68.0
npm WARN   node_modules/react-native

(the warning is also present when using yarn)

Version

0.68.0

Output of `npx react-native info`

System:
OS: macOS 12.2.1
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 2.97 GB / 32.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
Yarn: 1.22.17 - /usr/local/bin/yarn
npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
Watchman: 2022.01.31.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.2 - /Users/be9276/.rbenv/shims/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5
Android SDK: Not Found
IDEs:
Android Studio: 2020.3 AI-203.7717.56.2031.7784292
Xcode: 13.3/13E113 - /usr/bin/xcodebuild
Languages:
Java: 11.0.11 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.68.0 => 0.68.0
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

npx react-native init VanillaRN
cd VanillaRN
rm -rf node_modules
npm i

The text was updated successfully, but these errors were encountered:

hoIIer · 2022-03-31T23:00:55Z

I don't even use react-native in my project, yet here I am with my build failing due to this!

Any suggestions or eta?

yikes!

hoIIer · 2022-04-01T19:33:18Z

[Container] 2022/04/01 19:05:30 Running command npm ci
--
43 | npm WARN ERESOLVE overriding peer dependency
44 | npm WARN While resolving: use-subscription@1.6.0
45 | npm WARN Found: react@17.0.2
46 | npm WARN node_modules/react
47 | npm WARN   peer react@"17.0.2" from react-native@0.68.0
48 | npm WARN   node_modules/react-native
49 | npm WARN     peer react-native@"*" from @react-native-community/cli@7.0.3
50 | npm WARN     node_modules/@react-native-community/cli
51 | npm WARN     1 more (react-native-get-random-values)
52 | npm WARN   1 more (react-shallow-renderer)
53 | npm WARN
54 | npm WARN Could not resolve dependency:
55 | npm WARN peer react@"^18.0.0" from use-subscription@1.6.0
56 | npm WARN node_modules/use-subscription
57 | npm WARN   use-subscription@"^1.0.0" from react-native@0.68.0
58 | npm WARN   node_modules/react-native
59 | npm WARN
60 | npm WARN Conflicting peer dependency: react@18.0.0
61 | npm WARN node_modules/react
62 | npm WARN   peer react@"^18.0.0" from use-subscription@1.6.0
63 | npm WARN   node_modules/use-subscription
64 | npm WARN     use-subscription@"^1.0.0" from react-native@0.68.0
65 | npm WARN     node_modules/react-native
66 | npm ERR! `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.
67 | npm ERR!
68 | npm ERR! Missing: fsevents@1.2.13 from lock file
69 | npm ERR!

Any update @jenskuhrjorgensen?

jenskuhrjorgensen · 2022-04-02T12:44:24Z

@hoIIer no updates

sergioUjo · 2022-04-04T21:57:50Z

Got the same issue, fixed with npm legacy peer depencies flag on install or update. That way react 17.0.2 doesnt get installed because of react native.

I think a fix would be to bump the peer dependency on react to 18 or bigger then 17

Aurum-Vale · 2022-04-05T07:16:33Z

@sergioUjo The dependency problem originates from use-subscription >=1.6.0 which should not be required by RN, you should keep React 17 as is. There is already a PR (#33541) on the way.

You may try to mitigate the issue manually on your project by explicitly adding in your package.json the import of use-subscription <1.6.0 in the meantime.

AsteriskZuo · 2022-04-10T00:23:31Z

I have the same problem.

asterisk@msyncdeMBP xx % npm install
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: use-subscription@1.6.0
npm WARN Found: react@16.13.1
npm WARN node_modules/react
npm WARN   dev react@"16.13.1" from the root project
npm WARN   1 more (react-native)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^18.0.0" from use-subscription@1.6.0
npm WARN node_modules/use-subscription
npm WARN   use-subscription@"^1.0.0" from react-native@0.63.4
npm WARN   node_modules/react-native
npm WARN 
npm WARN Conflicting peer dependency: react@18.0.0
npm WARN node_modules/react
npm WARN   peer react@"^18.0.0" from use-subscription@1.6.0
npm WARN   node_modules/use-subscription
npm WARN     use-subscription@"^1.0.0" from react-native@0.63.4
npm WARN     node_modules/react-native
...

asterisk@msyncdeMBP xx % npx react-native info
info Fetching system and libraries information...
System:
    OS: macOS 12.3.1
    CPU: (8) arm64 Apple M1
    Memory: 489.89 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.8.0 - /opt/homebrew/bin/node
    Yarn: 1.22.18 - /opt/homebrew/bin/yarn
    npm: 8.5.5 - /opt/homebrew/bin/npm
    Watchman: 2022.03.21.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /opt/homebrew/opt/cocoapods/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5
    Android SDK:
      API Levels: 23, 28, 29, 30, 31, 32
      Build Tools: 28.0.3, 30.0.2, 32.0.0, 32.1.0
      System Images: android-32 | Google APIs ARM 64 v8a
      Android NDK: 22.1.7171670
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7935034
    Xcode: 13.3/13E113 - /usr/bin/xcodebuild
  Languages:
    Java: javac 18 - /usr/bin/javac
    Python: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.4 => 0.63.4 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

I created this project using 'npx create-react-native library xx'.

yarn

asterisk@msyncdeMBP xx % yarn install
yarn install v1.22.18
info No lockfile found.
[1/4] 🔍  Resolving packages...
...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "react-native > metro-react-native-babel-transformer@0.59.0" has unmet peer dependency "@babel/core@*".
warning "react-native > use-subscription@1.6.0" has incorrect peer dependency "react@^18.0.0".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
$ bob build
ℹ Building target commonjs
ℹ Cleaning up previous build at lib/commonjs
ℹ Compiling 1 files in src with babel
✔ Wrote files to lib/commonjs
ℹ Building target module
ℹ Cleaning up previous build at lib/module
ℹ Compiling 1 files in src with babel
✔ Wrote files to lib/module
ℹ Building target typescript
ℹ Cleaning up previous build at lib/typescript
ℹ Generating type definitions with tsc
✔ Wrote definition files to lib/typescript
✨  Done in 20.86s.

react-native View, Text etc all component error:

(alias) class View
import View
No overload matches this call.
  Overload 1 of 2, '(props: ViewProps | Readonly<ViewProps>): View', gave the following error.
    Type '{ children: Element; style: { flex: number; alignItems: "center"; justifyContent: "center"; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'.
  Overload 2 of 2, '(props: ViewProps, context: any): View', gave the following error.
    Type '{ children: Element; style: { flex: number; alignItems: "center"; justifyContent: "center"; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'.ts(2769)

(alias) class Text
import Text
No overload matches this call.
  Overload 1 of 2, '(props: TextProps | Readonly<TextProps>): Text', gave the following error.
    Type '{ children: (string | number | undefined)[]; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Text> & Readonly<TextProps>'.
  Overload 2 of 2, '(props: TextProps, context: any): Text', gave the following error.
    Type '{ children: (string | number | undefined)[]; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Text> & Readonly<TextProps>'.ts(2769)

react-native@17 vs react-native@18

17:

    interface FunctionComponent<P = {}> {
        (props: P, context?: any): ReactElement<any, any> | null;
        propTypes?: WeakValidationMap<P> | undefined;
        contextTypes?: ValidationMap<any> | undefined;
        defaultProps?: Partial<P> | undefined;
        displayName?: string | undefined;
    }

18

    interface FunctionComponent<P = {}> {
        (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
        propTypes?: WeakValidationMap<P> | undefined;
        contextTypes?: ValidationMap<any> | undefined;
        defaultProps?: Partial<P> | undefined;
        displayName?: string | undefined;
    }

AsteriskZuo · 2022-04-10T04:28:22Z

Solutions to the above problems:
rm -rf ./node_modules/@types/react-native/node_modules/

Summary: Starting with 1.6.0 this package relies on react 18 which is currently not supported by rn See https://github.com/facebook/react/blob/main/packages/use-subscription/package.json#L18 Fixes #33540 ## Changelog [General] [Fixed] - Pin use-subscription to < 1.6.0 Pull Request resolved: #33541 Test Plan: Run `yarn` in the following directories: `xplat/js/RKJSModules` `xplat/js/react-native-github` (Identified from jest test) `xplat/js/public` (Identified from yarn-validate) `js1 build buckfiles` (From diff signals) Reviewed By: yungsters Differential Revision: D35333789 Pulled By: ryancat fbshipit-source-id: bdb6232ccd2c5cece397f781609af2de7d36c5ff

cbaconnier · 2022-04-22T08:57:51Z

I believe this issue is still ongoing for expo
Expo uses the version 0.64.3 which also has the same dependencies: https://github.com/facebook/react-native/blob/0.64-stable/package.json#L115

I fixed it by forcing the version in my package.json

"dependencies": {
    ...
    "use-subscription": ">=1.0.0 <1.6.0"
}

Summary: Starting with 1.6.0 this package relies on react 18 which is currently not supported by rn See https://github.com/facebook/react/blob/main/packages/use-subscription/package.json#L18 Fixes facebook#33540 [General] [Fixed] - Pin use-subscription to < 1.6.0 Pull Request resolved: facebook#33541 Test Plan: Run `yarn` in the following directories: `xplat/js/RKJSModules` `xplat/js/react-native-github` (Identified from jest test) `xplat/js/public` (Identified from yarn-validate) `js1 build buckfiles` (From diff signals) Reviewed By: yungsters Differential Revision: D35333789 Pulled By: ryancat fbshipit-source-id: bdb6232ccd2c5cece397f781609af2de7d36c5ff

jenskuhrjorgensen added the Needs: Triage 🔍 label Mar 31, 2022

danilobuerger mentioned this issue Mar 31, 2022

Pin use-subscription to < 1.6.0 #33541

Closed

This was referenced Mar 31, 2022

Fails to build due to dependency on React-Native 0.68.0 adopted-ember-addons/ember-cognito#229

Closed

Builds of my ember.js project are failing due to @aws-amplify/core's dependency on react-native/use-subscription. aws-amplify/amplify-js#9757

Closed

hoIIer mentioned this issue Apr 1, 2022

Add "Sign Up" method fabscale/ember-cognito-identity#721

Open

facebook-github-bot closed this as completed in 5534634 Apr 5, 2022

Aurum-Vale mentioned this issue Apr 13, 2022

[Windows 11] [Warns] Build new project show this... #33625

Closed

facebook locked as resolved and limited conversation to collaborators Apr 5, 2023

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Apr 5, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

use-subscription could not resolve dependency for react 18 #33540

use-subscription could not resolve dependency for react 18 #33540

jenskuhrjorgensen commented Mar 31, 2022 •

edited

Loading

hoIIer commented Mar 31, 2022 •

edited

Loading

hoIIer commented Apr 1, 2022

jenskuhrjorgensen commented Apr 2, 2022

sergioUjo commented Apr 4, 2022 •

edited

Loading

Aurum-Vale commented Apr 5, 2022

AsteriskZuo commented Apr 10, 2022 •

edited

Loading

AsteriskZuo commented Apr 10, 2022 •

edited

Loading

cbaconnier commented Apr 22, 2022

use-subscription could not resolve dependency for react 18 #33540

use-subscription could not resolve dependency for react 18 #33540

Comments

jenskuhrjorgensen commented Mar 31, 2022 • edited Loading

Description

Version

Output of npx react-native info

Steps to reproduce

hoIIer commented Mar 31, 2022 • edited Loading

hoIIer commented Apr 1, 2022

jenskuhrjorgensen commented Apr 2, 2022

sergioUjo commented Apr 4, 2022 • edited Loading

Aurum-Vale commented Apr 5, 2022

AsteriskZuo commented Apr 10, 2022 • edited Loading

AsteriskZuo commented Apr 10, 2022 • edited Loading

cbaconnier commented Apr 22, 2022

jenskuhrjorgensen commented Mar 31, 2022 •

edited

Loading

Output of `npx react-native info`

hoIIer commented Mar 31, 2022 •

edited

Loading

sergioUjo commented Apr 4, 2022 •

edited

Loading

AsteriskZuo commented Apr 10, 2022 •

edited

Loading

AsteriskZuo commented Apr 10, 2022 •

edited

Loading