TypeError ... Unknown file extension ".ts" for cypress.config.ts

[jeansberg]

Hello!

I want to upgrade a Cypress setup from 5.6.0 to 10.3.1.
After upgrading the Cypress package, when I do 'cypress run' I always get the following error:

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for C:\repos\***\cypress.config.ts
    at new NodeError (node:internal/errors:372:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:76:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:118:38)
    at defaultLoad (node:internal/modules/esm/load:21:20)
    at ESMLoader.load (node:internal/modules/esm/loader:407:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:326:22)
    at new ModuleJob (node:internal/modules/esm/module_job:66:26)
    at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:345:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:304:34)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async loadFile (C:\*\AppData\Local\Cypress\Cache\10.3.1\Cypress\resources\app\node_modules\@packages\server\lib\plugins\child\run_require_async_child.js:106:14)
    at async EventEmitter.<anonymous> (C:\*\AppData\Local\Cypress\Cache\10.3.1\Cypress\resources\app\node_modules\@packages\server\lib\plugins\child\run_require_async_child.js:116:32)

Unfortunately I am not a JS developer normally, so I'm having a hard time troubleshooting this. I will try to attach the relevant config files without being too spammy.

Has anyone encountered this and been able to fix it?

cypress.config.ts

import { defineConfig } from "cypress";
export default defineConfig({
    viewportWidth: 1440,
    viewportHeight: 1000,
    fixturesFolder: "fixtures",
    screenshotsFolder: "screenshots",
    videosFolder: "videos",
    videoUploadOnPasses: false,
    defaultCommandTimeout: 10000,
    responseTimeout: 60000,
    requestTimeout: 10000,
    pageLoadTimeout: 90000,
    watchForFileChanges: false,
    e2e: {
        // We've imported your old cypress plugins here.
        // You may want to clean this up later by importing these.
        setupNodeEvents(on, config) {
            return require("./plugins.js")(on, config);
        },
        baseUrl: "http://localhost:1400",
        specPattern: "integration/**/*.cy.{js,jsx,ts,tsx}",
        supportFile: "support/index.ts",
    },
});

commands.ts

{
    "compilerOptions": {
        "strict": false,
        "baseUrl": "./node_modules",
        "target": "es5",
        "lib": ["es5", "dom"],
        "types": ["cypress", "@types/testing-library__cypress", "node"]
    },
    "include": ["**/*.ts", "plugins/index.js", "support/setup.js", "cypress.config.js"]
}

plugins/index.js

import cypressTypeScriptPreprocessor from "./cy-ts-preprocessor.js";
import { runQuery, runQueries } from "./mysqlTasks.js";

// ***********************************************************
// The plugins/index.js file can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************

// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)

export default (on) => {
    on("file:preprocessor", cypressTypeScriptPreprocessor);
    // `on` is used to hook into various events Cypress emits
    // `config` is the resolved Cypress config
    on("task", {
        "run-mysql-query"({ connectionString, query }) {
            return runQuery(connectionString, query);
        },
        "run-mysql-queries"({ connectionString, queries }) {
            return runQueries(connectionString, queries);
        },
    });
};

[stavares843]

hello! 👋

I saw this issue with the upgrade and I used cypress.config.js instead and all the other Cypress related files also with a .js file extension instead.

Our project is mostly Typescript but wasn't relevant to use .ts in this case.

[jeansberg]

Thank you. I started with changing the extension on the config file. Then I got some complaints from TypeScript and after fixing them I was able to start the tool. 👍

[whitespacecode]

Please reopen this discussion as converting to .js is not an option.

[stavares843]

there's other similar issue opened here

also in case that's helpful
cypress-io/cypress-docker-images#673
https://stackoverflow.com/questions/74274975/cypress-and-typescript-your-configfile-is-invalid-config-ts
https://glebbahmutov.com/blog/cypress-js-to-ts/