use-subscription could not resolve dependency for react 18

[jenskuhrjorgensen]

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

[erichaus]

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!

[erichaus]

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

@hoIIer no updates

[sergioUjo]

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]

@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]

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]

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