Invalid Cypress config file when using Vite with `"type": "module"`

[joshdales]

Current Behavior

When a project has set "type": "module" in the package.json cypress fails to find its own config. I'm using vite as the bundler, might also happen with webpack but I haven't checked.

Running the e2e command you get the following error:

Your configFile is invalid: /path/to/project-e2e/cypress.config.ts

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

Error: Cannot find module 'file:///path/to/project-e2e/cypress.config.ts'

The application it's self runs fine, the cypress config is in a valid format, it's just Cypress that fails to start. I've tried this in another project without Nx that uses Vite and Cypress and it works fine 😢

Expected Behavior

Cypress starts and runs the tests.

GitHub Repo

https://github.com/joshdales/nx-invalid-cypress-config

Steps to Reproduce

After you have pulled the code and installed the dependancies you just need to run the e2e command npm run e2e (which is just nx run test-e2e:e2e)

Nx Report

Node   : 20.3.1
OS     : darwin-arm64
npm    : 9.6.7

nx                 : 16.4.0
@nx/js             : 16.4.0
@nx/linter         : 16.4.0
@nx/workspace      : 16.4.0
@nx/cypress        : 16.4.0
@nx/devkit         : 16.4.0
@nx/eslint-plugin  : 16.4.0
@nx/react          : 16.4.0
@nrwl/tao          : 16.4.0
@nx/vite           : 16.4.0
@nx/web            : 16.4.0
typescript         : 5.1.3

Failure Logs

> nx run test-e2e:e2e

  ➜  Local:   http://localhost:4200/
DevTools listening on ws://127.0.0.1:55590/devtools/browser/d3b4d4c3-6cbb-4b50-b9cc-3273a2119a25
Your configFile is invalid: /Users/joshdales/dev/nx-invalid-cypress-config/test-e2e/cypress.config.ts

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

Error: Cannot find module 'file:///Users/joshdales/dev/nx-invalid-cypress-config/test-e2e/cypress.config.ts'
Require stack:
- /Users/joshdales/Library/Caches/Cypress/12.15.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_require_async_child.js
- /Users/joshdales/Library/Caches/Cypress/12.15.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/require_async_child.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1072:15)
    at Function.Module._resolveFilename (/Users/joshdales/Library/Caches/Cypress/12.15.0/Cypress.app/Contents/Resources/app/node_modules/tsconfig-paths/lib/register.js:75:40)
    at Function.Module._resolveFilename.sharedData.moduleResolveFilenameHook.installedValue [as _resolveFilename] (/Users/joshdales/Library/Caches/Cypress/12.15.0/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:925:27)
    at Module.require (node:internal/modules/cjs/loader:1139:19)
    at require (node:internal/modules/helpers:121:18)
    at /Users/joshdales/Library/Caches/Cypress/12.15.0/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)

Operating System

• [X] macOS
• [ ] Linux
• [ ] Windows
• [ ] Other (Please specify)

Additional Information

No response

[barbados-clemens]

@joshdales do you have a cloneable repo I can take a look at for the non nx version you mentioned? curious why cypress is trying to require the package which is an issue since type:module declaring everything is esm so require() would probably be an issue.

[joshdales]

@barbados-clemens Yep sure, I just made one here: https://github.com/joshdales/cypress-with-module

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[joshdales]

Just updated the example repo and it seems like it's still an issue 😞

[leosvelperez]

hey @joshdales! I'm sorry you've been facing this issue for a while.

I took a deeper look, and it seems Cypress doesn't treat it as ESM because there's no package.json in the project root: https://github.com/cypress-io/cypress/blob/develop/packages/data-context/src/data/ProjectConfigIpc.ts#L274-L285. So, it tries to load the configuration as CommonJS. In the non-Nx repo you shared where it's working (https://github.com/joshdales/cypress-with-module), it's because the cypress.config.ts is at the root where there's a package.json. If you were to locate your cypress folder and cypress.config.ts file in a nested folder (e.g. test) and run npx cypress run --project foo you would see that it also fails.

I'll bring this issue to the Cypress team for potentially adding support to handle monorepos using a single package.json at the root.

As a workaround, you can add a minimal package.json file to the test-e2e project root:

{
  "name": "test-e2e",
  "version": "1.0.0",
  "type": "module"
}

I'm closing this since it's an issue on Cypress itself and a workaround is provided. If you still have issues after adding a package.json with "type": "module" to your e2e project, please leave a message, and I'll take a look.

[leosvelperez]

Forgot to mention that you also need to adjust your cypress.config.ts for ESM. The configuration uses __dirname, which is not defined in ESM. The updated working config for the project you shared would be:

import { defineConfig } from 'cypress';
import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
import { dirname } from 'path';
import { fileURLToPath } from 'url';

const __dirname = dirname(fileURLToPath(import.meta.url));

export default defineConfig({
  e2e: nxE2EPreset(__dirname, {
    bundler: 'vite',
  }),
});

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.