How to setup clipboardy in cypress 10?

user_3518730 0
Viewed 41

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)
es6-modules cypress clipboard javascript
1 Answers

It's because the clipboardy package has type: "module" in it's 'package.json'.

This tells anything that uses the package that you should use import not require to load the package.

Use dynamic imports, as hinted in the error message

Instead change the require of index.js in ... to a dynamic import()

const clipboard = import('clipboardy')
user_169977070
Related