"require is not defined" error throws with cypress-mochawesome-reporter 3.6.1.

Environment

- OS: `Ubuntu 20.04.6 LTS`
- Node: `v18.17.0`
- cypress-mochawesome-reporter: `3.6.1`
- cypress: `13.3.1`

What happened?

Current behavior

Hello team,

I am following the instructions here, to setup Cypress HTML report using package cypress-mochawesome-reporter however I am getting the following error:

Your configFile threw an error from: /home/ubuntu/angular-frontend/web/cypress.config.ts

The error was thrown while executing your e2e.setupNodeEvents() function:

ReferenceError: require is not defined

Expected behavior

When I run yarn cypress run --browser chrome, in the terminal, I should see cypress-mochawesome-reporter produce sample output below:

Start generate report proces
Read and merge json from (file:///home/ubuntu/angular-frontend/web/cypress/reports/html/.jsons/mochawesome_001.json)
...
....
Enhance report
Create HTML report
HTML report successfully crated!
home/ubuntu/angular-frontend/web/cypress/reports/html/index.html

Config file

import { defineConfig } from 'cypress';

export default defineConfig({
  projectId: 'angular-frontend',
  e2e: {
    baseUrl: 'http://localhost:3000',
    specPattern: 'cypress/e2e/**/*.cy.ts',
    setupNodeEvents(on) {
      require('cypress-mochawesome-reporter/plugin')(on)
    },
  },
  reporter: 'cypress-mochawesome-reporter',
  reporterOptions: {
    reportDir: 'cypress/results',
    reportPageTitle: 'Angular Cypress Test Report',
    charts: true,
    embeddedScreenshots: true,
  },  
  screenshotOnRunFailure: true
});

Relevant log output

ReferenceError: require is not defined
    at setupNodeEvents (file:///home/ubuntu/angular-frontend/web/cypress.config.ts:18:7)
    at /home/ubuntu/.cache/Cypress/13.3.1/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_plugins.js:122:14
    at tryCatcher (/home/ubuntu/.cache/Cypress/13.3.1/Cypress/resources/app/node_modules/@packages/server/node_modules/bluebird/js/release/util.js:16:23)
    at Function.Promise.attempt.Promise.try (/home/ubuntu/.cache/Cypress/13.3.1/Cypress/resources/app/node_modules/@packages/server/node_modules/bluebird/js/release/method.js:39:29)
    at RunPlugins.load (/home/ubuntu/.cache/Cypress/13.3.1/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_plugins.js:119:9)
    at RunPlugins.runSetupNodeEvents (/home/ubuntu/.cache/Cypress/13.3.1/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_plugins.js:59:17)
    at EventEmitter.<anonymous> (/home/ubuntu/.cache/Cypress/13.3.1/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_require_async_child.js:185:22)
    at EventEmitter.emit (node:events:513:28)
    at EventEmitter.emit (node:domain:489:12)
    at process.<anonymous> (/home/ubuntu/.cache/Cypress/13.3.1/Cypress/resources/app/node_modules/@packages/server/lib/plugins/util.js:33:22)
    at process.emit (node:events:513:28)
    at process.emit (node:domain:489:12)
    at process.emit.sharedData.processEmitHook.installedValue [as emit] (/home/ubuntu/.cache/Cypress/13.3.1/Cypress/resources/app/node_modules/@cspotcode/source-map-support/source-map-support.js:745:40)
    at emit (node:internal/child_process:937:14)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)



### Anything else?

_No response_

Please create a repo with the problem and steps to reproduce the issue so I can have a look.

Thanks.

Hi @LironEr / @syumaK -

I encountered this error (or something similar) in the process of upgrading my repository from Cypress 12.1.0 to 13.6.0. As best as I can tell, this issue is caused by upgrading to Node 14+ and setting type: module in your package.json. This changes the compilation type to ES6 and causes compatibility issues.

Here's how I encountered this issue:

npm-check-updates -u
Extracted configuration from plugins/index.js file and insert in defineConfig within cypress.config.js
Updated package.json to include type: module to specify ES6 compilation.
Updated imports within cypress.config.js to ES6-style imports.

This causes the error reported above:

ReferenceError: require is not defined
    at setupNodeEvents (file:///C:/Users/XXX/testing/cypress.config.js:49:25)

My first attempt was to monkey-patch require via importing createRequire from module as suggested in this SO post. This did not work for me, and instead, produced a rather cryptic error:

TypeError [undefined]: The "id" argument must be of type string. Received function registerChildEvent
    at new NodeError (node:internal/errors:399:5)
    at validateString (node:internal/validators:163:11)
    at Module.require (node:internal/modules/cjs/loader:1134:3)
    at require (node:internal/modules/cjs/helpers:110:18)
    at setupNodeEvents (file:///C:/Users/XXX/testing/cypress.config.js:49:90)

Now, on to the resolution:

Import the cypress-mochawesome-reporter/plugin module as an ES6 import:

import plugin from 'cypress-mochawesome-reporter/plugin';

Update the static require('cypress-mochawesome-reporter/plugin')( on ) line to plugin( on )

Cypress should load the plugin correctly.

Hopefully this helps!

Hi @LironEr / @syumaK -

I encountered this error (or something similar) in the process of upgrading my repository from Cypress 12.1.0 to 13.6.0. As best as I can tell, this issue is caused by upgrading to Node 14+ and setting type: module in your package.json. This changes the compilation type to ES6 and causes compatibility issues.

Here's how I encountered this issue:

npm-check-updates -u

Extracted configuration from plugins/index.js file and insert in defineConfig within cypress.config.js

Updated package.json to include type: module to specify ES6 compilation.

Updated imports within cypress.config.js to ES6-style imports.

This causes the error reported above:
ReferenceError: require is not defined
    at setupNodeEvents (file:///C:/Users/XXX/testing/cypress.config.js:49:25)
My first attempt was to monkey-patch require via importing createRequire from module as suggested in this SO post. This did not work for me, and instead, produced a rather cryptic error:
TypeError [undefined]: The "id" argument must be of type string. Received function registerChildEvent
    at new NodeError (node:internal/errors:399:5)
    at validateString (node:internal/validators:163:11)
    at Module.require (node:internal/modules/cjs/loader:1134:3)
    at require (node:internal/modules/cjs/helpers:110:18)
    at setupNodeEvents (file:///C:/Users/XXX/testing/cypress.config.js:49:90)
Now, on to the resolution:

Import the cypress-mochawesome-reporter/plugin module as an ES6 import:
import plugin from 'cypress-mochawesome-reporter/plugin';
Update the static require('cypress-mochawesome-reporter/plugin')( on ) line to plugin( on )

Cypress should load the plugin correctly.

Hopefully this helps!

This fixes the issue reported :) Thank you sir.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

LironEr / cypress-mochawesome-reporter