Cypress fails to run when type is module

[isgj]

Current behavior

When using typescript and setting type to module in package.json cypress fails to run with

Desired behavior

Cypress runs

Test code to reproduce

The simplest config you could have like shown here #22795 (comment) or the cypress.config.ts can have

import { defineConfig } from "cypress";

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

Cypress Version

10.9.0

Node version

v16.17.1 (fails also with v18)

Operating System

Ubuntu 22.04

Debug Logs

cypress:lifecycle:child:run_require_async_child:337341 configFile: /home/isgjevori/Documents/prog/cy/cypress.config.ts +0ms
  cypress:lifecycle:child:run_require_async_child:337341 projectRoot: /home/isgjevori/Documents/prog/cy +0ms
  cypress:lifecycle:child:run_require_async_child:337341 try loading /home/isgjevori/Documents/prog/cy/cypress.config.ts +23ms
  cypress:lifecycle:child:run_require_async_child:337341 Loading file /home/isgjevori/Documents/prog/cy/cypress.config.ts +0ms
  cypress:server:util:editors user has the following editors: [ { id: 'code', binary: 'code', name: 'Visual Studio Code' }, { id: 'vim', binary: 'vim', name: 'Vim' } ] +282ms
  cypress:server:saved_state making saved state from /home/isgjevori/.cache/Cypress/10.9.0/Cypress/resources/app/packages/server +211ms
  cypress:server:saved_state missing project path, looking for project here +0ms
  cypress:lifecycle:child:run_require_async_child:337341 User is loading an ESM config file +2ms
  cypress:lifecycle:child:run_require_async_child:337341 importing esm file file:///home/isgjevori/Documents/prog/cy/cypress.config.ts +0ms
  cypress:server:saved_state state path for global mode +2ms
  cypress:server:appdata path: /home/isgjevori/.config/Cypress/cy/production/projects/__global__/state.json +214ms
  cypress:server:saved_state full state path /home/isgjevori/.config/Cypress/cy/production/projects/__global__/state.json +1ms
  cypress:server:util:editors saved preferred editor: undefined +7ms
  cypress:server:util:editors return available editors: [ { id: 'computer', name: 'File System', binary: 'computer' }, { id: 'code', name: 'Visual Studio Code', binary: 'code' }, { id: 'vim', name: 'Vim', binary: 'vim' } ] +0ms
  cypress:server:saved_state making saved state from /home/isgjevori/.cache/Cypress/10.9.0/Cypress/resources/app/packages/server +5ms
  cypress:server:saved_state missing project path, looking for project here +0ms
  cypress:server:saved_state state path for global mode +7ms
  cypress:server:appdata path: /home/isgjevori/.config/Cypress/cy/production/projects/__global__/state.json +12ms
  cypress:server:saved_state full state path /home/isgjevori/.config/Cypress/cy/production/projects/__global__/state.json +0ms
  cypress:launcher:linux firefox is running as a snap, changing profile path +0ms
  cypress:launcher:linux Could not extract version from stdout using regex: { stdout: '', versionRegex: /^Mozilla Firefox ([^\sab]+)$/m } +0ms
  cypress:lifecycle:child:run_require_async_child:337341 error loading file via native Node.js module loader exports is not defined in ES module scope +53ms
  cypress:lifecycle:ProjectConfigIpc error loading config {
  name: 'Error',
  message: 'Your \x1B[33mconfigFile\x1B[39m is invalid: \x1B[94m/home/isgjevori/Documents/prog/cy/cypress.config.ts\x1B[39m\n' +
    '\n' +
    'It threw an error when required, check the stack trace below:',
  stack: 'ReferenceError: exports is not defined in ES module scope\n' +
    '    at file:///home/isgjevori/Documents/prog/cy/cypress.config.ts:2:23\n' +
    '    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)\n' +
    '    at async Promise.all (index 0)\n' +
    '    at async ESMLoader.import (node:internal/modules/esm/loader:533:24)\n' +
    '    at async importModuleDynamicallyWrapper (node:internal/vm/module:438:15)\n' +
    '    at async loadFile (/home/isgjevori/.cache/Cypress/10.9.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_require_async_child.js:106:14)\n' +
    '    at async EventEmitter.<anonymous> (/home/isgjevori/.cache/Cypress/10.9.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_require_async_child.js:116:32)',
  type: 'CONFIG_FILE_REQUIRE_ERROR',
  details: 'ReferenceError: exports is not defined in ES module scope\n' +
    '    at file:///home/isgjevori/Documents/prog/cy/cypress.config.ts:2:23\n' +
    '    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)\n' +
    '    at async Promise.all (index 0)\n' +
    '    at async ESMLoader.import (node:internal/modules/esm/loader:533:24)\n' +
    '    at async importModuleDynamicallyWrapper (node:internal/vm/module:438:15)\n' +
    '    at async loadFile (/home/isgjevori/.cache/Cypress/10.9.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_require_async_child.js:106:14)\n' +
    '    at async EventEmitter.<anonymous> (/home/isgjevori/.cache/Cypress/10.9.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_require_async_child.js:116:32)',
  isCypressErr: true,
  messageMarkdown: 'Your `configFile` is invalid: `/home/isgjevori/Documents/prog/cy/cypress.config.ts`\n' +
    '\n' +
    'It threw an error when required, check the stack trace below:',
  originalError: [Object]
} +334ms

### Other

_No response_

[stoyle]

We had a very similar problem. Ended up with renaming cypress.config.ts to cypress.config.cjs, and it worked! I guess this is something which should be handled by cypress itself. And according to the following it should...

#23552

