Upgrade to cypress 10 for typescript project broken (from 9.6)

[josh803316]

Current behavior

As outlined in this issue that was closed prematurely:
#21997

cc @lmiller1990

When I upgrade our existing typescript project it fails with various typescript errors (see the issue listed above). I have created a sample repo that reproduces the issues.

Desired behavior

Smooth upgrade and conversion of support scripts, plugins and specs.

Test code to reproduce

https://github.com/sketchy/cypress10-upgrade-issue
Simply close the repo, update Cypress to 10, follow the upgrade UI process and see the errors.

Cypress Version

10.0.2

Other

Sample repro to reproduce: https://github.com/sketchy/cypress10-upgrade-issue

[spiffytech]

I'm also still getting upgrade errors on 10.0.2. I had to remove the plugin file property from my cypress.json in order for the migrator to start up. After migration, Cypress refuses to start, saying:

Your configFile is invalid: /home/.../cypress.config.ts
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts"

[lmiller1990]

Thanks, I am looking into this now.

[lmiller1990]

Thanks, to clarify I was able to reproduce. I am on Node.js 16 and windows. I also reproduced on macOS.

[spiffytech]

It's happening for me with Node 18 on Linux.

[lmiller1990]

Edit: see this comment, I think this entire error message was a red herring.

Initially, what seemed to be happening is we hit this line - return await import(pathToFileURL(file).href). In this case we are trying to import a ts file and Node is defaulting to it's native ESM loader, which obviously doesn't work.

On closer inspection, this makes no sense in the first place. The entire logic for loading the config is here. Basically:

1. Try loading the configFile
2. Catch the "ERR_REQUIRE_ESM" error if we hit one
3. Check if esbuild is installed
   3a. Yes: use it
4. Use node's dynamic import to import the configFile

In your case, we should be just doing (1) since you are using TS - we can just use your local typescript in combination with the ts-node shipped in Cypress. That would mean we return early here.

What's actually happening, outlined here, is you've got a cypress/index.js file (which is unused?) containing ESM import code. This was messing with things, and made Cypress think you were using native ESM (which you are not) and skipping to step 4, attempting to import what is expected to be an ESM file (but it was actually .ts, thus the error).

Removing the unused cypress/index.js fixed it (what is this for?). See my post below for exact what was going on.

[lmiller1990]

As part of this I found another potential issue: we are trying to use esbuild for ESM, eg .mjs and "type": "module"`, but it's not set up correctly, see #22074.

[lmiller1990]

@josh803316 I found I could just do rm cypress/index.js and your project works just fine. Can you give this a try? I think what's happening is, somehow, when we do import { defineConfig } from 'cypress', it ends up resolving the contents of cypress/index.js instead of the node_modules/cypress (!!!).

You actually said this here I'm sorry I missed it. Clearly require.resolve('cypress') should not be returning /Users/josh/git/core-web/cypress/index.ts - that's not where Cypress is installed.

What is this file supposed to be? Plugins go in cypress/plugins/index.js. There's no such functionality associated with cypress/index.js.

Either way, this also explains how you ran into defineConfig is not a function (here) - it was expecting that file to export a defineConfig, which is was not.

I think this should solve your problem?

[lmiller1990]

@spiffytech can you share a minimal repo, or at least some basic info about your project? Although you hit the same problem, it might be due to a different reason.

[maksim-romanov]

It's happening for me with Node 18 on MacOs.

i don't have a cypress/index.ts file

[lmiller1990]

@maksim-romanov Hi, thanks for chiming in. Can you provide a minimal repository with the bug? Repo would be ideal - just delete anything that isn't directly related to Cypress. Or if you cannot, your cypress.config.js, cypress/plugins/index.js, package.json etc? That will help with debugging. 🙏