fix: correctly resolve dependencies for CT onboarding when using Yarn Plug n Play

packages/launchpad/cypress/e2e/project-setup.cy.ts

@@ -582,6 +582,18 @@ describe('Launchpad: Setup Project', () => {
       cy.findByDisplayValue('pnpm install -D react-scripts react-dom react')
     })
 
+    it('works with Yarn 3 Plug n Play', () => {
+      scaffoldAndOpenProject('yarn-v3.1.1-pnp')
+
+      cy.visitLaunchpad()
+
+      cy.get('[data-cy-testingtype="component"]').click()
+      cy.get('button').should('be.visible').contains('Vue.js 3(detected)')
+      cy.get('button').should('be.visible').contains('Vite(detected)')
+      cy.findByText('Next step').click()
+      cy.findByTestId('alert').contains(`You've successfully installed all required dependencies.`)
+    })
+
     it('makes the right command for npm', () => {
       scaffoldAndOpenProject('pristine-npm')
 

packages/scaffold-config/src/frameworks.ts

@@ -1,10 +1,10 @@
 import fs from 'fs-extra'
+import path from 'path'
 import * as dependencies from './dependencies'
 import componentIndexHtmlGenerator from './component-index-template'
 import debugLib from 'debug'
 import semver from 'semver'
 import { isThirdPartyDefinition } from './ct-detect-third-party'
-import resolvePackagePath from 'resolve-package-path'
 
 const debug = debugLib('cypress:scaffold-config:frameworks')
 
@@ -14,10 +14,42 @@ export type WizardBundler = typeof dependencies.WIZARD_BUNDLERS[number]
 
 export type CodeGenFramework = Cypress.ResolvedComponentFrameworkDefinition['codeGenFramework']
 
+let yarnPnpRegistrationPath: string | undefined
+
+async function readPackageJson (packageFilePath: string): Promise<PkgJson> {
+  if (yarnPnpRegistrationPath) {
+    // using Yarn PnP. You cannot `fs.readJson`, since the module is zipped.
+    // use require.resolve - The PnP runtime (.pnp.cjs) automatically patches Node's
+    // fs module to add support for accessing files inside Zip archives.
+    // @see https://yarnpkg.com/features/pnp#packages-are-stored-inside-zip-archives-how-can-i-access-their-files
+    return require(require.resolve(packageFilePath))
+  }
+
+  return await fs.readJson(packageFilePath)
+}
+
 export async function isDependencyInstalled (dependency: Cypress.CypressComponentDependency, projectPath: string): Promise<Cypress.DependencyToInstall> {
   try {
     debug('detecting %s in %s', dependency.package, projectPath)
 
+    // we only need to register this once, when the project check dependencies for the first time.
+    if (yarnPnpRegistrationPath !== projectPath) {
+      try {
+        const pnpapi = require(path.join(projectPath, '.pnp.cjs'))
+
+        pnpapi.setup()
+        yarnPnpRegistrationPath = projectPath
+      } catch (e) {
+        // not using Yarn PnP
+        yarnPnpRegistrationPath = undefined
+      }
+    }
+
+    // NOTE: this *must* be required **after** the call to `pnpapi.setup()`
+    // or the pnpapi module that is added at runtime by Yarn PnP will not be correctly used
+    // for module resolution.
+    const resolvePackagePath = require('resolve-package-path')
+
     const packageFilePath = resolvePackagePath(dependency.package, projectPath)
 
     if (!packageFilePath) {
@@ -30,7 +62,7 @@ export async function isDependencyInstalled (dependency: Cypress.CypressComponen
       }
     }
 
-    const pkg = await fs.readJson(packageFilePath) as PkgJson
+    const pkg = await readPackageJson(packageFilePath)
 
     debug('found package.json %o', pkg)
 

patches/resolve-package-path+4.0.3.patch

@@ -0,0 +1,14 @@
+diff --git a/node_modules/resolve-package-path/lib/index.js b/node_modules/resolve-package-path/lib/index.js
+index a1463f7..a3b5d3c 100644
+--- a/node_modules/resolve-package-path/lib/index.js
++++ b/node_modules/resolve-package-path/lib/index.js
+@@ -89,6 +89,9 @@ function resolvePackagePath(target, baseDir, _cache) {
+             // the custom `pnp` code here can be removed when yarn 1.13 is the
+             // current release. This is due to Yarn 1.13 and resolve interoperating
+             // together seamlessly.
++            if (!pnp) {
++                pnp = require(require.resolve('pnpapi', { paths: [baseDir] }))
++            }
+             pkgPath = pnp
+                 ? pnp.resolveToUnqualified(target + '/package.json', baseDir)
+                 : (0, resolve_package_path_1.default)(cache, target, baseDir);