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.
Related
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?
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?
My package-lock.json has a weird entry for :
"commander": {
"version": "2.15.1",
"resolved": "github:mateodelnorte/commander.js#9060bf880b791cf39245d425f1e8a41a55616781"
},
All other packages show up as resolved in our Virtual Repository defined in Artifactory
npm list commander#2.15.1 tells me ...
├─┬ d3#4.13.0
│ ├─┬ d3-dsv#1.0.8
│ │ └── commander#2.15.1 (github:mateodelnorte/commander.js#9060bf880b791cf39245d425f1e8a41a55616781)
│ └─┬ d3-request#1.0.6
│ └─┬ d3-dsv#1.2.0
│ └── commander#2.15.1 deduped (github:mateodelnorte/commander.js#9060bf880b791cf39245d425f1e8a41a55616781)
└─┬ react-scripts#3.4.4
└─┬ eslint-plugin-jsx-a11y#6.2.3
└─┬ aria-query#3.0.0
└── commander#2.15.1 deduped (github:mateodelnorte/commander.js#9060bf880b791cf39245d425f1e8a41a55616781)
What is special about this package? Is there anyway to avoid it resolving to github:mateodelnorte/commander.js
I know we can updates the direct dependencies that pull it in (which could be painful) but just trying to understand why it has the weird resolved value.
I did read at :
https://github.com/mateodelnorte/meta/issues/26
Im having issues adopting this behind a proxy because of the github
connection for commander module.
https://github.com/mateodelnorte/meta/blob/master/package.json#L36
Is there any way we can make this a NPM dependency?
and I think they did commander not to act weird, so I dont get the issues for later version e.g. this does not mention github:mateodelnorte/commander.js
├─┬ enzyme#3.11.0
│ └─┬ rst-selector-parser#2.2.3
│ └─┬ nearley#2.20.1
│ └── commander#2.20.3
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