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

[nitzanashi]

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

[jennifer-shehane]

I'm not seeing this code running properly in 4.5.0 either. Can you include the code that was properly running in 4.5.0? The code you're trying to update?

[nitzanashi]

Thanks for replying,
The code on the top is the one I use to run my project on 4.5.0 without any issues, more to plugins:

import webpack from '@cypress/webpack-preprocessor/index.js';

const plugins = async (on, config) => {
    // we import dynamically webpack.config for diff projects
    const webpackOptions = (await import(path.resolve(`projects/${PROJECT}/cypress/webpack.config.js`))).default;
    on('file:preprocessor', webpack({webpackOptions}));
};

export default plugins;

I run also cypress normal with npm run cypress open nothing special.
and again my versions are:

"@cypress/webpack-preprocessor": "4.1.3",
"cypress": "4.5.0",

node version: 14.4.0
npm version 6.14.6

Is the error that you're getting is the same as I described?

[nitzanashi]

@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

[nitzanashi]

and here is the repo https://github.com/nitzanashi/cypress-typescript-issue

[jennifer-shehane]

I can reproduce this from the provided repo, but I'm still not seeing this issue being introduced in 4.6.0. The same error occurs for me in 4.5.0 and even back to 3.8.1.

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/jennifer/Dev/cypress-typescript-issue/cypress/plugins/index.js
require() of ES modules is not supported.
require() of /Users/jennifer/Dev/cypress-typescript-issue/cypress/plugins/index.js from /Users/jennifer/Library/Caches/Cypress/4.12.1/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_plugins.js 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/jennifer/Dev/cypress-typescript-issue/package.json.

    at Module._extensions..js (internal/modules/cjs/loader.js:1163:13)
    at Object.require.extensions.<computed> [as .js] (/Users/jennifer/Library/Caches/Cypress/4.12.1/Cypress.app/Contents/Resources/app/packages/server/node_modules/ts-node/src/index.ts:539:12)
    at Module.load (internal/modules/cjs/loader.js:996:32)
    at Function.Module._load (internal/modules/cjs/loader.js:896:14)
    at Module.require (internal/modules/cjs/loader.js:1036:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at module.exports (/Users/jennifer/Library/Caches/Cypress/4.12.1/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_plugins.js:208:15)
    at Object.<anonymous> (/Users/jennifer/Library/Caches/Cypress/4.12.1/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/index.js:6:25)
    at Module._compile (internal/modules/cjs/loader.js:1147:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
    at Module.load (internal/modules/cjs/loader.js:996:32)
    at Function.Module._load (internal/modules/cjs/loader.js:896:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47

Regardless, this error does not appear in our upcoming 5.0.0 release, a different error displays in its place.

TypeError: Cannot read property 'resolve' of undefined
    at /Users/jennifer/Dev/cypress-typescript-issue/cypress/plugins/index.js:5:46
    at processTicksAndRejections (internal/process/task_queues.js:94:5)

It's failing on the resolve here.

import webpack from '@cypress/webpack-preprocessor/dist/index.js';
import path from "path";

const plugins = async (on, config) => {
    const webpackConfig = (await import(path.resolve('cypress/webpack.config.js'))).default;
    on('file:preprocessor', webpack({webpackOptions: webpackConfig()}));
}

export default plugins;

There's also this warning in the console:

(node:35487) Warning: require() of ES modules is not supported.
require() of /Users/jennifer/Dev/cypress-typescript-issue/cypress/plugins/index.js from /Users/jennifer/Dev/cypress/packages/server/lib/plugins/child/run_plugins.js 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/jennifer/Dev/cypress-typescript-issue/package.json

[nitzanashi]

@jennifer-shehane indeed the code in the repo didn't work for 4.5.0 as well, I fixed it by adding tsconfig.json "module": "esnext".
so now it looks like that:

{
    "compilerOptions": {
        "module": "esnext",
        "allowJs": true
    }
}

I updated the repo, so now if you will check it, it will work for 4.5.0

I tested it also on 5.0.0 but errors are still there

[nitzanashi]

Any suggestion on how to solve this? how can I change my code so it will work?

[nitzanashi]

looks like it was fixed in #8359 and released in 5.1.0

well not quite, it doesn't identify my commands now, need to investigate more

[nitzanashi]

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 :/

[nitzanashi]

@jennifer-shehane any update on that? our project is currently running on Cypress 4.5.0 because of this issue and we would like to update to use the latest features

[nitzanashi]

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

[frederikhors]

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

[Shaun-Regenbaum]

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.

[sotiriosalpha]

What worked for me was to remove "type": "module" from my package.json (as stated in the error message)

[Shaun-Regenbaum]

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

[nitzanashi]

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 ?

[Shaun-Regenbaum]

I did not, ill give that a try later.

[mattcph]

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.

[stolinski]

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.

[mattcph]

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.

[omelnik]

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.

[ctjlewis]

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

[mellson]

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

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

[talaikis]

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

That does not work with at least 9.0.0:

Your pluginsFile is set to \cypress\plugins\index.cjs, but either the file is missing, it contains a syntax error, or threw an error when required. The pluginsFile must be a .js, .ts, or .coffee file.

[maxlath]

@talaikis could it be that the file ./cypress/plugins/index.js exists but has to be renamed ./cypress/plugins/index.cjs?

[blindfish3]

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 :(

[Danny2462]

ERR_REQUIRE_ESM comes up after installing [email protected] 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 [email protected] 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?

[chauchakching]

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 :(

Still got some error.
However, if I

• create a package.json file with content {} in cypress folder, and
• create a tsconfig.json in cypress folder (https://docs.cypress.io/guides/tooling/typescript-support#Configure-tsconfig-json)
  Then it works!

I bootstrapped my app with sveltekit.

[tim-rohrer]

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.

[trigunam]

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

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

This worked.

[odinho]

None of this, except removing { type: "module" } worked for me. The pluginsfile is removed in Cypress 12. I also got no error message, just a $200 bill from GitHub actions and a lot of 6h hanging cypress tests 😓

What did work for me, however, was upgrading from Cypress 12.2.0 to 12.3.0. (Or maybe even a bigger jump from 10).