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