Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
brianjenkins94 opened this issue Jun 3, 2022 · 11 comments · Fixed by #22118
Assignees

Comments

@brianjenkins94
Copy link

brianjenkins94 commented Jun 3, 2022

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!

Screen Shot 2022-06-02 at 10 13 07 PM

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.

@ZachJW34
Copy link
Contributor

ZachJW34 commented Jun 3, 2022

@brianjenkins94 Thanks for opening the issue, seems like we have a few issues around esm and `"type": "module".

@lmiller1990 has been digging into this, see #22074. It explains the technical problems we are facing with ESM. I think we'll be able to knock out many of these similar issues at once.

@lmiller1990 lmiller1990 changed the title Initializing Cypress v10 on a new TypeScript project results in an [ERR_UNKNOWN_FILE_EXTENSION] error Initializing Cypress v10 on a "type": "module" project results in an [ERR_UNKNOWN_FILE_EXTENSION] error Jun 6, 2022
@lmiller1990 lmiller1990 changed the title Initializing Cypress v10 on a "type": "module" project results in an [ERR_UNKNOWN_FILE_EXTENSION] error Initializing Cypress v10 on a "type": "module" project with TypeScript results in an [ERR_UNKNOWN_FILE_EXTENSION] error Jun 6, 2022
@cypress-bot cypress-bot bot added stage: new issues stage: needs review The PR code is done & tested, needs review and removed stage: investigating Someone from Cypress is looking into this stage: needs review The PR code is done & tested, needs review stage: new issues labels Jun 6, 2022
@lmiller1990
Copy link
Contributor

I got your project to work locally with https://github.com/cypress-io/cypress/pull/22118/files and changing next.config.js to use ES syntax.

Once https://github.com/cypress-io/cypress/pull/22118/files lands, we should be good. I'm working on getting it green now.

@Abcmsaj
Copy link

Abcmsaj commented Jun 8, 2022

Hello - how's this looking? I had this working fine on our project yesterday on 10.0.2 - then updated to 10.0.3 and it also briefly worked - now I'm seeing the issue though. I probably updated Node or something in that time...

@lmiller1990
Copy link
Contributor

Hi @Abcmsaj! This is about to go green on CI: #22118

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

@brianjenkins94
Copy link
Author

Thanks for your work on this @lmiller1990 ! :)

@Abcmsaj
Copy link

Abcmsaj commented Jun 8, 2022

Yeah, fantastic! Thanks very much @lmiller1990

@karlhorky
Copy link
Contributor

karlhorky commented Jun 11, 2022

@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?

@karlhorky
Copy link
Contributor

Ok I tried changing my cypress.config.ts file by adding the fully-specified .js import path, as in the diff below:

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

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

This results in a new error, that it cannot find the file specified (although it should be able to resolve this file - .js is the correct extension to use with fully-specified ESM paths in TypeScript):

Your configFile is invalid: /home/runner/work/package/cypress.config.ts
It threw an error when required, check the stack trace below:
Error: Cannot find module '../database/queries/companies.js'
Require stack:
- /home/runner/work/package/cypress.config.ts
- /home/runner/.cache/Cypress/10.1.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_require_async_child.js
- /home/runner/.cache/Cypress/10.1.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/require_async_child.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._resolveFilename.sharedData.moduleResolveFilenameHook.installedValue [as _resolveFilename] (/home/runner/.cache/Cypress/10.1.0/Cypress/resources/app/node_modules/@cspotcode/source-map-support/source-map-support.js:679:30)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/home/runner/work/package/cypress.config.ts:2:1)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Module.m._compile (/home/runner/.cache/Cypress/10.1.0/Cypress/resources/app/node_modules/ts-node/src/index.ts:1455:23)
    at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Object.require.extensions.<computed> [as .ts] (/home/runner/.cache/Cypress/10.1.0/Cypress/resources/app/node_modules/ts-node/src/index.ts:1458:12)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at loadFile (/home/runner/.cache/Cypress/10.1.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_require_async_child.js:89:14)
    at 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:38)
    at EventEmitter.emit (node:events:390:28)
    at EventEmitter.emit (node:domain:475:12)
    at process.<anonymous> (/home/runner/.cache/Cypress/10.1.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/util.js:33:22)
    at process.emit (node:events:390:28)
    at process.emit (node:domain:475:12)
    at process.emit.sharedData.processEmitHook.installedValue [as emit] (/home/runner/.cache/Cypress/10.1.0/Cypress/resources/app/node_modules/@cspotcode/source-map-support/source-map-support.js:613:40)

@karlhorky
Copy link
Contributor

karlhorky commented Jun 11, 2022

Actually, I realize that I created an issue in the cypress-io/cypress repo a while back, with more information documenting this problem: TypeScript + Fully-Specified ESM import fails in cy.task (cypress-io/cypress#20580)

@karlhorky
Copy link
Contributor

karlhorky commented Jun 11, 2022

Oh, I didn't have "type": "module" in the package.json for this particular package 😵

Just tried this out, and fully-specified ESM imports work in TS now! 🎉🚀

I'll go ahead and close #20580 too!

@lmiller1990
Copy link
Contributor

Great to hear your project working with native ESM - the module system we all deserve and finally have. I too look forward to living the native ESM dream one day.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants