search

GeekyAnts / NativeBase

Mobile-first, accessible components for React Native & Web to build consistent UI across Android, iOS and Web.
https://nativebase.io/
MIT License
20.16k stars 2.39k forks source link

Cannot install NativeBase due to dependencies #5391

Open R4Y-R4Y opened 1 year ago

R4Y-R4Y commented 1 year ago

Description

i cannot install native-base in my expo app and it gives out the error mentioned below

CodeSandbox/Snack link

Steps to reproduce

  1. type in terminal expo install native-base or npm install native-base
  2. It gives out the error 
    
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: ***********@1.0.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR!   react@"18.0.0" from the root project
npm ERR!   peer react@"*" from native-base@3.4.16
npm ERR!   node_modules/native-base
npm ERR!     native-base@"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.2.0" from react-dom@18.2.0
npm ERR! node_modules/react-dom
npm ERR!   peer react-dom@"*" from native-base@3.4.16
npm ERR!   node_modules/native-base
npm ERR!     native-base@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\user\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\user\AppData\Local\npm-cache_logs\2022-09-20T20_36_36_193Z-debug-0.log


### NativeBase Version

3.4.16

### Platform

- [ ] Android
- [ ] CRA
- [X] Expo
- [ ] iOS
- [ ] Next

### Other Platform

_No response_

### Additional Information

`eresolve-report.txt`

npm resolution error report

2022-09-20T20:37:52.850Z

While resolving: **@1.0.0 Found: react@18.0.0 node_modules/react react@"18.0.0" from the root project peer react@"*" from native-base@3.4.16 node_modules/native-base native-base@"3.4.16" from the root project

Could not resolve dependency: peer react@"^18.2.0" from react-dom@18.2.0 node_modules/react-dom peer react-dom@"*" from native-base@3.4.16 node_modules/native-base native-base@"3.4.16" from the root project

Fix the upstream dependency conflict, or retry this command with --force, or --legacy-peer-deps to accept an incorrect (and potentially broken) dependency resolution.

Raw JSON explanation object:

{ "code": "ERESOLVE", "current": { "name": "react", "version": "18.0.0", "whileInstalling": { "name": "**", "version": "1.0.0", "path": "C:\Users\user\**\**\**" }, "location": "node_modules/react", "isWorkspace": false, "dependents": [ { "type": "prod", "name": "react", "spec": "18.0.0", "from": { "location": "C:\Users\user\**\**\**" } }, { "type": "peer", "name": "react", "spec": "*", "from": { "name": "native-base", "version": "3.4.16", "whileInstalling": { "name": "**", "version": "1.0.0", "path": "C:\Users\user\**\**\**" }, "location": "node_modules/native-base", "isWorkspace": false, "dependents": [ { "type": "prod", "name": "native-base", "spec": "3.4.16", "from": { "location": "C:\Users\user\**\**\**" } } ] } } ] }, "currentEdge": { "type": "prod", "name": "react", "spec": "18.0.0", "from": { "location": "C:\Users\user\**\**\**" } }, "edge": { "type": "peer", "name": "react", "spec": "^18.2.0", "error": "INVALID", "from": { "name": "react-dom", "version": "18.2.0", "whileInstalling": { "name": "**", "version": "1.0.0", "path": "C:\Users\user\**\**\**" }, "location": "node_modules/react-dom", "isWorkspace": false, "dependents": [ { "type": "peer", "name": "react-dom", "spec": "*", "from": { "name": "native-base", "version": "3.4.16", "whileInstalling": { "name": "**", "version": "1.0.0", "path": "C:\Users\user\**\**\**" }, "location": "node_modules/native-base", "isWorkspace": false, "dependents": [ { "type": "prod", "name": "native-base", "spec": "3.4.16", "from": { "location": "C:\Users\user\**\**\**" } } ] } } ] } }, "strictPeerDeps": false, "force": false }


i starred all locations to keep it a secret but it gives out basically the project's location
Viraj-10 commented 1 year ago

Hi @R4Y-repo, we currently don't support react@18 and expo 46. we are working on the fix.

OneHatRepo commented 1 year ago

Happening to me too. Please put a lot of effort into releasing a version that works with Expo 46.

R4Y-R4Y commented 1 year ago

Hi @R4Y-repo, we currently don't support react@18 and expo 46. we are working on the fix.

I appreciate that, looking forward to use it in these versions.

Viraj-10 commented 1 year ago

This PR #5266 will fix this issue.

hayate commented 1 year ago

@Viraj-10 when running: npx react-native init TSProject --template react-native-template-typescript react@18.1.0 is installed

"dependencies": {
    "react": "18.1.0",
    "react-native": "0.70.3"
  },

