Yarn Modern Plug'n'Play (PnP) TypeScript E2E scaffolds as JavaScript

[MikeMcC399]

Current behavior

The Cypress scaffolding process sets up a TypeScript E2E project using JavaScript. The project consists of Yarn Modern 4.x and TypeScript 5.x dependencies, with Yarn configured using the default nodeLinker setting of pnp (Plug'n'Play).

Scaffolding detection is incompatible with Yarn Modern Plug'n'Play (PnP).

Desired behavior

Cypress should detect TypeScript if installed, whatever Yarn Modern nodeLinker is set to.

Test code to reproduce

cd $(mktemp -d)
git init
corepack enable yarn
corepack use yarn@latest
yarn init -y
yarn add cypress typescript -D
yarn cypress open --e2e --browser electron

Note that all configuration files have a js (JavaScript) extension, not a ts (TypeScript) extension.

Now change to nodeLinker node-modules and repeat:

rm -rf cypress cypress.config.js
yarn config set nodeLinker node-modules
yarn install
yarn cypress open --e2e --browser electron

Now TypeScript is detected and Cypress configuration files have a ts extension.

Cypress Version

14.1.0

Node version

v22.14.0 LTS

Operating System

Ubuntu 24.04.2 LTS

Debug Logs

export DEBUG=cypress:scaffold-config:frameworks

  cypress:scaffold-config:frameworks detecting typescript in /tmp/tmp.umKlRs9awY +0ms
  cypress:scaffold-config:frameworks error when detecting typescript: unable to resolve package file +0ms

Other

This may be a feature request instead of a bug. In case of it being a feature request, the documentation should be changed to indicate non-support of this configuration.

Related to

• Support Yarn Modern Plug'n'Play (PnP) for CT #30011
• Allow choice between JavaScript and TypeScript for E2E scaffolding #27621

[jennifer-shehane]

Logic is here essentially: https://github.com/cypress-io/cypress/blob/develop/packages/scaffold-config/src/detect.ts#L85 You could turn on DEBUG logs and see which logic we're currently following through here since the debug logs should express this.

[MikeMcC399]

@jennifer-shehane

Thanks for linking to the module where the error occurs!

cypress/packages/scaffold-config/src/detect.ts

Lines 170 to 180 in 760f600

	// If we can't find an installed TypeScript, there's no way we can assume the project is using TypeScript,
	// because it won't work on the next step of installation anyway
	try {
	const typescriptFile = require.resolve('typescript', { paths: [projectRoot] })
	debug('Resolved typescript from %s', typescriptFile)
	} catch {
	debug('No typescript installed - using js')
	return 'js'
	}

Using the DEBUG setting for this module doesn't really reveal any more information:

export DEBUG=cypress:scaffold-config:detect

yarn cypress open --e2e --browser electron
[4025:0212/164652.719865:ERROR:node_bindings.cc(379)] Most NODE_OPTIONs are not supported in packaged apps. See documentation for more details.
[4025:0212/164652.719952:ERROR:node_bindings.cc(379)] Most NODE_OPTIONs are not supported in packaged apps. See documentation for more details.
[4025:0212/164652.719958:ERROR:node_bindings.cc(379)] Most NODE_OPTIONs are not supported in packaged apps. See documentation for more details.
[4025:0212/164652.719962:ERROR:node_bindings.cc(379)] Most NODE_OPTIONs are not supported in packaged apps. See documentation for more details.

DevTools listening on ws://127.0.0.1:41817/devtools/browser/ad34c8fa-0596-4f07-91fe-134675fa2509
  cypress:scaffold-config:detect Checking for default Cypress config file +0ms
  cypress:scaffold-config:detect No typescript installed - using js +2ms
[4025:0212/164657.751541:ERROR:atom_cache.cc(229)] Add _NET_WM_WINDOW_TYPE_INDEX to kAtomsToCache
  cypress:scaffold-config:detect Checking for default Cypress config file +6s
  cypress:scaffold-config:detect Detected cypress.config.js - using JS +0ms

So it seems that require.resolve() is not working in this context for a Yarn PnP setup.

I did try to check this with a simple JS one-liner

test-ts.js

console.log(require.resolve('typescript'))

node test-ts.js

fails

Error: Cannot find module 'typescript'

yarn node test-ts.js

succeeds with:

$ yarn node test-ts.js
/home/mike/.yarn/berry/cache/typescript-patch-6da68bae26-10c0.zip/node_modules/typescript/lib/typescript.js

I'm afraid I'm out of my depth to go into this further. Sorry!

The original steps are reproducible, so I leave it to you to decide if the issue should be actioned.

[MikeMcC399]

• This is related to the discussion in Cypress and cypress-multi-reporters Yarn 2 PNP support #18922 and Dependencies are not detected during onboarding when using Yarn 3 #25960 about Cypress being Yarn pnp-aware
• Also Cannot consume ES module based cypress config when using Yarn 3  #22747

It may require some help from the Yarn Modern maintainers.

[MikeMcC399]

I found a hint in an old Cypress issue regarding pnp. I couldn't find pnp.setup() on the Yarn docs website though.

This detects the installation of typescript in a Yarn PnP or non-PnP environment and works when called directly as:

node test-ts.js

test-ts.js

try {
  const pnp = require('./.pnp.cjs')
  pnp.setup()
  console.log('Yarn PnP is enabled')
}
catch {
  console.log('Yarn PnP not found')
}

try {
  const typescriptFile = require.resolve('typescript')
  console.log('Resolved typescript from %s', typescriptFile)
} catch {
  console.log('No typescript installed')
}

This could be the basis for a feature request. I think it goes beyond a simple bug resolution.

Note that this only demonstrates that the current https://github.com/cypress-io/cypress/blob/develop/packages/scaffold-config/src/detect.ts is not coded to deal with Yarn PnP. It shows one way of plugging the gap, however the code above cannot be put directly into Cypress. It only works inside a repo which is already configured with Yarn PnP.