CT dependencies not detected with Yarn Plug'n'Play

[MikeMcC399]

Current behavior

If dev dependencies are installed using Yarn Plug'n'Play they are not detected in Component Testing mode. This is the default mode for Yarn Modern (version 2 and later), that is to say for a clean Yarn Modern installation, not an upgrade from Yarn Classic which retains the node-modules configuration.

Desired behavior

Cypress should detect dev dependencies installed with Yarn Plug'n'Play and, in the case of the framework Next.js, Component Testing setup should continue and allow a new example spec to be created and successfully run.

Test code to reproduce

Execute

mkdir cy-yarn-pnp-ct
cd cy-yarn-pnp-ct
git init
yarn set version stable
yarn init -y
yarn add cypress -D -E
yarn cypress open

select Component Testing
Select Next.js, click "Next step"
Follow the instructions to copy and paste
yarn add -D next react react-dom
Note that the Cypress desktop app continues to display the spinner with the message "Waiting for you to install the dependencies..."

Do not click "Skip" and "Continue" otherwise this provokes another error.

Cypress Version

First reported on Cypress 12.13.0
Continues to be reproducible on Cypress 13.13.2

Node version

18.16.1 & v20.16.0

Yarn version

3.x and 4.4.0

Operating System

Ubuntu 22.04.4 (and Windows 11)

Debug Logs

  cypress:scaffold-config:detect Checking for default Cypress config file +0ms
  cypress:scaffold-config:detect Detected cypress.config.js - using JS +1ms
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://127.0.0.1:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/home/mike/github/cy-yarn-node-ct/public' directory
  cypress:scaffold-config:frameworks detecting next in /home/mike/github/cy-yarn-node-ct +0ms
  cypress:scaffold-config:frameworks unable to resolve dependency next +10ms
  cypress:scaffold-config:frameworks detecting react in /home/mike/github/cy-yarn-node-ct +0ms
  cypress:scaffold-config:frameworks unable to resolve dependency react +0ms
  cypress:scaffold-config:frameworks detecting react-dom in /home/mike/github/cy-yarn-node-ct +0ms
  cypress:scaffold-config:frameworks unable to resolve dependency react-dom +0ms
  cypress:scaffold-config:frameworks detecting next in /home/mike/github/cy-yarn-node-ct +3ms
  cypress:scaffold-config:frameworks unable to resolve dependency next +1ms
  cypress:scaffold-config:frameworks detecting next in /home/mike/github/cy-yarn-node-ct +8ms
  cypress:scaffold-config:frameworks unable to resolve dependency next +1ms
  cypress:scaffold-config:frameworks detecting react in /home/mike/github/cy-yarn-node-ct +2ms
  cypress:scaffold-config:frameworks unable to resolve dependency react +0ms
  cypress:scaffold-config:frameworks detecting react-dom in /home/mike/github/cy-yarn-node-ct +5ms
  cypress:scaffold-config:frameworks unable to resolve dependency react-dom +0ms
We detected that you have versions of dependencies that are not officially supported:

 - `next`. Expected ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 but dependency was not found.
 - `react`. Expected ^16.0.0 || ^17.0.0 || ^18.0.0 but dependency was not found.
 - `react-dom`. Expected ^16.0.0 || ^17.0.0 || ^18.0.0 but dependency was not found.

If you're experiencing problems, downgrade dependencies and restart Cypress.

15 assets
57 modules
client (webpack 5.90.0) compiled successfully in 453 ms

Other

For comparison, repeat the test with Next.js and CT using Yarn Modern configured for node-modules instead of the default pnp.

mkdir cy-yarn-node-ct
cd cy-yarn-node-ct
git init
yarn set version berry
yarn init -y
yarn config set nodeLinker node-modules
yarn add -D next react react-dom
yarn add cypress -D -E
yarn cypress open

• Pending implementation of Add support of Next.JS 14 #28185 use yarn add -D next@13 react react-dom in the above.

(don't use yarn cypress open --component)

and

select Component Testing
Next.js,is detected, click "Next step"
Click "Continue", click "Continue"
Select Electron and "Start Component Testing in Electron"
Click "Create new spec"
Click "Create spec"
Click "Okay, run the spec"
Test is successful

Now change to pnp:

yarn config set nodeLinker pnp
yarn install
yarn cypress open

and

select Component Testing

[MikeMcC399]

• Related to closed issue Dependencies are not detected during onboarding when using Yarn 3 #25960

[slikts]

I made a reproduction of the same issue, and the dependencies are also not found if they're regular and not dev dependencies: https://github.com/slikts/cypress-yarn-pnp-repro

[MikeMcC399]

@slikts

Thanks for your comment! I will change the title of this issue so it is more general.

I wrote "dev dependencies" because this is what Cypress recommends during installation e.g. yarn add -D next react react-dom.

I expect that the resolution will be the same whether the dependencies are installed as dev or not.

[mike-plummer]

Thanks @MikeMcC399! There was an attempted fix for PnP support in Cypress v12.10.0 but unfortunately had to roll it back in v12.13.0 due to a different issue. This will likely be related to work needed to resolve #26865.

I will forward this ticket to the appropriate team. They will evaluate the priority of this ticket and consider their capacity to pick it up. Please note that this does not guarantee that this issue will be resolved. The ticket will indicate any status changes. Thanks!

[dkreft-termly]

Is there any update to be had here? I'm trying to set up component testing in a webpack, React, yarn 3 environment, and I'm being told that it can't find dependencies:

I see the following in the console:

[daveoconnor]

I'm hitting up against this issue too.

nodeLinker: node-modules in .yarnrc is a workaround but means you lose pnp benefits of no node_modules in the git repo.

[waldemarennsaed]

Also facing this issue still, using Yarn 4 and Cypress 13.13.2 .

[MikeMcC399]

• There was a failed attempt fix: correctly resolve dependencies for CT onboarding when using Yarn Plug n Play #26452 to fix issue Dependencies are not detected during onboarding when using Yarn 3 #25960.
• The related npm package resolve-package-path was last updated 3 years ago and there was no response in the associated repo to Try to require pnp from baseDir if it is null stefanpenner/resolve-package-path#62 from @lmiller1990.

[waldemarennsaed]

• There was a failed attempt fix: correctly resolve dependencies for CT onboarding when using Yarn Plug n Play #26452 to fix issue Dependencies are not detected during onboarding when using Yarn 3 #25960.
• The related npm package resolve-package-path was last updated 3 years ago and there was no response in the associated repo to Try to require pnp from baseDir if it is null stefanpenner/resolve-package-path#62 from @lmiller1990.

Thank you for the update! Maybe we can generate some traffic on that issue 😄

[MikeMcC399]

@waldemarennsaed

The previous attempts are more than one year old. It would need a fresh look at the issue, possibly using different npm module(s).

[waldemarennsaed]

@MikeMcC399 unfortunately I can't say that I would try this out, I don't know anything about Cypress internals and would take a long time to figure out how things work. Who are the people that could fix something like this? I guess we need to get some attention of some folks like @mike-plummer, @jennifer-shehane , @ryanthemanuel and @emilyrohrbough (sorry, not intending to spam, just trying to get some attention on this unresolved issue 😅 - you are the chosen ones).

[MikeMcC399]

• Moved to consolidated request Support Yarn Modern Plug'n'Play (PnP) for CT #30011 for better transparency