When installing a package with pnpm I get this error:
ERR_PNPM_PEER_DEP_ISSUES Unmet peer dependencies
tinacms
└─┬ #tinacms/toolkit
├─┬ #react-aria/listbox
│ └── ✕ unmet peer react#"^16.8.0 || ^17.0.0-rc.1": found 18.2.0
└─┬ #udecode/plate-headless
└─┬ #udecode/plate-alignment
└─┬ #udecode/plate-core
└─┬ #radix-ui/react-slot
├── ✕ unmet peer react#"^16.8 || ^17.0": found 18.2.0
└─┬ #radix-ui/react-compose-refs
└── ✕ unmet peer react#"^16.8 || ^17.0": found 18.2.0
I am already using react in the project (hence it found 18.2.0), so I can't just install it a second time.
I looked into creating aliases, but this won't help me because in my dependencies, react is imported just as react - no way to change this to react-latest or similar. I then tried my luck with pnpm overrides.
This field allows you to instruct pnpm to override any dependency in the dependency graph. This is useful to enforce all your packages to use a single version of a dependency, backport a fix, or replace a dependency with a fork.
I tried it like this in my package.json:
"pnpm": {
"overrides": {
"react": "18.2.0"
}
}
I was hoping this would be a clean way to deal with this, but the warning is still show. Seems like my last chance is accepting it and adding strict-peer-dependencies=false to my .npmrc to stop this to fail the install process. But is there maybe a cleaner way to deal with this?
Related
I am running Expo on MacOS. Running the web app (npm run web), I get the Invalid Hook Call Warning. The web app shows only an empty page with the hook call warning in the console. The iOS version works.
From npm ls react I get the following tree:
├─┬ react-native#0.70.5
│ ├─┬ react-shallow-renderer#16.15.0
│ │ └── react#18.1.0 deduped
│ ├── react#18.1.0 deduped
│ └─┬ use-sync-external-store#1.2.0
│ └── react#18.1.0 deduped
└── react#18.1.0
The documentation doesn't provide much guidance beyond checking the tree. I'm not sure what to do next. To my knowledge I never used npm link.
I have a package which has a dependency on cross-spawn and the build is coming out be successful right now. I don't see any issues.
However, cross-spawn is not present in our package.json and is come indirectly from
├─┬ #wdio/cli#7.0.0
│ └─┬ yarn-install#1.0.0
│ └── cross-spawn#4.0.2
└─┬ eslint#8.25.0
└── cross-spawn#7.0.3
Should I get a direct dependency in my package.json? What advantages do I get with that? Will there be any conflicts? I am new to npm world and I would like to understand how a direct dependency vs indirect dependency can cause issues?
I am getting this error when trying to import and use the GiftedChat component from "react-native-gifted-chat":
Invariant Violation: Tried to register two views with the same name RNCSafeAreaProvider, js engine: hermes
I have tried several things listed here. People appear to have similar issues with other packages relating to "react-native-safe-area-context".
I have updated "react-native-safe-area-context" (4.2.5 at the time of this post)
uninstalled "react-native-safe-area-context"
rm node_modules
rm -rf ios/Pods && ios/Podfile.lock
rm package-lock.json
npm install
reinstall pods -> npx pod-install
build the project again to the same error
I am NOT using expo but I am using the React Native CLI.
It appears to me that the issue is with "react-native-gifted-chat".
Details:
"react-native": "0.66.4"
"react-native-safe-area-context": "^3.1.9"
"react-native-gifted-chat": "^1.0.0"
If anyone has any ideas or insight I would appreciate it. If I find a solution I will post it as a comment.
According to this post the error means the same extension is installed multiple times.
checked where "react-native-safe-area-view" was being used
npm list react-native-safe-area-context
Results:
├─┬ #react-navigation/bottom-tabs#6.3.1
│ ├─┬ #react-navigation/elements#1.3.3
│ │ └── react-native-safe-area-context#3.1.9 deduped
│ └── react-native-safe-area-context#3.1.9 deduped
├─┬ #react-navigation/stack#6.2.1
│ └── react-native-safe-area-context#3.1.9 deduped
├─┬ react-native-gifted-chat#1.0.0
│ └── react-native-safe-area-context#4.2.4
└── react-native-safe-area-context#3.1.9
it appears that gifted chat is pulling in 4.2.4 and 3.1.9
updated "react-native-safe-area-context" to latest version (4.2.5)
ran npm dedupe
"react-native-gifted-chat" appeared to still be pulling in two versions
├─┬ #react-navigation/bottom-tabs#6.3.1
│ ├─┬ #react-navigation/elements#1.3.3
│ │ └── react-native-safe-area-context#4.2.5 deduped
│ └── react-native-safe-area-context#4.2.5 deduped
├─┬ #react-navigation/stack#6.2.1
│ └── react-native-safe-area-context#4.2.5 deduped
├─┬ react-native-gifted-chat#1.0.0
│ └── react-native-safe-area-context#4.2.4
└── react-native-safe-area-context#4.2.5
This seemed odd so I check the package itself in node_modulesnode_modules/node_modules/react-native-gifted-chat/package.json and found that the dependencies requested 4.2.4 specifically
"dependencies": {
"#expo/react-native-action-sheet": "3.13.0",
"dayjs": "1.8.26",
"prop-types": "15.7.2",
"react-native-communications": "2.2.1",
"react-native-iphone-x-helper": "1.3.1",
"react-native-lightbox-v2": "0.9.0",
"react-native-parsed-text": "0.0.22",
--> "react-native-safe-area-context": "4.2.4", <--
"react-native-typing-animation": "0.1.7",
"use-memo-one": "1.1.1",
"uuid": "3.4.0"
},
instead of requiring ^4.2.4 they specifically require version 4.2.4
side note:
^ character defines a range of acceptable versions that include all patch and minor versions from the ones specified up to, but not including, the next version. So "^1.2.3" can be approximately expanded as ">=1.2.3 <2.0.0".
What does mean?
I installed the required version for "react-native-gifted-chat" which will work with all other dependencies then checked if it was finally deduped.
npm install react-native-safe-area-context#4.2.4
npm list react-native-safe-area-context
finally deduped
├─┬ #react-navigation/bottom-tabs#6.3.1
│ ├─┬ #react-navigation/elements#1.3.3
│ │ └── react-native-safe-area-context#4.2.4 deduped
│ └── react-native-safe-area-context#4.2.4 deduped
├─┬ #react-navigation/stack#6.2.1
│ └── react-native-safe-area-context#4.2.4 deduped
├─┬ react-native-gifted-chat#1.0.0
│ └── react-native-safe-area-context#4.2.4 deduped
└── react-native-safe-area-context#4.2.4
Error fixed.
Don't forget to reinstall your pods.
TL;DR
"react-native-gifted-chat" did not write their package.json correctly.
They specifically require version 4.2.4 of "react-native-safe-area-context"
They should require versions ^4.2.4 (>=4.2.4 < 5.0.0)
Installing this specific version fixes the issue since there is not two version of the package being used. npm install react-native-safe-area-context#4.2.4
Could alternatively do a patch for "react-native-gifted-chat" making the fix just listed
Don't forget to reinstall your pods and all that jazz
For me its working fine after upgrading react-native-safe-area-context to version 4.3.3
npm i react-native-safe-area-context#4.3.3
I have a problem with path-to-regexp, I want to ensure if possible all dependencies go through 3.0.0.
I have ran
npm i path-to-regexp it adds this to my package.json:
"path-to-regexp": "^3.0.0",
But when I run
npm ls path-to-regexp
I get:
├── path-to-regexp#3.0.0
├─┬ react-router-dom#5.0.0
│ └─┬ react-router#5.0.0
│ └── path-to-regexp#1.7.0
└─┬ react-scripts#3.0.1
└─┬ webpack-dev-server#3.2.1
└─┬ express#4.17.0
└── path-to-regexp#0.1.7
I want react-router-dom use 3.0.0.
Is this possible?
Different modules are released by different teams, on different schedules, with independent version numbers. It makes no sense to force "all dependencies" to the same version.
How to override a specific dependency version, in your case react-router-dom, is explained here:
https://stackoverflow.com/a/17423915/11451509
There's an npm module I'm using, that works fine in my project when installed with npm and its semver, but that fails with the below error when I try to install it with its github url.
The error: Uncaught Error: removeComponentAsRefFrom(...): Only a ReactOwner can have refs. You might be removing a ref to a component that was not created inside a component'srendermethod, or you have multiple copies of React loaded
I'm loading the same version of the module, not changing any build configs, the only difference is loading with semver vs github url.
I should say, the module's lib folder is not checked into github. So I do run a build of the module manually.
I'm using webpack for the build. I suspect its a problem with the copies of react being loaded, but that doesn't seem to have changed, and webpack seems to be handling duplicates.
npm ls react:
├── react#15.6.1
├─┬ react-color#2.2.0
│ └─┬ reactcss#0.4.6
│ └── react#0.14.9
└─┬ react-with-context#1.2.1
└── react#15.6.1 deduped
A little confused, any tips appreciated
(If that makes any difference, the error seems to be thrown from a dependency of the module that I'm testing. And in both modules (the one I'm testing + its dependency), react is listed as a peerDependency package.json)