Cypress Vue component test crashes on import Ref type (does not provide an export named 'Ref')

Question

I wrote a Cypress component test that simply mounts my component and asserts it exists. The component itself imports Vue's Ref type and is also defined as a TypeScript component.

When running the test, Cypress crashes on the following error:

The requested module '/__cypress/src/node_modules/.vite/deps/vue.js?v=861dc0d7' does not provide an export named 'Ref'

I've already updated my Cypress tsconfig.json's "types" with vue, but haven't found any further direction on how to solve this issue.

tsconfig.json
---
{

  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "vue", "node"],
    "baseUrl": "./",
    "allowJs": true,
    "paths": {
      "~": ["."]
    },
  },
  "include": ["**/*.ts", "**/*.js"]
}

My Cypress config:

cypress.config.js
---
const { defineConfig } = require("cypress")

module.exports = defineConfig({
    component: {
        supportFile: "cypress/support/component.ts",
        devServer: {
            framework: "vue",
            bundler: "vite",
        },
    },
})

This is how my component is written:

MyComponent.vue
---
<template>
    <div class="my-component">
        {{ counter }}
    </div>
</template>

<script setup lang="ts">
import type { Ref } from "vue"

const counter: Ref<number> = ref(1)
</script>

And the test goes as following:

MyComponent.cy.ts
---
import MyComponent from "./MyComponent.vue"

beforeEach(() => {
    cy.mount(MyComponent)
})

it("Test My Component", () => {
    cy.get(".my-component").should("exist")
})

Answer 1

Found the origin of the issue. It seems that in my tsconfig.json file, I was extending from nuxt' tsconfig ("extends": "./.nuxt/tsconfig.json")

It seems that simply removing this line solved the issue.

Answer 2

You have cypress.config.js in a Typescript project, which makes me think that file is indicating to Cypress not to use Typescript (import type {Ref} is not valid syntax in javascript).

If I use your component in a running Typescript project that has cypress.config.ts and the corresponding changes, it recognizes that type import.

(Note I have older version of Vue)

import { defineConfig } from "cypress";

export default defineConfig({
  component: {
    devServer: {
      framework: "vue-cli",
      bundler: "webpack",
    },
  },
})

You also need an import for concrete ref in the component

<script setup lang="ts">
import type { Ref } from "vue"
import { ref } from "vue"            <-- add this 

const counter: Ref<number> = ref(1) 
</script>