I'm pretty new to cypress. I tried to install clipboardy to one of my project. But the guide that I found online like this mostly setup on the older cypress which is using the plugins/index.js file.

I tried something like this and got error

const { defineConfig } = require("cypress");
const createBundler = require("@bahmutov/cypress-esbuild-preprocessor");
const addCucumberPreprocessorPlugin =
  require("@badeball/cypress-cucumber-preprocessor").addCucumberPreprocessorPlugin;
const createEsbuildPlugin =
  require("@badeball/cypress-cucumber-preprocessor/esbuild").createEsbuildPlugin;

const clipboardy = require("clipboardy");

module.exports = defineConfig({
  e2e: {
    async setupNodeEvents(on, config) {
      const bundler = createBundler({
        plugins: [createEsbuildPlugin(config)],
      });

      on("file:preprocessor", bundler);
      await addCucumberPreprocessorPlugin(on, config);

      on('task', {
        getClipboard () {
            return clipboardy.readSync();
        }
    });


      return config;
    },
    specPattern: "cypress/e2e/features/*.feature",
    baseUrl: "XXXXXXXXXXXXX",
    chromeWebSecurity: false,
  },
});

The error

Error screen

Stack Trace

Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\XXXXXXXXXXXXXXXXXXXXXXX\node_modules\clipboardy\index.js from C:\Users\XXXXXXXXXXXXXXXXXXXXXXX\cypress.config.js not supported.
Instead change the require of index.js in C:\Users\XXXXXXXXXXXXXXXXXXXXXXX\cypress.config.js to a dynamic import() which is available in all CommonJS modules.
    at Object. (C:\Users\XXXXXXXXXXXXXXXXXXXXXXX\cypress.config.js:8:20)
    at async Promise.all (index 0)
    at async loadFile (C:\Users\XXXX\AppData\Local\Cypress\Cache\10.4.0\Cypress\resources\app\node_modules\@packages\server\lib\plugins\child\run_require_async_child.js:106:14)
    at async EventEmitter. (C:\Users\XXXX\AppData\Local\Cypress\Cache\10.4.0\Cypress\resources\app\node_modules\@packages\server\lib\plugins\child\run_require_async_child.js:116:32)