I'm building a React Native app, where I'm running into the following issue: the package #react-native-picker/picker is being included by two different node modules. Because of this I run into the error:
tried to register two views with the same name RNCPicker.
I have tried using a "resolutions" block in the apps package.json with #react-native-picker/picker specified, but it doesn't help.
yarn why shows the following:
yarn why v1.22.5
[1/4] 🤔 Why do we have the module "#react-native-picker/picker"...?
[2/4] đźšš Initialising dependency graph...
[3/4] 🔍 Finding dependency...
[4/4] 🚡 Calculating file sizes...
=> Found "#react-native-picker/picker#1.12.0"
info Reasons this module exists
- "native-base" depends on it
- Hoisted from "native-base##react-native-picker#picker"
- Hoisted from "component-library#react-native-picker-select##react-native-picker#picker"
info Disk size without dependencies: "488KB"
info Disk size with unique dependencies: "488KB"
info Disk size with transitive dependencies: "488KB"
info Number of shared dependencies: 0
The component-library package is my own, which contains a component which imports react-native-picker-select. Commenting out the import solves the "two views" error, but this obviously isn't a fix.
What is the correct way to fix this? Seems to me like the dependency should be shared between the two node modules so only one is registered? Isn't this what is supposed to happen with the hoisting?
The error showed up after updating react-native-picker-select to the latest version (8.0.4) in the component-library node modules. The latest version switched to using #react-native-picker/picker.
Edit: I have a workaround for the issue, but this still isn't a proper fix. Including #react-native-picker/picker in the apps package.json and manually removing node_modules/component-library/node_modules/#react-native-picker/picker at least makes the error disappear and the app run again, with a working react-native-picker-select component.
Related
I am using resolutions to resolve a vulnerability coming from a nested dependency (#dep/xyz). The nested dependency is using axios 0.21.1 whichhas a vulnerability. I am supposed to upgrade to any compatible version above it.
When I added it to resolutions like below I don't see the update in yarn.lock file for the nested dependency. Please advise.
Below is my package.json file
package.json
{
"name" : "xyz",
dependencies: {
"#dep/xyz" : "2.3.4",
"axios": "^0.21.2"
},
"resolutions": {
"**/**/axios": "^0.21.2"
}
}
yarn.lock which gets created after yarn install of above
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
axios#^0.21.1, axios#^0.21.2:
version "0.21.4"
resolved "https:..."
integrity sha1-123...=
dependencies:
follow-redirects "^1.14.0"
"#dep/xyz#2.3.4":
version "2.3.4"
resolved "https:..."
integrity sha1-123...=
dependencies:
"#x/d1" "0.2.2"
"#y/d2" "0.9.2"
axios "^0.21.1"
You likely need to upgrade yarn. resolutions does not work with dependencies that have / in their name for yarn versions below 2. See https://github.com/yarnpkg/yarn/issues/4874
For starters, you don't need to do any resolution pinning. #dep/xyz#2.3.4 is pulling in axios with semver specification of "^0.21.1". In this context it will accept any version that is both >=0.21.1 and <0.22.0. You need only to use yarn to update the version of axios being resolved. I would advise AGAINST resolution pinning when you don't need to, because that can cause long-term incompatibility. If in the future axios has version >=0.22.0 that you or your dependencies are trying to consume, your resolution setting will force those down to be something within the range >=0.21.2 && <0.22.0.
More directly to your question - I don't see anything that looks wrong. The lockfile is doing exactly what I would expect. Your resolution of "axios#^0.21.2" is being respected, as it's pulling in 0.21.4 which abides by that (even though like I said a resolution is not necessary to achieve that). You haven't done any kind of resolution pinning associated with #dep/xyz (nor should you) so nothing is changed there.
Testcafe 1.10 doesn’t seem to run via Yarn 2, while it just works running the globally installed one manually. I get this output:
ERROR Error: testcafe-legacy-api tried to access read-file-relative, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.
Required package: read-file-relative (via "read-file-relative")
Required by: testcafe-legacy-api#npm:4.0.0 (via /data/Fichiers/Code/testcafe/.yarn/cache/testcafe-legacy-api-npm-4.0.0-ff97b69c8c-e4a891ec41.zip/node_modules/testcafe-legacy-api/lib/)
I can see that read-file-relative is listed as a dependency of testcafe, but not as a dependency of testcafe-legacy-api (https://yarnpkg.com/package/testcafe, https://yarnpkg.com/package/testcafe-legacy-api), which itself is a dependency of testcafe.
EDIT : PRs on both sides have been merged so it should work now or soon without using the workaround below.
Apparently testcafe and its dependency testcafe-legacy-api have several actual dependencies that are not listed in their dependencies listing.
As the documentation for .yarnrc.yml explains:
Some packages may have been specified incorrectly with regard to their dependencies - for example with one dependency being missing, causing Yarn to refuse it the access. The packageExtensions fields offer a way to extend the existing package definitions with additional information.
Adding this to my .yarnrc.yml and then running yarn install (or yarn) fixed it:
packageExtensions:
"testcafe#*":
dependencies:
"#babel/runtime": "*"
"#babel/plugin-transform-for-of": "*"
"testcafe-legacy-api#*":
dependencies:
"read-file-relative": "*"
"testcafe-hammerhead": "*"
I currently have the the following issue when running a unit test using the Jest Vue cli plugin found here. https://www.npmjs.com/package/#vue/cli-plugin-unit-jest
Error I receive is Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of #babel/core, it is likely that somet
hing in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "#
babel/core" or "babel-core" to see what is calling Babel
I am using Yarn workspaces and would like to know the best way to force #vue/cli-plugin-unit-jest to use babel-core of version ^7.0.0-0
I created a new aurelia project and installed gojs via npm. I added gojs to the aurelia.json dependencies and, without adding any gojs code, just tried to build the project. The build worked fine and gojs went to the vendor-bundle.js The issue is, when I run the project, I get an error from gojs. When I remove the gojs dependency in aurelia.json, the project runs just fine but adding it back always throws the same error located below. Please help.
Uncaught Error: Mismatched anonymous define() module: [object Object]
http://requirejs.org/docs/errors.html#mismatch
at makeError (vendor-bundle.js:11531)
at intakeDefines (vendor-bundle.js:12617)
at vendor-bundle.js:12815
makeError # vendor-bundle.js:11531
intakeDefines # vendor-bundle.js:12617
(anonymous) # vendor-bundle.js:12815
setTimeout (async)
req.nextTick # vendor-bundle.js:13178
localRequire # vendor-bundle.js:12812
requirejs # vendor-bundle.js:13160
(anonymous) # vendor-bundle.js:13199
(anonymous) # vendor-bundle.js:13508
To clear up some confusion here, you're talking about declaring the dependency in aurelia.json which implies you're using aurelia-cli in conjunction with the requirejs loader.
jmdavid's answer mentions webpack which is a different beast altogether. You don't declare dependencies in aurelia.json there; webpack resolves those by itself via the imports it finds in your entry file. I would actually recommend switching to webpack for various reasons; the fact that it would fix the error is just one of them.
The error is likely caused by the go.js module being loaded twice. The error throws on the second load; it should still work regardless of the error. You can't make the error go away in any straightforward manner with requirejs, this is due to how the go.js release is packed.
The only error-free way to load go.js here would be to do so before requirejs is loaded. In aurelia.json:
"node_modules/gojs/release/go.js",
"node_modules/requirejs/require.js"
And no need to import it then either, it will just be available globally.
Probably the versions are oudated on fedoranimus github (https://github.com/fedoranimus/aurelia-gojs).
I made it work by creating a new project with the cli (au new) with webpack and typescript, then npm installed gojs (version "^1.8.15"), then copied relevant code from fedoranimus.
There is an error when I build my react-native project with the version 0.20.0:
Looking for JS files in
/Users/rockyl/WorkSpaces/react-native/TinySNS
[13:55:06] <START> Building Dependency Graph
[13:55:06] <START> Crawling File System
[13:55:06] <START> Loading bundles layout
[13:55:06] <END> Loading bundles layout (1ms)
[Hot Module Replacement] Server listening on /hot
React packager ready.
ERROR unable to resolve root /Users/rockyl/WorkSpaces/react-native/TinySNS: failed to opendir(/Users/rockyl/WorkSpaces/react-native/TinySNS): No such file or directory
{"watchmanResponse":{"version":"4.4.0","error":"unable to resolve root /Users/rockyl/WorkSpaces/react-native/TinySNS: failed to opendir(/Users/rockyl/WorkSpaces/react-native/TinySNS): No such file or directory"}}
Error: unable to resolve root /Users/rockyl/WorkSpaces/react-native/TinySNS: failed to opendir(/Users/rockyl/WorkSpaces/react-native/TinySNS): No such file or directory
at BunserBuf.<anonymous> (/Users/rockyl/WorkSpaces/react-native/TinySNS/node_modules/react-native/node_modules/sane/node_modules/fb-watchman/index.js:95:23)
at emitOne (events.js:77:13)
at BunserBuf.emit (events.js:169:7)
at BunserBuf.process (/Users/rockyl/WorkSpaces/react-native/TinySNS/node_modules/react-native/node_modules/bser/index.js:289:10)
at /Users/rockyl/WorkSpaces/react-native/TinySNS/node_modules/react-native/node_modules/bser/index.js:244:12
at doNTCallback0 (node.js:419:9)
at process._tickCallback (node.js:348:13)
See http://facebook.github.io/react-native/docs/troubleshooting.html
for common problems and solutions.
here is the logs:
and here is the real-time logs:
But the root path truly exists.
Thanks for posting those logs; what's happening here is an issue with the casing of the WorkSpaces directory in that path that is being watched. There's some complicated background to this that results in watchman needing to know the exact casing of the file names so that we can report on case-change-only-renames.
The TL;DR is that you should either ask React Native to watch the path using Workspaces as the directory name, or rename the directory so that it is actually WorkSpaces (in other words, make sure that the path you're asking for exactly matches that of the filesystem).
There are a couple of watchman bugs here that I'll work on fixing in the meantime:
We should canonicalize this path using our strict canon at the earlier stage in watching (should make this use case "just work")
We should surface this error with this explanation when such a mismatch occurs
In short: Just rename the containing folder where your project is located to workspaces (All in lowercase), an example here: