Initializing Cypress v10 on a "type": "module" project with TypeScript results in an `[ERR_UNKNOWN_FILE_EXTENSION]` error

Current behavior

Initializing Cypress v10 on a new Next.js + TypeScript project results in an [ERR_UNKNOWN_FILE_EXTENSION] error.

As far as I can tell, this issue doesn’t appear to be:

• Specific to the OS
• Specific to the contents of the package.json dependencies
• Specific to the contents of the tsconfig.json file

I tried changing all 3 but it didn’t appear to have an impact, I still get the [ERR_UNKNOWN_FILE_EXTENSION] error.

Desired behavior

Set up E2E testing in a TypeScript project in a way where this error doesn’t occur.

Test code to reproduce

1. npx create-next-app@latest foobar --ts
2. Add { "type": "module" } to the package.json
3. Change next.config.js to use ESM (just change module.exports to export default)
4. npm install cypress@10.0.2
5. npx cypress open
6. Choose “E2E Testing”
7. Scroll down, click “Continue”
8. Error!

Cypress Version

v10.0.2

Other

Originally I had this issue:

Error [ERR_REQUIRE_ESM]: require() of ES Module cypress.config.js

After the release of 10.0.2, I have this issue:

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for cypress.config.ts

---

This issue is closely related to this issue, but I’m adding Cypress to a new project rather than doing an upgrade.

[karlhorky]

@lmiller1990 hm, just upgraded to 10.1.0, which apparently has the ESM fix, but still getting the extension error when trying to import code which uses fully-specified imports in TS:

Your configFile is invalid: /home/runner/work/package/cypress.config.ts
It threw an error when required, check the stack trace below:
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /home/runner/work/package/cypress.config.ts
    at new NodeError (node:internal/errors:371:5)
    at Object.file: (node:internal/modules/esm/get_format:72:15)
    at defaultGetFormat (node:internal/modules/esm/get_format:85:38)
    at defaultLoad (node:internal/modules/esm/load:13:42)
    at ESMLoader.load (node:internal/modules/esm/loader:303:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:230:58)
    at new ModuleJob (node:internal/modules/esm/module_job:63:26)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:244:11)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async loadFile (/home/runner/.cache/Cypress/10.1.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_require_async_child.js:106:14)
    at async EventEmitter.<anonymous> (/home/runner/.cache/Cypress/10.1.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_require_async_child.js:116:32)

cypress.config.ts (excerpt)

import { defineConfig } from 'cypress';
import * as users from '../database/queries/users';

export default defineConfig({
  e2e: {
    setupNodeEvents(on) {
      on('task', {
        async deleteUserByEmail(email: string) {
          return (await users.deleteUserByEmail(email)) || null;
        },
      });
    },
  },
});

database/queries/users.ts (excerpt)

import { sql } from '../util/connect.js';

export async function deleteUserByEmail(email: string) {
  if (!email) return undefined;

  const [user] = await sql<[User | undefined]>`
    DELETE FROM
      users
    WHERE
      email = ${email}
    RETURNING *
  `;
  return user;
}

I’m thinking ts-node is still not configured properly for this first line in database/queries/users.ts (fully-specified import path with TypeScript).

Or should I be using fully-specified paths also in cypress.config.ts? I’ll give this a shot too…

Maybe this issue should be reopened?

[lmiller1990]

Hi @Abcmsaj! This is about to go green on CI: https://github.com/cypress-io/cypress/pull/22118

We will do a patch release, like in the next day or two, and it should be good 👌 please wait a bit!