Why does Cypress not find my config module, even though it is definitely there?

202 Views Asked by At

I've installed Cypress into an existing Vue 3 project and just ran npx cypress open. That opened a window to set up component testing. Once I let it do its things creating the necessary files, I'm greeted with this error:

Your configFile is invalid: /usr/local/htdocs/SOME_PROJECT/cypress.config.ts

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

Error: Cannot find module 'file:///usr/local/htdocs/SOME_PROJECT/cypress.config.ts'
Require stack:
- /Users/bluefirex/Library/Caches/Cypress/13.3.1/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_require_async_child.js
- /Users/bluefirex/Library/Caches/Cypress/13.3.1/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/require_async_child.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
    at Function.Module._resolveFilename.sharedData.moduleResolveFilenameHook.installedValue [as _resolveFilename] (/Users/bluefirex/Library/Caches/Cypress/13.3.1/Cypress.app/Contents/Resources/app/node_modules/@cspotcode/source-map-support/source-map-support.js:811:30)
    at Function.Module._load (node:internal/modules/cjs/loader:922:27)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at require (node:internal/modules/cjs/helpers:121:18)
    at /Users/bluefirex/Library/Caches/Cypress/13.3.1/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_require_async_child.js:106:34
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async loadFile (/Users/bluefirex/Library/Caches/Cypress/13.3.1/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_require_async_child.js:106:14)
    at async EventEmitter.<anonymous> (/Users/bluefirex/Library/Caches/Cypress/13.3.1/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_require_async_child.js:116:32)

The file definitely exists and if I paste that file-URL into my browsers, I'll see the contents.

These are the contents of the config:

import { defineConfig } from "cypress";

export default defineConfig({
  component: {
    devServer: {
      framework: "vue",
      bundler: "vite"
    }
  }
});

TypeScript 5.2.2, Vue 3.3.4 and Vite 4.4.11 are installed (and in use). If I set up cypress/tsconfig.json as per their example project:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "node"],
    "jsx": "preserve"
  },
  "include": ["**/*.ts", "../cypress.d.ts"]
}

I still get absolutely no change.

What can I do here?

0

There are 0 best solutions below