So then when running: npm install native-base react-native-svg@12.1.1 react-native-safe-area-context@3.3.2 We get a similar error as described above.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: TSProject@0.0.1
npm ERR! Found: react@18.1.0
npm ERR! node_modules/react
npm ERR!   react@"18.1.0" from the root project
npm ERR!   peer react@"*" from native-base@3.4.19
npm ERR!   node_modules/native-base
npm ERR!     native-base@"*" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.2.0" from react-dom@18.2.0
npm ERR! node_modules/react-dom
npm ERR!   peer react-dom@"*" from native-base@3.4.19
npm ERR!   node_modules/native-base
npm ERR!     native-base@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
nicolinho22 commented 1 year ago

@Viraj-10 Your PR has not solved the issue. When installing NativeBase 3.4.19, still the same errors:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: mobile-v3@1.0.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR!   react@"18.0.0" from the root project
npm ERR!   peer react@"*" from native-base@3.4.19
npm ERR!   node_modules/native-base
npm ERR!     native-base@"^3.4.19" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.2.0" from react-dom@18.2.0
npm ERR! node_modules/react-dom
npm ERR!   peer react-dom@"*" from native-base@3.4.19
npm ERR!   node_modules/native-base
npm ERR!     native-base@"^3.4.19" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution
Viraj-10 commented 1 year ago

Hi, @nicolinho22 @hayate I tried installing native-base in the expo project and I was able to do it.

Please follow the steps:-

  1. nvm use v16.13.0.
  2. expo init my-project choose the template JS/TS
  3. cd my-project
  4. npm install native-base
  5. npx expo install react-native-svg@12.1.1
  6. npx expo install react-native-safe-area-context@3.3.2
  7. expo install @expo/webpack-config@^0.17.0 (for web support).
  8. npm start

if you still face an error please run npx native-base-info and comment the log here.

Foohx commented 1 year ago

Hi, @nicolinho22 @hayate I tried installing native-base in the expo project and I was able to do it.

Please follow the steps:-

  1. nvm use v16.13.0.
  2. expo init my-project choose the template JS/TS
  3. cd my-project
  4. npm install native-base
  5. npx expo install react-native-svg@12.1.1
  6. npx expo install react-native-safe-area-context@3.3.2
  7. expo install @expo/webpack-config@^0.17.0 (for web support).
  8. npm start

if you still face an error please run npx native-base-info and comment the log here.

