vitePreprocessor is undefined

[PindaPixel]

When running cypress I get the following: TypeError: (0 , cypress_vite_1.default) is not a function

// cypress.config.ts
import { defineConfig } from "cypress";
import vitePreprocessor from "cypress-vite";

export default defineConfig({
    e2e: {
        specPattern: "cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}",
        baseUrl: "http://localhost:4173",
        setupNodeEvents(on) {
            on("file:preprocessor", vitePreprocessor());
        },
    },
    component: {
        devServer: {
            framework: "vue",
            bundler: "vite",
        },
    },
});

tsconfig extends https://github.com/vuejs/tsconfig/blob/main/tsconfig.dom.json

// cypress/e2e/tsconfig.json
{
    "extends": "@vue/tsconfig/tsconfig.dom.json",
    "include": ["./**/*", "../support/**/*"],
    "compilerOptions": {
        "isolatedModules": false,
        "target": "es5",
        "module": "ESNext",
        "lib": ["es5", "dom"],
        "types": ["cypress", "node"],
        "esModuleInterop": true
    }
}

I also have a tsconfig.node.json at the root of the project (extends):

{
    "extends": "@tsconfig/node18/tsconfig.json",
    "include": [
        "vite.config.*",
        "cypress.config.*",
        "config/**/*.ts",
        "eslintrc.cjs"
    ],
    "compilerOptions": {
        "composite": true,
        "module": "ESNext",
        "moduleResolution": "Bundler",
        "types": ["node"]
    }
}

[PindaPixel]

Found the issue, Cypress seems to ignore references from my tsconfig.json:

{
    "files": [],
    "references": [
        {
            "path": "./tsconfig.node.json"
        },
        {
            "path": "./tsconfig.app.json"
        },
        {
            "path": "./tsconfig.vitest.json"
        }
    ],
}

In the end, I had to add "module": "ESNext" to the root tsconfig.json