Your configFile is invalid [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts"

[wakaztahir]

Current behavior

package.json

{
    "name": "@something/editor",
    "version": "0.0.1",
    "description": "a library",
    "module": "index.js",
    "types": "index.d.ts",
    "scripts": {
        "browser-tests": "cypress run --browser chrome",
    },
    "devDependencies": {
        "@babel/core": "^7.22.9",
        "@rollup/plugin-babel": "^6.0.3",
        "@rollup/plugin-commonjs": "^25.0.3",
        "@rollup/plugin-node-resolve": "^15.1.0",
        "@rollup/plugin-terser": "^0.4.3",
        "@rollup/plugin-typescript": "^11.1.2",
        "create-ts-index": "^1.14.0",
        "cypress": "^12.17.2",
        "rollup": "^3.26.3",
        "rollup-plugin-multi-input": "^1.4.1",
        "rollup-plugin-node-externals": "^6.1.1",
        "rollup-plugin-summary": "^2.0.0",
        "ts-node": "^10.9.1",
        "tsc-watch": "^6.0.4",
        "typescript": "^5.1.6",
        "webpack": "^5.88.2"
    },
    "dependencies": {
        "@babel/plugin-transform-runtime": "^7.22.9"
    }
}

cypress.config.ts

import {defineConfig} from "cypress";

export default defineConfig({
    e2e: {
        setupNodeEvents(on, config) {
            // implement node event listeners here
        },
        specPattern: "tests/*.{js,jsx,ts,tsx}",
        supportFile: false
    },
    video: false,
    screenshotOnRunFailure : false
});

error

Your configFile is invalid: D:\Programming\Web\RtEdit\packages\lib\cypress.config.ts

It threw an error when required, check the stack trace below:

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for D:\Programming\Web\RtEdit\packages\lib\cypress.config.ts
    at new NodeError (node:internal/errors:393:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:79:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:121:38)
    at defaultLoad (node:internal/modules/esm/load:81:20)
    at nextLoad (node:internal/modules/esm/loader:163:28)
    at ESMLoader.load (node:internal/modules/esm/loader:605:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22)
    at new ModuleJob (node:internal/modules/esm/module_job:63:26)
    at #createModuleJob (node:internal/modules/esm/loader:480:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:434:34)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:438:15)
    at async loadFile (C:\Users\wakaz\AppData\Local\Cypress\Cache\12.17.3\Cypress\resources\app\node_modules\@packages\server\lib\plugins\child\run_require_async_child.js:106:14)    
    at async EventEmitter.<anonymous> (C:\Users\wakaz\AppData\Local\Cypress\Cache\12.17.3\Cypress\resources\app\node_modules\@packages\server\lib\plugins\child\run_require_async_child.js:116:32)

tsconfig.json

{
  "extends": [
    "./tsconfig.build.json",
    "./tsconfig.tests.json"
  ]
}

tsconfig.build.json

{
    "extends": "../../tsconfig.base.json",
    "compilerOptions": {
        "noEmitOnError": true,
        "moduleResolution": "NodeNext",
    },
    "include": [
        "src"
    ],
    "exclude": [
        "dist"
    ]
}

tsconfig.tests.json

{
    "extends": "../../tsconfig.base.json",
    "compilerOptions": {
        "noEmitOnError": true,
        "types": ["cypress"],
        "moduleResolution": "NodeNext",
    },
    "include": [
        "src",
        "tests",
        "cypress.config.ts"
    ],
    "exclude": [
        "dist"
    ]
}

Desired behavior

Cypress should run all the tests since typescript is installed, Its a monorepo, The issue occurs even after yarn install after deleting the yarn lock file, I've tried everything in other issues but issue doesn't seem to resolve, however changing the type field in package.json does change the output of the error

Test code to reproduce

Currenlty the project is huge, Requires a bit of work to reproduce

Cypress Version

v12.17.2

Node version

v18.12.1

Operating System

Windows 11

Debug Logs

No response

Other

No response

[AStoker]

Adding my voice to the group. Experiencing this with latest version of Cypress (^13.0.0).
Our setup is using NX to create an single Angular application. We then set up Yarn PnP, and then ran the cypress command to configure component tests (yarn nx g @nx/angular:cypress-component-configuration --project=my-project --build-target=my-projectr:build).

We then get this

[50088:0921/113920.188:ERROR:node_bindings.cc(300)] Most NODE_OPTIONs are not supported in packaged apps. See documentation for more details.

Followed by this

DevTools listening on ws://127.0.0.1:53068/devtools/browser/60158d19-8ee0-4092-bc24-6df5ffca7643
Your configFile is invalid: C:\Projects\***\cypress.config.ts

It threw an error when required, check the stack trace below:

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for C:\Projects\***\cypress.config.ts
    at new NodeError (node:internal/errors:405:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:99:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:142:36)
    at defaultLoad (node:internal/modules/esm/load:91:20)
    at nextLoad (node:internal/modules/esm/hooks:733:28)
    at load$1 (file:///C:/***/.pnp.loader.mjs:1456:12)
    at nextLoad (node:internal/modules/esm/hooks:733:28)
    at Hooks.load (node:internal/modules/esm/hooks:377:26)
    at MessagePort.handleMessage (node:internal/modules/esm/worker:168:24)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:778:20)

[AStoker]

I've created a very basic repro repo: https://github.com/AStoker/nx-angular-yarnpnp-cypress-bug

Steps:

• npx create-nx-workspace@latest
• yarn set version stable
• yarn config set nodeLinker pnp
• yarn add -D @angular-devkit/architect (looks like this is a different problem with cypress where it's just not being included correctly)
• yarn install
• yarn nx e2e e2e (observe the error)

[MikeMcC399]

@AStoker

I see that your issue is reproducible using Yarn Modern Plug'n'Play and if the repo is switched to nodeLinker: node-modules the problem does not occur. Cypress does not work at all with Yarn Modern Plug'n'Play and component testing. See cypress-io/cypress-documentation#5394. It seems that there are also challenges here with E2E type testing.

@wakaztahir

Which version of Yarn are you using and if it is Yarn Modern, which nodeLinker mode do you use?

[wakaztahir]

@MikeMcC399 I was using yarn 1.5.1, I've upgraded to Yarn Modern and I also started using JS file instead as a workaround

[MikeMcC399]

@wakaztahir

I was using yarn 1.5.1, I've upgraded to Yarn Modern and I also started using JS file instead as a workaround

Thanks for the feedback and update! Yarn 1.5.1 is quite an old version of Yarn Classic, which is currently at version 1.22.19. I wonder if that also contributed to the problem with .ts? I guess it's not necessary to answer that question though, since @AStoker already provided a full reproducible example of the issue for the Cypress team to look at.

[wakaztahir]

@MikeMcC399 as long as its working with the latest version, I don't have a problem

[AStoker]

@MikeMcC399 , is that something that is on the roadmap to work on?

[MikeMcC399]

@AStoker

is that something that is on the roadmap to work on?

I'm not sure exactly what you are referring to, however I should say that I'm just a community member, not a representative of Cypress.

This issue has been reviewed but not otherwise worked on by a member of the Cypress team. Since it has not been rejected nor has it been given the label of a feature request then I would understand it as a candidate for further triaging.

[wiegell]

i think this is a duplicate of #22747
(which i'm eagerly awaiting)

[aleciavogel]

Having this issue and the only way I was able to resolve it was by downgrading to TypeScript v5.2.2.

I'm using Cypress v13.6.0 and Yarn 1.22.19.

[erikshestopal]

Having this issue and the only way I was able to resolve it was by downgrading to TypeScript v5.2.2.

I'm using Cypress v13.6.0 and Yarn 1.22.19.

This worked for me - sigh.

[sscaff1]

Having this issue and the only way I was able to resolve it was by downgrading to TypeScript v5.2.2.

I'm using Cypress v13.6.0 and Yarn 1.22.19.

This also worked for me. Typescript 5.3 or greater causes issues for some reason...

[klodoma]

https://yarnpkg.com/configuration/yarnrc#nodeLinker

In .yarnrc.yml

nodeLinker: node-modules

This solved my issue.
Using yarn v4.0.2 Cypress v13.6.0, Typescript 5.3.3 in a Vite + VueJS Setup.

[antitoxic]

Having this issue and the only way I was able to resolve it was by downgrading to TypeScript v5.2.2.

I'm using Cypress v13.6.0 and Yarn 1.22.19.

Same here. Does anybody know what specifically in TS 5.3 is breaking cypress functionality to read the config?