I confirm It's working now, but still have a lot of npm warn due to native-base dependencies :

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-aria/tabs@3.0.0-alpha.2
npm WARN Found: react@18.0.0
npm WARN node_modules/react
npm WARN   react@"18.0.0" from the root project
npm WARN   84 more (@react-aria/checkbox, @react-aria/focus, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-aria/tabs@3.0.0-alpha.2
npm WARN node_modules/@react-native-aria/tabs/node_modules/@react-aria/tabs
npm WARN   @react-aria/tabs@"3.0.0-alpha.2" from @react-native-aria/tabs@0.2.8
npm WARN   node_modules/@react-native-aria/tabs
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/tabs@3.0.0-alpha.2
npm WARN   node_modules/@react-native-aria/tabs/node_modules/@react-aria/tabs
npm WARN     @react-aria/tabs@"3.0.0-alpha.2" from @react-native-aria/tabs@0.2.8
npm WARN     node_modules/@react-native-aria/tabs
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-stately/tabs@3.0.0-alpha.1
npm WARN Found: react@18.0.0
npm WARN node_modules/react
npm WARN   react@"18.0.0" from the root project
npm WARN   84 more (@react-aria/checkbox, @react-aria/focus, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-stately/tabs@3.0.0-alpha.1
npm WARN node_modules/@react-native-aria/tabs/node_modules/@react-stately/tabs
npm WARN   @react-stately/tabs@"3.0.0-alpha.1" from @react-native-aria/tabs@0.2.8
npm WARN   node_modules/@react-native-aria/tabs
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-stately/tabs@3.0.0-alpha.1
npm WARN   node_modules/@react-native-aria/tabs/node_modules/@react-stately/tabs
npm WARN     @react-stately/tabs@"3.0.0-alpha.1" from @react-native-aria/tabs@0.2.8
npm WARN     node_modules/@react-native-aria/tabs
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-types/tabs@3.0.0-alpha.2
npm WARN Found: react@18.0.0
npm WARN node_modules/react
npm WARN   react@"18.0.0" from the root project
npm WARN   84 more (@react-aria/checkbox, @react-aria/focus, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/tabs@3.0.0-alpha.2
npm WARN node_modules/@react-native-aria/tabs/node_modules/@react-types/tabs
npm WARN   @react-types/tabs@"3.0.0-alpha.2" from @react-native-aria/tabs@0.2.8
npm WARN   node_modules/@react-native-aria/tabs
npm WARN   3 more (@react-aria/tabs, @react-stately/tabs, @react-stately/tabs)
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-types/tabs@3.0.0-alpha.2
npm WARN   node_modules/@react-native-aria/tabs/node_modules/@react-types/tabs
npm WARN     @react-types/tabs@"3.0.0-alpha.2" from @react-native-aria/tabs@0.2.8
npm WARN     node_modules/@react-native-aria/tabs
npm WARN     3 more (@react-aria/tabs, @react-stately/tabs, @react-stately/tabs)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-aria/focus@3.2.3
npm WARN Found: react@18.0.0
npm WARN node_modules/react
npm WARN   react@"18.0.0" from the root project
npm WARN   84 more (@react-aria/checkbox, @react-aria/focus, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-aria/focus@3.2.3
npm WARN node_modules/native-base/node_modules/@react-aria/focus
npm WARN   @react-aria/focus@"3.2.3" from native-base@3.4.19
npm WARN   node_modules/native-base
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/focus@3.2.3
npm WARN   node_modules/native-base/node_modules/@react-aria/focus
npm WARN     @react-aria/focus@"3.2.3" from native-base@3.4.19
npm WARN     node_modules/native-base
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-stately/checkbox@3.0.3
npm WARN Found: react@18.0.0
npm WARN node_modules/react
npm WARN   react@"18.0.0" from the root project
npm WARN   84 more (@react-aria/checkbox, @react-aria/focus, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-stately/checkbox@3.0.3
npm WARN node_modules/native-base/node_modules/@react-stately/checkbox
npm WARN   @react-stately/checkbox@"3.0.3" from native-base@3.4.19
npm WARN   node_modules/native-base
...
nicolinho22 commented 1 year ago
  1. v16.13.0

Is there a reason we have to use this specific version? It wont work with a newer one? I managed to get it to work in an existing project by just switching to this nvm version and installing the new native base version.

rosc0 commented 1 year ago

I had to add "react-dom": "18.0.0" to my package.json and then install as described in the docs.

Viraj-10 commented 1 year ago

Hi @nicolinho22, It's not a native-base Issue. Node version v16.13.0 have npm v8.1.0. Node 17 and above have npm v8.11 and above. for some reason it is mandatory to use --legacy-peer-deps or --force to install peerDependancies which are not an exact match from npm v8.5 and above. For more details, you can check the issue on npm CLI here. As you can see in the error itself native-base has a * as a dependency so having react@18 shouldn't cause any error.

Viraj-10 commented 1 year ago

I had to add "react-dom": "18.0.0" to my package.json and then install as described in the docs.

Hi @rosc0, we are making react-dom optional peerDep. @proohit just added this PR. which will fix this issue.

Viraj-10 commented 1 year ago

Hi @Foohx, Thanks for sharing the logs seems like the issue is coming from react-native-aria. we will fix this warning soon.

soemarko commented 1 year ago

Will anything bad happen if just install NativeBase with --legacy-peer-deps? Like encountering some weird edge cases that shouldn't have happened, etc.

proohit commented 1 year ago

Will anything bad happen if just install NativeBase with --legacy-peer-deps? Like encountering some weird edge cases that shouldn't have happened, etc.

It could and that's what installing without the flag is warning about: If the version of a (peer)dependency mismatches, the underlying library (native base in this case) might use functionality that's been patched/removed/altered. Either you carefully inspect changes via changelogs or live unknowingly.

Kashyap-Singh03 commented 1 year ago

I am getting this issue kindly help!!

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: AwesomeTSProject@0.0.1
npm ERR! Found: react@18.1.0
npm ERR! node_modules/react
npm ERR!   react@"18.1.0" from the root project
npm ERR!   peer react@"*" from native-base@3.4.22
npm ERR!   node_modules/native-base
npm ERR!     native-base@"*" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.2.0" from react-dom@18.2.0
npm ERR! node_modules/react-dom
npm ERR!   react-dom@"^18.1.0" from the root project
npm ERR!   peer react-dom@"*" from native-base@3.4.22
npm ERR!   node_modules/native-base
npm ERR!     native-base@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
proohit commented 1 year ago

@Kashyap-Singh03 should be fixed when #5507 gets merged.

AlixH commented 1 year ago

Hi, @nicolinho22 @hayate I tried installing native-base in the expo project and I was able to do it. Please follow the steps:-

  1. nvm use v16.13.0.
  2. expo init my-project choose the template JS/TS
  3. cd my-project
  4. npm install native-base
  5. npx expo install react-native-svg@12.1.1
  6. npx expo install react-native-safe-area-context@3.3.2
  7. expo install @expo/webpack-config@^0.17.0 (for web support).
  8. npm start

if you still face an error please run npx native-base-info and comment the log here.

I confirm It's working now, but still have a lot of npm warn due to native-base dependencies :

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-aria/tabs@3.0.0-alpha.2
npm WARN Found: react@18.0.0
npm WARN node_modules/react
npm WARN   react@"18.0.0" from the root project
npm WARN   84 more (@react-aria/checkbox, @react-aria/focus, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-aria/tabs@3.0.0-alpha.2
npm WARN node_modules/@react-native-aria/tabs/node_modules/@react-aria/tabs
npm WARN   @react-aria/tabs@"3.0.0-alpha.2" from @react-native-aria/tabs@0.2.8
npm WARN   node_modules/@react-native-aria/tabs
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/tabs@3.0.0-alpha.2
npm WARN   node_modules/@react-native-aria/tabs/node_modules/@react-aria/tabs
npm WARN     @react-aria/tabs@"3.0.0-alpha.2" from @react-native-aria/tabs@0.2.8
npm WARN     node_modules/@react-native-aria/tabs
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-stately/tabs@3.0.0-alpha.1
npm WARN Found: react@18.0.0
npm WARN node_modules/react
npm WARN   react@"18.0.0" from the root project
npm WARN   84 more (@react-aria/checkbox, @react-aria/focus, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-stately/tabs@3.0.0-alpha.1
npm WARN node_modules/@react-native-aria/tabs/node_modules/@react-stately/tabs
npm WARN   @react-stately/tabs@"3.0.0-alpha.1" from @react-native-aria/tabs@0.2.8
npm WARN   node_modules/@react-native-aria/tabs
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-stately/tabs@3.0.0-alpha.1
npm WARN   node_modules/@react-native-aria/tabs/node_modules/@react-stately/tabs
npm WARN     @react-stately/tabs@"3.0.0-alpha.1" from @react-native-aria/tabs@0.2.8
npm WARN     node_modules/@react-native-aria/tabs
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-types/tabs@3.0.0-alpha.2
npm WARN Found: react@18.0.0
npm WARN node_modules/react
npm WARN   react@"18.0.0" from the root project
npm WARN   84 more (@react-aria/checkbox, @react-aria/focus, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/tabs@3.0.0-alpha.2
npm WARN node_modules/@react-native-aria/tabs/node_modules/@react-types/tabs
npm WARN   @react-types/tabs@"3.0.0-alpha.2" from @react-native-aria/tabs@0.2.8
npm WARN   node_modules/@react-native-aria/tabs
npm WARN   3 more (@react-aria/tabs, @react-stately/tabs, @react-stately/tabs)
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-types/tabs@3.0.0-alpha.2
npm WARN   node_modules/@react-native-aria/tabs/node_modules/@react-types/tabs
npm WARN     @react-types/tabs@"3.0.0-alpha.2" from @react-native-aria/tabs@0.2.8
npm WARN     node_modules/@react-native-aria/tabs
npm WARN     3 more (@react-aria/tabs, @react-stately/tabs, @react-stately/tabs)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-aria/focus@3.2.3
npm WARN Found: react@18.0.0
npm WARN node_modules/react
npm WARN   react@"18.0.0" from the root project
npm WARN   84 more (@react-aria/checkbox, @react-aria/focus, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-aria/focus@3.2.3
npm WARN node_modules/native-base/node_modules/@react-aria/focus
npm WARN   @react-aria/focus@"3.2.3" from native-base@3.4.19
npm WARN   node_modules/native-base
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/focus@3.2.3
npm WARN   node_modules/native-base/node_modules/@react-aria/focus
npm WARN     @react-aria/focus@"3.2.3" from native-base@3.4.19
npm WARN     node_modules/native-base
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-stately/checkbox@3.0.3
npm WARN Found: react@18.0.0
npm WARN node_modules/react
npm WARN   react@"18.0.0" from the root project
npm WARN   84 more (@react-aria/checkbox, @react-aria/focus, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-stately/checkbox@3.0.3
npm WARN node_modules/native-base/node_modules/@react-stately/checkbox
npm WARN   @react-stately/checkbox@"3.0.3" from native-base@3.4.19
npm WARN   node_modules/native-base
...

I am having similar logs with react 18.1

cunhamuril commented 1 year ago

Add the follow lines in your package.json file:

"overrides": {
    "react": "18.0.0"
  },
rassemdev commented 10 months ago

Add the follow lines in your package.json file:

"overrides": {
    "react": "18.0.0"
  },

This is working for me, but can you explain little bit, what it does?

CarlosEduardoC1 commented 3 weeks ago

@rassemdev https://docs.npmjs.com/cli/v9/configuring-npm/package-json#overrides