Cypress Module Problem

Sometimes you might see an error message when adding Cypress to an existing project that uses ES6 modules. When you run the cypress open command and it opens the first window, it tries to load the plugins file and shows an error

For completeness, the full error text is below

**Message:** Your `pluginsFile` is invalid: `/Users/glebbahmutov/git/my-svelte-app/cypress/plugins/index.js`

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

**Details:** Error [ERR_REQUIRE_ESM]: require() of ES Module
/Users/glebbahmutov/git/my-svelte-app/cypress/plugins/index.js from
/Users/glebbahmutov/Library/Caches/Cypress/9.5.4/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_plugins.js not supported.
index.js is treated as an ES module file as it is a .js file whose nearest parent package.json
contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use dynamic import()
which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs"
in /Users/glebbahmutov/git/my-svelte-app/package.json to treat all .js files as CommonJS
(using .mjs for all ES modules instead).

    at runPlugins (/Users/glebbahmutov/Library/Caches/Cypress/9.5.4/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_plugins.js:186:15)
    at Object.<anonymous> (/Users/glebbahmutov/Library/Caches/Cypress/9.5.4/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/index.js:8:25)

**Stack trace:**

It seems if the application has type: module setting in its package.json, the Cypress plugins that runs in Node and tries to load CommonJS modules fails to even load. The specs are happy - if the Cypress config file cypress.json specifies no plugins file, the specs load.

cypress.json

{
  "pluginsFile": false
}

The solution

The solution to this problem comes from the error description itself:

... it is a .js file whose nearest parent package.json contains "type": "module" ...

Did you see it? The phrase "nearest parent package.json" is the key. If the entire project has package.json with type: module, all we need to do is to create another package.json closer to the Cypress plugins file that has type: commonjs. Here is what I do:

• I create a file "package.json" and place it in the "cypress" folder. It becomes the "nearest" package for the Cypress plugins file
• I place the following JSON into that file:

cypress/package.json

{
	"name": "cypress-tests",
	"private": true,
	"type": "commonjs"
}

This solves the plugins loading problem.

You can find the full source code in the repo bahmutov/my-svelte-app.