cypress: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module error thrown

Current behavior:

We’re trying to update Cypress from 4.5.0 to >= 4.6.0 but we encountered into a problem

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/nitzannashi/zattoo/web/projects/common/cypress/plugins/index.js
require() of ES modules is not supported.
require() of /Users/nitzannashi/zattoo/web/projects/common/cypress/plugins/index.js from /Users/nitzannashi/zattoo/web/projects/common/cypress/plugins/index.cjs is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/nitzannashi/zattoo/web/package.json.

    at Module._extensions..js (internal/modules/cjs/loader.js:1216:13)
    at Object.require.extensions.<computed> [as .js] (/Users/nitzannashi/Library/Caches/Cypress/4.7.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/ts-node/src/index.ts:539:12)
    at Module.load (internal/modules/cjs/loader.js:1049:32)
    at Function.Module._load (internal/modules/cjs/loader.js:937:14)
    at Module.require (internal/modules/cjs/loader.js:1089:19)
    at require (internal/modules/cjs/helpers.js:73:18)
    at /Users/nitzannashi/zattoo/web/projects/common/cypress/plugins/index.cjs:22:54
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

My setup is a little bit different from the usual one, I have a index.cjs and index.js, cypress.json config is as follow:

    "nodeVersion": "system",
    "pluginsFile": "projects/common/cypress/plugins/index.cjs",

plugins/index.cjs

module.exports = (...args) => {
    return import('./index.js').then((mod) => {
        return mod.default(...args);
    });
};

plugins/index.js

import snapshotPlugin from 'cypress-image-snapshot/plugin.js';
import retriesPlugin from 'cypress-plugin-retries/lib/plugin.js';
import webpack from '@cypress/webpack-preprocessor/index.js';

const plugins = async (on, config) => {
    ....
}

export default plugins;

package.json as "type": "module", but I do not understand why cypress should care about it.

Furthermore I tried to update @cypress/webpack-preprocessor from 4.1.3 -> 5.4.0 with modification to index.js but no changes. I’m not sure if it’s a cypress issue or cypress/webpack-preprocessor issue but it’s a blocker for me to update cypress

Desired behavior:

Cypress is loaded as expected and working

Versions

>= 4.6.0

About this issue

  • Original URL
  • State: open
  • Created 4 years ago
  • Reactions: 6
  • Comments: 31 (2 by maintainers)

Most upvoted comments

Still a problem today with a new Svelte Kit skeleton project!

For me it worked to rename the plugins index to index.cjs and specify it in cypress.json:

{
  ...
  "pluginsFile": "cypress/plugins/index.cjs",
  ...
}

ERR_REQUIRE_ESM comes up after installing clipboardy@3.0.0 for use in a plugin, since they moved to being ESM-only: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c I tried some of the suggested, less hacky fixes with Cypress 9.3.1, but none worked, so I opted to revert to clipboardy@2.3.0 since that wasn’t ESM-only yet.

Maybe this could be a good minimal repro to investigate the issue, as it only requires the import of clipboardy in a plugin file?

That doesn’t work for many projects where you explicitly need imports to be es6 modules.

Any updates on this? I’m facing this issue as well now. After adding "type": "module" to my package.json Cypress stopped recognizing the plugin file. Setting pluginsFile to false isn’t an option as well.

Update, today I installed Cypress again, using npm install cypress --save-dev, and it pulled version 8.3.1, This issues’s error remains as reported on fresh install.

Hi, today I tried cypress for the first time.

Just to confirm, after apt install command, with a fresh npm install on debian buster, the same error reported in this issue returns for me. Tried on MacOS 10.15.7, exactly same error after following post-install node_modules/.bin/cypress open.

I now assume this issue can be reproduced with a simple fresh install.

Project uses ES Modules.

So I edited cypress.json from {} to {“pluginsFile”:false} as noted in error. Then it runs as advertised.

For now I have fixed the issue by adding {“pluginsFile”: false} to the cypress.json file.

I suppose this only works if you don’t need plugins though.

To get it running I had to change the plugins file to index.cjs - with the corresponding update to cypress.json: "pluginsFile": "cypress/plugins/index.cjs" - and also run Cypress with TS_NODE_PROJECT=0 cypress open

I’m running this in a Sveltekit project and IIUC the cause is the "type": "module" Sveltekit included in package.json

edit: you can also use a hack that works to get Storybook running: instead of renaming to index.cjs you can add a package.json file to /cypress that contains:

{
	"type": "commonjs"
}

But I still need to use TS_NODE_PROJECT=0 cypress open 😦

This appears to still be an issue; latest Cypress tries to require(...) an ESM plugins/index.js and throws ERR_REQUIRE_ESM.

If someone have this issue as well, we found a hack on how to solve it by adding TS_NODE_PROJECT=0 to the tests. This is still something that needs to be solved from cypress side but for the meantime that let us upgrade

@jennifer-shehane I found the issue, the moment I have typescript installed with the following configuration the error will occur:

// tsconfig.json
{
    "compilerOptions": {
        "allowJs": true
    }
}

I also tried to alter the tsconfig.json inside the cypress folder but it didn’t have any effect

working on creating a repo to reproduce

For me it worked to rename the plugins index to index.cjs and specify it in cypress.json:

{
  ...
  "pluginsFile": "cypress/plugins/index.cjs",
  ...
}

This is what worked for me.

I’m also trying to get Cypress to load with “type”: “module”? Removing “type”: “module” is not a solution and setting pluginsFile to false removes usage of plugins.

That doesn’t work for many projects where you explicitly need imports to be es6 modules.

@Shaun-Regenbaum did you try to run Cypress with my kludge?

TS_NODE_PROJECT=0 cypress open ?

OK so adding "allowJs": true did solve this issue but created a new one where cypress is not reading my commands anymore.

I still can’t update from 4.5.0, it’s a bummer 😕