Yarn 3 + cypress.config.ts does not work

[lmiller1990]

Ref: #22747 -> #22747 (comment)

If you are using Yarn 3 with TypeScript and have a cypress.config.ts, it will error when opening Cypress, no matter what. You cannot work around the issue. The only fix would be to use js or mjs extensions. There's an example here: #25959

Repro: yarn3.zip

Ideally, we should correctly consume the cypress.config.ts using the strategy we use for any package manager other than Yarn 3, which seems to work great. Based on some research, this may not be possible (or maybe it is?) using our current strategy, which uses loader API for ESM and require API for CJS. I suspect the CJS might be easier to work out.

• type: module does --loader

  cypress/packages/data-context/src/data/ProjectConfigIpc.ts

  Line 292 in 0cdd8d1

  const tsNodeEsmLoader = `--experimental-specifier-resolution=node --loader ${tsNodeEsm}`

• commonjs does --require

  cypress/packages/data-context/src/data/ProjectConfigIpc.ts

  Line 306 in 0cdd8d1

  const tsNodeLoader = `--require "${tsNode}"`

Neither works with TS and Yarn 3.

May be relevant: yarnpkg/berry#4044

[nemonemi]

@lmiller1990 have you solved it?

[lmiller1990]

I don't think so, but there are work arounds. Those don't work for you?

[nspire909]

I got this to work without changing my cypress.config.ts by using ts-import.

yarn install ts-import@^4.0.0-beta.10

I created a cypress.config.js with the following contents:

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { loadSync, LoadMode } = require('ts-import');

module.exports = loadSync('./cypress.config.ts', { mode: LoadMode.Compile, useCache: false });

And then updated cypressConfig to point to cypress.config.js instead.

Note: useCache: false doesn't seem to work and it still writes files to disk that will need to be gitignored. Also the cache seems to always be used & changed code won't get recompiled, which was initially causing me issues. Make sure to delete the cache when making changes to cypress.config.ts or anything it may import.

I doubt using ts-import is the way to go to fix this problem internally, especially given the weird caching behavior. But at least allowed me to migrate to Yarn 3 PnP w/o losing TS support in my config files.

[nemonemi]

After a couple of months of using the Yarn PnP actively, I've had several issues that made it not worth our while and reverted back to the node-modules mode.
Some of them were VScode support-related issues, and pipeline failing and cutting out the output, so you cannot debug it, all the possible debugging output options were turned on but to no avail.

I hope you have a better and productive time with it.

[cypress-app-bot]

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.