fix: add yarn v2 pnp support to default webpack processor

[missing1984]

• Close Plugins file fails on lodash import after upgrade to 7.1.0 #16111
• Close Cypress and Yarn 2 PNP support #8008

User facing changelog

Add Yarn v2 pnp support to our default webpack processor.

Additional details

This MR addressed couple issues around yarn v2 pnp support.

• Fix typescript detection. Basically ported fix: Use require.resolve when yarn v2 is detected #15623 over
• Fix Plugins file fails on lodash import after upgrade to 7.1.0 #16111, bring back NODE_OPTIONS env variable in plugin child process so yarn can pick up pnp runtime
• Add pnp-webpack-plugin to @cypress/webpack-batteries-included-preprocessor so we can support pnp out of the box. Cypress and Yarn 2 PNP support #8008
• Add unit and e2e test case

How has the user experience changed?

Once this merged, Yarn v2 pnp should work with Cypress out of the box

PR Tasks

• Have tests been added/updated?
• Has the original issue or this PR been tagged with a release in ZenHub?
• Has a PR for user-facing changes been opened in cypress-documentation?
• Have API changes been updated in the type definitions?
• Have new configuration options been added to the cypress.schema.json?

[cypress-bot]

Thanks for taking the time to open a PR!

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
• Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

[missing1984]

hmm, looks like the failing CI is caused by network issue?

yarn run v1.22.10
$ node ../../scripts/run-ct-examples.js --examplesList=./examples.env
Running tests in /root/cypress/npm/vue
Running yarn install in project /root/cypress/npm/vue
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...

Can someone help to retry the job?

[missing1984]

@jennifer-shehane @flotwig since you're marked as reviewers.... anything else i can do to get this merge?

[flotwig]

@jennifer-shehane @flotwig since you're marked as reviewers.... anything else i can do to get this merge?

Nothing right now. We are working on getting 8.0 out the door right now, but this is a priority for me to get reviewed after 8.0 is out.

[kubijo]

Is there anything I can do locally to make the pnp API work until this gets released? Id like to try 8.0, but this blocks me

[flotwig]

There're 2 ways to make Cypress support yarn v2 natively (and close #8008)

1. Switch to use webpack5 from default webpack preprocessor which has built-in pnp support.

2. Add `pnp-webpack-plugin` to our `@cypress/webpack-batteries-included-preprocessor` once [Fix #32 try to use findPnpApi to locate pnpapi arcanis/pnp-webpack-plugin#37](https://github.com/arcanis/pnp-webpack-plugin/pull/37)

I can follow up on option 2

Upgrading the preprocessor to Webpack 5 would be a better solution long-term, but it would have to wait until Cypress 9 since it would be a breaking change. If you want to proceed with #2, that would be a good change to pull in for now that would be non-breaking.

Other than that, tested manually with a local yarn v2 project and yarn node now seems to properly set up NODE_OPTIONS for the plugins process again.

[missing1984]

Thanks. ping @arcanis any chance we can get arcanis/pnp-webpack-plugin#37 merged?

[missing1984]

Thanks @arcanis, arcanis/pnp-webpack-plugin#37 is merged and i am going to add it to our default webpack profile so we can support pnp natively.

[missing1984]

@flotwig @jennifer-shehane I've added pnp-webpack-plugin to our @cypress/webpack-batteries-included-preprocessor so we can support pnp natively and close #8008. MR title and description are updated as well.

Let me know if there's anything i should do.

[flotwig]

Looks good to me, @chrisbreiding can you take a quick look now that this is going to modify the behavior of the webpack preprocessor?

[flotwig]

@missing1984 Thank you for the contribution!