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 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.
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
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:
This solves the plugins loading problem.
You can find the full source code in the repo bahmutov/my-svelte-app.