Testcafe won’t run with Yarn 2 - testing

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": "*"

Related

nested dependencies resolution for yarn not showing up in yarn.lockfile

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.

Two views named RNCPicker / Yarn: how to share dependency between dependencies?

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.

Yarn force a package to use a specific version

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

Publishing #progress/kendo-ui to nexus 3..5.1 npm pkg repository

We've migrated from Nexus 3.01.01 to 3.5.1-02. In the process we had to migrate internally published npms. One of those is the kendo-ui (commercial one) from Telerik/Progress. We have downloaded the licensed copy from Telerik and publishing it to our local nexus for consumption by our developers.
However the publishing fails with an error during payload parsing. I can publish the same tar without an issue to the older (3.01.01) nexus, so the tar/payload it self is OK.
The error seem to be at the point of trying to parse the npm payload. I can also publish a demo/simple npm (both scoped and non-scoped) without an issue. Spend the whole day trying to figure this out with no luck - appreciate any pointers or advice.
2017-09-06 18:49:09,160+0800 WARN [qtp762281666-4116] MIDALLE
org.sonatype.nexus.repository.httpbridge.internal.ViewServlet -
Failure servicing: PUT /repository/npm-hosted/#progress%2fkendo-ui
java.lang.IllegalStateException: Unexpected token VALUE_NULL at
[Source: java.io.InputStreamReader#1ebad5c7; line: 1, column: 896] at
com.sonatype.nexus.repository.npm.internal.NpmPublishParser.parseValue(NpmPublishParser.java:150)
at
com.sonatype.nexus.repository.npm.internal.NpmPublishParser.parseObject(NpmPublishParser.java:174)
at
com.sonatype.nexus.repository.npm.internal.NpmPublishParser.parseValue(NpmPublishParser.java:136)
at
com.sonatype.nexus.repository.npm.internal.NpmPublishParser.parseObject(NpmPublishParser.java:174)
at
com.sonatype.nexus.repository.npm.internal.NpmPublishParser.parseValue(NpmPublishParser.java:136)
at
com.sonatype.nexus.repository.npm.internal.NpmPublishParser.parsePackageRoot(NpmPublishParser.java:123)
at
com.sonatype.nexus.repository.npm.internal.NpmPublishParser.parse(NpmPublishParser.java:98)
at
com.sonatype.nexus.repository.npm.internal.NpmRequestParser.parseNpmPublish(NpmRequestParser.java:81)
at
com.sonatype.nexus.repository.npm.internal.NpmRequestParser.parsePublish(NpmRequestParser.java:60)
at
com.sonatype.nexus.repository.npm.internal.NpmHostedFacetImpl.putPackage(NpmHostedFacetImpl.java:85)
at
com.sonatype.nexus.repository.npm.internal.NpmHandlers$3.handle(NpmHandlers.java:172)
at
org.sonatype.nexus.repository.view.Context.proceed(Context.java:80)
Here's the gist for the full error from the nexus log.
This issue was resolved in scope of https://issues.sonatype.org/browse/NEXUS-14385
Fix Version/s:
3.6.1
There was a problem with parsing null values in package.json
I got this to work however I'm still trying to figure out the impact of the change. Please be cautious if you apply the same 'hack' to get this to work. I had to do this, because there was several other project teams that was getting affected.
In a nutshell I had to strip out few keys from the package.json of the kendo-ui package. My analysis is that these settings makes npm issue a network call that fails in our constraint environment.
The package.json keys that I removed are as follows.
First section
"_resolved": "https://registry.npm.telerik.com/#progress%2fkendo-ui/-/kendo-ui-2017.2.621.tgz",
"_shasum": "09a652ead21700716dd5a50f9e86e9bffcea640e",
"_shrinkwrap": null,
Second section
"dist": {
"shasum": "09a652ead21700716dd5a50f9e86e9bffcea640e",
"tarball": "http://registry.npm.telerik.com/#progress%2fkendo-ui/-/kendo-ui-2017.2.621.tgz"
},
I'd really appreciate if someone who know more about npm and npm definitions can inform the purpose of these settings in the package.json and potential impacts of removing them.

How to install flow type correctly for react native#0.46+?

I've googled many sites but cannot found a tutorial that actually works for react-native + flow type.
There was flow installation guide from react-native#0.22 document, but it's gone in react-native#0.46.
However, it comes up again in Running Tests and Contributing, I tested to run npm run flow but not working, and yet it doesn't say how to make it works. It's possibly been a missing part inside of react-native documentation.
What I need is to run flow correctly with react-native. Auto-check flow every time I reload the page with ⌘R would be the best.
I just finished covering half of our project by flow and we use RN 0.44.0.
The tricky part is: do you also want to know errors inside node_modules, someone says those errors are helpful.
Anyway, I disable the error in node_modules, and here is my .flowconfig:
[ignore]
<PROJECT_ROOT>/node_modules/.*
<PROJECT_ROOT>/flowLibs.js
.....
[include]
[libs]
./flowLibs.js
.....
[lints]
[options]
You should install flow first if you not setup correctly,
npm install --save-dev flow-bin
and also run this in you project root after install:
npm run flow init
If npm run flow init does not work, just add "flow": "flow" in npm scripts.
After init, put my .flowconfig in your project .flowconfig file.
Then create a js file flowLibs.js and if npm run flow check cause your any error like Module_Name. Required module not found
Write down code in flowLibs.js:
declare module 'Module_Name' { declare var exports: any; };
After that, you should be good to go with you project now.
BTW, don't forget add //#flow on the top of the file which you want to check type.
I found flowtype is built in with react-native#0.46+.
For react-native document, I think they should at least tell flowtype is already built in. And for the rest document ex: Testing Your Changes#flow, it won't work without flow-bin, they should mention that too.
To make flowtype of best use, I use it with Visual Studio Code.
Steps:
Install flow-bin globally, by npm i flow-bin -g.
Make sure your terminal is responsive to command flow.
Install vscode flow extension.
Set vscode workspace preference with "javascript.validate.enable": false, to disable default javascript validation, so flow validation can take place.
To access vscode preference, ALT+F,P,S for windows, ⌘+, for mac.
then you have flowtype installed with visual result with every key stroke:
Try this one:
Adding Flow to React Native
https://medium.com/react-native-training/getting-started-with-react-native-and-flow-d40f55746809
Hope this helps!