AMD Module, ReferenceError: define is not defined, `package.json` to `"type": "module"`

[davtha-aa]

Current behavior

Run cypress open Your configFile is invalid: /../../../cypress.config.ts

Stack Trace:

ReferenceError: define is not defined
    at file:///../../../cypress.config.ts:1:1
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:431:15)
    at async loadFile (/home/me/.cache/Cypress/13.6.2/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_require_async_child.js:106:14)
    at async EventEmitter. (/home/me/.cache/Cypress/13.6.2/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_require_async_child.js:116:32)

cypress.config.ts

import { defineConfig } from 'cypress';
import plugin from 'cypress-mochawesome-reporter/plugin';
import getCompareSnapshotsPlugin from 'cypress-visual-regression/dist/plugin';
import 'dotenv/config';

// eslint-disable-next-line import/no-default-export
export default defineConfig({
  env: {
    ...
  },

  viewportWidth: 1500,

  reporter: 'cypress-mochawesome-reporter',
  reporterOptions: {
    charts: true,
    embeddedScreenshots: true,
    inlineAssets: true,
    saveAllAttempts: false,
  },

  e2e: {
    setupNodeEvents(on, config) {
      plugin(on);
      return getCompareSnapshotsPlugin(on, config);
    },
    baseUrl: 'http://localhost:3000',
    specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
  },

  component: {
    devServer: {
      framework: 'react',
      bundler: 'vite',
    },
    supportFile: 'cypress/support/component.tsx',
  },
});

This error occurs when I change package.json to "type": "module". Removing it seems to work.

Wanted to bring more attention to this issue: Started as Discord Issue: Great information from User Psi from Cypress Discord.

What's happening here is you're trying to run a AMD module, which is intended to be used within a browser, in a non-browser context (i.e. Node). This is more a problem with how Mocha works (though it is not an actual bug), this is an expected side-effect of how AMD modules work.

You can globally mock the define function, and then mock the requirejs specific require to work with your mocked define.

For example, you can mock the define call to simply import the real module from it's respective file, load that into an object map, and then mock the requirejs require to load the module from that map instead.

Although the library I'm working on does not have access to requirejs or the define call. Is there a way to to handle Cypress + ESM + AMD modules if they exist?

Desired behavior

Running cypress open should run without issue.

Test code to reproduce

Proprietary code, unable to produce minimal reproducible demo.

Cypress Version

13.6.2

Node version

v20.10.0

Operating System

Windows 10 Enterprise

Debug Logs

No response

Other

No response

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[cypress-app-bot]

This issue has been closed due to inactivity.