Cypress v13: Can't resolve '@cypress/code-coverage/support' using Yarn PnP

[wataruian]

Current behavior

When importing @cypress/code-coverage/support in the support file like this:

cypress/support/e2e.ts:

import '@cypress/code-coverage/support';
import './commands';
...
...

cypress is throwing an error:

Oops...we found an error preparing this test file:

  > tests/cypress/support/e2e.ts

The error was:

Error: Webpack Compilation Error
Module not found: Error: Can't resolve '@cypress/code-coverage/support' in '/Users/wataruian/projects/monorepo/packages/frontend/tests/cypress/support'
    at handle (/Users/wataruian/Library/Caches/Cypress/13.3.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js:212:23)
    at finalCallback (/Users/wataruian/Library/Caches/Cypress/13.3.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:441:32)
    at /Users/wataruian/Library/Caches/Cypress/13.3.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:505:17
    at /Users/wataruian/Library/Caches/Cypress/13.3.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/HookWebpackError.js:68:3
    at Hook.eval [as callAsync] (eval at create (/Users/wataruian/Library/Caches/Cypress/13.3.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/wataruian/Library/Caches/Cypress/13.3.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:18:14)
    at Cache.storeBuildDependencies (/Users/wataruian/Library/Caches/Cypress/13.3.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Cache.js:122:37)
    at /Users/wataruian/Library/Caches/Cypress/13.3.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:501:19
    at Hook.eval [as callAsync] (eval at create (/Users/wataruian/Library/Caches/Cypress/13.3.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/wataruian/Library/Caches/Cypress/13.3.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:18:14)
    at /Users/wataruian/Library/Caches/Cypress/13.3.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:498:23
    at Compiler.emitRecords (/Users/wataruian/Library/Caches/Cypress/13.3.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:919:5)
    at /Users/wataruian/Library/Caches/Cypress/13.3.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:490:11
    at /Users/wataruian/Library/Caches/Cypress/13.3.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:885:14
    at Hook.eval [as callAsync] (eval at create (/Users/wataruian/Library/Caches/Cypress/13.3.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/wataruian/Library/Caches/Cypress/13.3.0/Cypress.app/Contents/Resources/app/node_modules/tapable/lib/Hook.js:18:14)
    at /Users/wataruian/Library/Caches/Cypress/13.3.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:882:27
    at /Users/wataruian/Library/Caches/Cypress/13.3.0/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:2818:7
    at done (/Users/wataruian/Library/Caches/Cypress/13.3.0/Cypress.app/Contents/Resources/app/node_modules/neo-async/async.js:3522:9)
    at alreadyWritten (/Users/wataruian/Library/Caches/Cypress/13.3.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:714:8)
    at /Users/wataruian/Library/Caches/Cypress/13.3.0/Cypress.app/Contents/Resources/app/node_modules/webpack/lib/Compiler.js:802:19
    at /Users/wataruian/Library/Caches/Cypress/13.3.0/Cypress.app/Contents/Resources/app/node_modules/graceful-fs/graceful-fs.js:123:16

This occurred while Cypress was compiling and bundling your test code. This is usually caused by:

- A missing file or dependency
- A syntax error in the file or one of its dependencies

Fix the error in your code and re-run your tests.

But when the import is removed, cypress is working fine but is not desired since code coverage functionality will also be removed.

The error occurred after updating to ^13.3.0, everything is working fine on ^12.17.1 with Yarn PnP (3.5.0).

Desired behavior

Code coverage should work regardless of the cypress version using Yarn PnP.

Test code to reproduce

1. Install Yarn PnP version 3.5.0
2. Install cypress version ^13.3.0
3. Import @cypress/code-coverage/support in the support file
4. Run cypress

Cypress Version

^13.3.0

Node version

v18.15.0

Operating System

Apple M2 Pro: macOS 13.5.2 (22G91)

Debug Logs

No response

Other

No response

[MikeMcC399]

@wataruian

This issue is also reproducible with:

Component	Version / Setting
Cypress	cypress@13.3.0
config file	cypress.config.js
Code coverage	@cypress/code-coverage@3.12.1
Node.js	20.8.0
Ubuntu	22.04.3 LTS
Yarn Modern	3.6.3
nodeLinker	pnp

Cypress has multiple unresolved compatibility issues with Yarn Modern Plug'n'Play at this time, especially for Component Testing. If you need to migrate to Cypress 13.x, then you could use node-modules (or pnpm) instead of pnp, for instance through the workaround:

yarn config set nodeLinker node-modules
yarn install

then

yarn cypress run

should work.

[wataruian]

Thanks for this!

Any plans to fully support PnP for 13.x and future versions as well?

So that we can get the benefits of "zero-installs". 😄

[wiegell]

@wataruian i'm also waiting for better pnp support.
v12.17.3 seems to be the best at the moment. If you're using typescript, you have to mod your config something like this (nx example):

const { nxE2EPreset } = require('@nx/cypress/plugins/cypress-preset');
const { defineConfig } = require('cypress');

module.exports = defineConfig({
  e2e: { ...nxE2EPreset(__dirname), baseUrl: 'https://localhost:4300' },
});

There is an issue regarding that here: #22747

[wataruian]

@wiegell thanks for sharing this! I too am waiting for seamless PnP support.

For now, I'll just go with v12.

[wiegell]

@wiegell thanks for sharing this! I too am waiting for seamless PnP support.

For now, I'll just go with v12.

Careful with unspecific v12, since 12.17.4 has another pnp-bug :)

[vire]

I can confirm that with yarn4 and NX17 I'm getting an error

(none of the cypress@12 and cypress@13 seem to be working) right now for me so upgrade to yarn4 is broken

require$$0.isBuiltin is not a function
TypeError: require$$0.isBuiltin is not a function + stacktrace to node

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[cypress-app-bot]

This issue has been closed due to inactivity.

[Fanduel-Graham]

Hey folks, im seeing a similar issue when using a project with pnp, i've tried with latest release but still have similar issues did anyone resolve this or is this in development pipeline in 13.x? should i open a new tracking issue for this if not?

[jennifer-shehane]

Possibly related to this change in 13.0.0? #27583

[dclowd9901]

@jennifer-shehane we think so too. We theorized that upgrading enhanced-resolve to 5.17.0 might fix the issue, but I was unable to test locally.

[dclowd9901]

Since this issue doesn't provide one, and I put in the effort, I'm going to put my minimum reproducible example on here: https://github.com/dclowd9901/cypress-13-yarn-pnp-workspace-bug-minimum-reproducible-example/blob/main/README.md

[AtofStryker]

I had a little bit of time to take a look at the issue this morning. Going to jot down some of my notes...

With the reproduction provided:

• Cypress 12.12.0 doesn’t work.

• The patch to enhanced-resolve in 12.13.0 works

• 12.14.0 introduces webpack 5, which breaks pnp here since we are unable to discover pnp. The plugin code should have been gated which looks like a miss on our end. Either way, not using webpack-pnp-plugin does not seem to fix the problem.

• Updating enhanced-resolve to 5.17.0 does not fix the problem.

Likely this has to do with the webpack 5 update to the preprocessor since webpack 5 is supposed to handle pnp resolutions OOTB. But when the webpack compiler attempts to compile the file, the dependencies can’t be found.

This might be an issue with my local setup since I am running yarn 1.22.1 on the cypress project against a project with yarn 4 / pnp. Maybe since webpack believes it can auto resolve pnp, and sees yarn 1.22.1, it figures pnp may not be enabled.

It might be worth it to edit the web pack-preprocessor / webpack-batteries-included-preprocessor from the actual installed binary and debug the code that way since we know we are running on the correct yarn. However the cache directories are all zip files which might make debugging challenging.

Hoping to look at this more later this week.

[dclowd9901]

Updating enhanced-resolve to 5.17.0 does not fix the problem.

Darn, was really hoping for it to be an easy fix there.

Unplugging that dependency might be a cheap and quick way to "unzip" the packages you're wanting to debug? Anyway, happy to bounce ideas -- I'm on Discord at ddrew6012. So grateful y'all are looking into this.

[AtofStryker]

Updating enhanced-resolve to 5.17.0 does not fix the problem.

Darn, was really hoping for it to be an easy fix there.

Unplugging that dependency might be a cheap and quick way to "unzip" the packages you're wanting to debug? Anyway, happy to bounce ideas -- I'm on Discord at ddrew6012. So grateful y'all are looking into this.

its a bit complicated since cypress installs as an npm package, but ultimately executes a binary that lives in the cache directory, which ships with the webpack-preprocessors that we need to debug, so it unlikely won't be as simple as unzipping the installed dep. Going to start back up on this in a few and see what I come up with.

[AtofStryker]

This looks like it might be an issue with webpack 5. Before in webpack 4, we were able to discover pnpApi with the pnp-webpack-plugin. Webpack now is supposed to discover this by default, but because the cypress process hosting webpack does not install dependencies via pnp, webpack is trying to look in the node_modules folder of the project/test directory, which is not correct. I have created a reproduction outside of cypress to showcase the issue an opened an issue with webpack webpack/webpack#18586.

[AtofStryker]

Good news @dclowd9901 . I actually messed up the original attempt at fixing this and updated enhanced-resolve in the wrong hoisted dependency directory. It looks to be working correctly with the reproduction, plus a few other fixes... Are you or anyone else able to try out the binaries on this commit?

[dclowd9901]

Good news @dclowd9901 . I actually messed up the original attempt at fixing this and updated enhanced-resolve in the wrong hoisted dependency directory. It looks to be working correctly with the reproduction, plus a few other fixes... Are you or anyone else able to try out the binaries on this commit?

Awesome. For our part, I'll pull down the commit and check it on our stuff.

[dclowd9901]

There's a very good chance I'm doing something wrong here, but I was able to pull down this version of the binary:

https://cdn.cypress.io/beta/binary/13.13.1/darwin-arm64/fix/webpack-batteries-included-for-yarn-pnp-09f2edc10c672111fec7ae4e56baea5c9bc524cc/cypress.zip

And run it locally:

However, when trying to run a test, I'm still getting:

I also had pulled down the repo, checked out the branch and ran a build, and manually put the contents into our .yarn/unplugged cache to make sure everything was the same version.

Is there anything I missed?

[AtofStryker]

There's a very good chance I'm doing something wrong here, but I was able to pull down this version of the binary:

https://cdn.cypress.io/beta/binary/13.13.1/darwin-arm64/fix/webpack-batteries-included-for-yarn-pnp-09f2edc10c672111fec7ae4e56baea5c9bc524cc/cypress.zip

And run it locally:

However, when trying to run a test, I'm still getting:

I also had pulled down the repo, checked out the branch and ran a build, and manually put the contents into our .yarn/unplugged cache to make sure everything was the same version.

Is there anything I missed?

I think that is the wrong binary. can you try npm install https://cdn.cypress.io/beta/npm/13.13.2/darwin-arm64/fix/webpack-batteries-included-for-yarn-pnp-5345c1b2bfad7f1b0b6949c569d63e3507a0873f/cypress.tgz?

[dclowd9901]

Installed and it looks like it works! Tests run fine, nothing in the logs. Really excited for this development!

[cypress-bot]

Released in 13.13.2.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v13.13.2, please open a new issue.