Cannot consume ES module based cypress config when using Yarn 3

lmiller1990 commented 2 years ago

Current behavior

Does not work correctly with cypress.config.ts containing ES module syntax when using Yarn 3 (does not create node_modules). I get an error and cannot proceed.

I think the problem is we try to resolve your TS install from projectRoot but new versions of yarn install modules in some other place that isn't in <project>/node_modules.

There's a lot of information in this issue, and related ones - before working on this, spend a bit of time reading and understanding the issue. It looks like it is primarily related to Plug n Play feature.

Note: many users are excited for this fix - if you are working it, please build a pre-release binary and share it here, so users can test it out.

Test code to reproduce

https://github.com/lmiller1990/yarn-3-issue-ts

clone
make sure you get 3.x when you do yarn --version
install
open cypress CT

Cypress Version

10.3.0+

Other

Created from https://github.com/cypress-io/cypress/issues/22071#issuecomment-1180554866

lmiller1990 commented 1 year ago

Hi! I'm not working on Cypress anymore, but I can do my best to point you in the right direction.

Get the project running locally. Have you done this?
Once you do, yarn dev at the root to open "global" mode.
Pick a Yarn 3 project, and follow the errors...

The issue I got stuck on was either the symlinks for things like @packages/config wouldn't resolve for Yarn 3, or it might have been something else... I think it may even be impossible to solve, since Cypress is an Electron app and Yarn 3 isn't really designed to work with CLI tools that launch Electron apps.

wiegell commented 1 year ago

I actually think i got something working yesterday, will try and make a PR tomorrow, thanks for the advice anyway and gl with the new job!

lmiller1990 commented 1 year ago

Sure, happy to give your code a test and review if you need it.

wiegell commented 1 year ago

My progress so far:

To read the config.ts alone seems to be isolated to a single addition of the pnp node api: https://github.com/cypress-io/cypress/pull/28134/files#r1370879639

But i have run into many other problems when trying to serve an angular app via the webpack-dev-server under pnp. See the error here: https://github.com/cypress-io/cypress/pull/28134/files#r1370888179

I mostly run this command when trying to debug and then run the yarn-v3.1.1-pnp e2e test:

cd npm/webpack-dev-server && yarn build && cd ../.. && UPDATE_LOCK_FILE=1 DEBUG=cypress:lifecycle:ProjectConfigIpc,cypress:lifecycle:ProjectConfigManager,cypress:lifecycle:child:run_require_async_child:*,cypress:webpack-dev-server:angularHandler yarn workspace @packages/launchpad cypress:open

I have also tried experimenting with "type": "module", but that just opens up another box of errors...

Any general advice or thoughts are welcome @lmiller1990. It took half the day to just be able to navigate around the project - it's quite a beast :) I have some time again tomorrow to look into this.

MikeMcC399 commented 1 year ago

It probably doesn't make any difference here, but the stable version of Yarn Modern is now v4 instead of v3 see https://yarnpkg.com/blog/release/4.0.

vire commented 1 year ago

It probably doesn't make any difference here, but the stable version of Yarn Modern is now v4 instead of v3 see https://yarnpkg.com/blog/release/4.0.

I've tried weith yarn4, cypress@13 has an issue with resolving files fron node_modules, cypress@12.17.3 has the following issue

require$$0.isBuiltin is not a function
TypeError: require$$0.isBuiltin is not a function
    at Function._resolveFilename (/Users/project/.pnp.cjs:86123:20)
    at Module._load (node:internal/modules/cjs/loader:785:27)
    at c._load (node:electron/js2c/asar_bundle:5:13339)
    at Function.<anonymous> (evalmachine.<anonymous>:1:751514)
    at i._load (<embedded>:4574:29304)
    at Function._load (/Users/project/.pnp.cjs:86086:31)
    at Module.require (node:internal/modules/cjs/loader:1012:19)
    at i (/Users/vire/Library/Caches/Cypress/12.17.3/Cypress.app/Contents/Resources/app/index.js:1:2232)
    at customRequire (<embedded>:4633:1067438)
    at a (<embedded>:3108:259186)
    at q (<embedded>:3108:263120)
    at Object.A (<embedded>:3108:262786)
    at Object.INVALID_REPORTER_NAME (<embedded>:3567:107)
    at x (<embedded>:4105:226)
    at Object.w (<embedded>:4105:736)
    at C.initializeReporter (<embedded>:4626:388113)
    at C.startWebsockets (<embedded>:4626:388339)
    at C.open (<embedded>:4626:386668)
    at async v.create (<embedded>:4626:399192)
    at async O (<embedded>:4626:476208)
    at async W (<embedded>:4626:489449)

With yarn@3.6.4 no issues

vire commented 1 year ago

☝️ I have a NX17 + yarn4 + cypress3 repro https://github.com/vire/nx-17-yarn4-cypress13-repro

just git clone, run yarn, and then yarn nx run webapp-e2e:e2e

what you get is

Error: Webpack Compilation Error
Module not found: Error: Can't resolve 'uuid' in '/Users/vire/nx-17-yarn4-cypress13-repro/test-helpers/src/lib'

elizww commented 11 months ago

☝️ I have a NX17 + yarn4 + cypress3 repro https://github.com/vire/nx-17-yarn4-cypress13-repro

just git clone, run yarn, and then yarn nx run webapp-e2e:e2e

what you get is
Error: Webpack Compilation Error
Module not found: Error: Can't resolve 'uuid' in '/Users/vire/nx-17-yarn4-cypress13-repro/test-helpers/src/lib'

Same for me (different modules, failed to find react and ramda)

NX 17, Cypress 13 with yarn 3.6.3

MikeMcC399 commented 11 months ago

@elizww

If you are using nodeLinker: pnp mode like @vire you may have more success if you convert to Yarn Modern nodeLinker: node-modules (also used by Yarn Classic) as a workaround.
Cypress has multiple unresolved issues using Yarn Modern Plug'n'Play, especially for Component Testing, where it does not work at all. (See https://github.com/cypress-io/cypress-documentation/issues/5394.)

slikts commented 11 months ago

@MikeMcC399 That's not a workaround, that's just not using Yarn PnP at all.

MikeMcC399 commented 11 months ago

@slikts

That's not a workaround, that's just not using Yarn PnP at all.

Sorry if the suggestion was not helpful to you. According to other posts I have seen from @lmiller1990 , he has not been working for Cypress.io for several months now. I can't see any feedback in the issue from anybody else in the Cypress.io organization, so I don't know if there are plans to fix the Yarn Plug'n'Play support in Cypress.

If Yarn Classic projects are migrated to Yarn Modern they retain node-modules as nodeLinker parameter. Newly created Yarn Modern projects take pnp by default.

If you are using Yarn Modern and you are tied to using pnp by policy or for technical reasons, then I don't know of a workaround. My suggestion was only for those who might have the flexibility to use node-modules.

slikts commented 11 months ago

Again, the issue is not with anyone's flexibility, but with Cypress not supporting a Yarn feature that people go through the trouble of adopting because it's useful.

MikeMcC399 commented 11 months ago

@slikts

Again, the issue is not with anyone's flexibility, but with Cypress not supporting a Yarn feature that people go through the trouble of adopting because it's useful.

I am also hoping that the Cypress.io team will fix this and other issues relating to Yarn Plug'n'Play!

jinder commented 1 month ago

Does the Cypress team have a plan to fix this? This issue has been open for years.

cypress-io / cypress