[astone123]

@isgj @stoyle I'm unable to reproduce this bug. Could either of you provide an example project that exhibits this issue so that I could move it forward? Thanks

[MateusNeres26]

https://github.com/JoanEsquivel/cypress-cucumber-boilerplate

[astone123]

@MateusNeres26 thanks, I was able to reproduce it with this project.

[instil-spencerc]

Any update on this? I tried yarn patch cypress to see if I could patch the offending code for my project, but I'm having trouble sorting out the source code with what gets installed in my project locally.

[verheyenkoen]

FYI: Adding the following line to tsconfig.json fixed this for me:

{
  "compilerOptions": {
    "module": "ES2015"
  }
}

My full tsconfig.json looks like this (don't know if all of this makes sense but at least it works for me):

{
  "compilerOptions": {
    "target": "ES2015",
    "lib": ["ES2019", "DOM"],
    "types": ["cypress", "node"],
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true,
    "noEmit": true,
    "module": "ES2015"
  },
  "include": ["e2e/**/*"]
}

[StephaneColson]

Hi, I'm also facing this issue while trying to migrate my cypress project to typescript. Any update ?
I thought it was supposed to be fixed as #23552 is closed (cc @lmiller1990 )...

[lmiller1990]

@StephaneColson can you share a minimal reproduction? It could be an issue on your end - I'm using Cypress with TS and type=module successfully.

[StephaneColson]

@lmiller1990 sure

With this simple cypress.config.ts

import { defineConfig } from 'cypress';
export default defineConfig({
  e2e: {
baseUrl: 'https://myurl.fr/',
  },
});

and package.json

{
  "dependencies": {
    "cypress": "^12.3.0",
    "typescript": "^4.9.5"
  },
  "name": "test",
  "description": "These end2end tests use [Cypress](https://www.cypress.io/).",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "test": "npx cypress run"
  },
  "author": "",
  "license": "ISC"
}

and tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "target": "es5",
    "lib": ["es5", "dom", "ES2021.String"],
    "types": ["cypress", "node"],
    "strict": false
  },
  "include": ["**/*.ts"],
  "exclude": ["node_modules"],
}

When running $ npx cypress run I get the ReferenceError: exports is not defined in ES module scope error

(node:50625) ExperimentalWarning: Custom ESM Loaders is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:50625) ExperimentalWarning: The Node.js specifier resolution flag is experimental. It could change or be removed at any time.
Your configFile is invalid: /Users/stephane.colson/Code/e2e/cypress.config.ts

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

ReferenceError: exports is not defined in ES module scope
    at file:///Users/stephane.colson/Code/e2e/cypress.config.ts:2:23
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:438:15)
    at async loadFile (/Users/stephane.colson/Library/Caches/Cypress/12.3.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_require_async_child.js:106:14)
    at async EventEmitter.<anonymous> (/Users/stephane.colson/Library/Caches/Cypress/12.3.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_require_async_child.js:116:32

As soon as I remove the "type": "module", in package.json then the tests starts to run

My environment:

• MacOS Ventura 13.1
• Node: 16.19.1
• Cypress: 12.3.0
• Typescript: 4.9.5

I tried upgrading to Cypress: 12.6.0 and no improvements!

Thanks for your help!

[lmiller1990]

@StephaneColson I reproduced it. I was able to get it to work by updating tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "module": "ES2015", // <==== added this
    "target": "es5",
    "lib": ["es5", "dom", "ES2021.String"],
    "types": ["cypress", "node"],
    "strict": false
  },
  "include": ["**/*.ts"],
  "exclude": ["node_modules"],
}

Docs for module. This is also described in the comment prior to yours.

By default, it's CommonJS for "module": "commonjs", which isn't compatible with type=module.

I could be misunderstanding something, but I think this is the correct behavior - type: module conflicts with the tsconfig.json you've provided (which defaults to CommonJS).

[StephaneColson]

Docs for module. This is also described in the comment prior to yours.

By default, it's CommonJS for "target": "es5", which isn't compatible with type=module.

I could be misunderstanding something, but I think this is the correct behavior - type: module conflicts with the tsconfig.json you've provided (which defaults to CommonJS).

I saw the comment and tried the trick, but it does not work with my full project...I mean that I have another error I don't know how to fix but now it makes sense. Thanks

[lmiller1990]

What is the other error? Can you share/reproduce?

[verheyenkoen]

@lmiller1990 Your suggestion fixed it for me.

[StephaneColson]

What is the other error? Can you share/reproduce?

It was something not related at all to what is discussed here. Thanks for your help!

[Amy-B-Tradition]

I still had this problem in a project I was upgrading from parcel 1 to Vite, with the newer tsconfig structure (tsconfig, tsconfig.app, tsconfig.node). I tried adding the cypress files to the include of both app and node (individually, not at once) and creating a tsconfig.cypress. While I got a tsconfig.cypress working at one point, my actual project no longer ran, so I reverted the change. The only thing that actually worked was removing type: "module" from package.json.

At some point I had an issue that someone had posted a solution to of type: "module", but now the project (and cypress) works fine without that. However, it would be good if there was better information about how to make this work with a main tsconfig that's just references.

[halcarleton]

The only things that fixed this for me in a new vite project were: removing "type": "module" from my package.json; or renaming cypress.config.ts to cypress.config.mts.

The renaming fix actually didn't work for me. Every time I start up cypress after renaming the config file it tries to go through the automated configuration process again and creates a new cypress.config.ts instead of reading from cypress.config.mts.

However, renaming the config file to cypress.config.js did work and allowed me to keep "type": "module" in my package.json.