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

wataruian commented 9 months ago

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

Install Yarn PnP version 3.5.0
Install cypress version ^13.3.0
Import @cypress/code-coverage/support in the support file
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 commented 9 months ago

@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 commented 9 months ago

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 commented 9 months ago

@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: https://github.com/cypress-io/cypress/issues/22747

wataruian commented 9 months ago

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

For now, I'll just go with v12.

wiegell commented 9 months ago

@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 commented 9 months ago

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 commented 3 months ago

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 commented 2 months ago

This issue has been closed due to inactivity.

Fanduel-Graham commented 1 month ago

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 commented 3 weeks ago

Possibly related to this change in 13.0.0? https://github.com/cypress-io/cypress/pull/27583

dclowd9901 commented 3 weeks ago

@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 commented 3 weeks ago

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 commented 1 week ago

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 commented 1 week ago

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 commented 1 week ago

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 commented 1 week ago

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 https://github.com/webpack/webpack/issues/18586.

AtofStryker commented 1 day ago

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 commented 1 day ago

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 commented 15 hours ago

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 commented 14 hours ago

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?

cypress-io / cypress