如何在Node 16环境下的Cypress 9中导入外部插件库？

问题根因 #

clipboardy v3.0及以上版本已重构为纯ESM包，而Cypress 9.x版本的插件系统默认遵循CommonJS规范，不支持直接在CommonJS模块中导入ESM包，因此无论使用require()还是静态import语法都会报错。

解决方案1（推荐，改动最小）：降级clipboardy到v2.x版本 #

v2.x版本的clipboardy仍为CommonJS格式，无需修改现有代码逻辑，直接执行安装命令即可：

npm install clipboardy@2
# 或yarn add clipboardy@2

安装完成后原有const clipboardy = require('clipboardy')代码可正常运行。

解决方案2：使用动态导入适配ESM包 #

如果需要使用clipboardy v3+的新特性，可以将getClipboard任务改为异步逻辑，在任务内部使用Node支持的动态import()语法加载ESM包：
仅需修改插件文件中的getClipboard任务相关代码即可，其他逻辑无需改动：

// 先删掉顶部的const clipboardy = require("clipboardy");代码
module.exports = (on, config) => {
  on("task", {
    // 原有parseXlsx等任务保持不变
    async getClipboard() {
      const { default: clipboardy } = await import('clipboardy')
      return clipboardy.readSync()
    },
    // 其余lighthouse、pa11y等任务保持不变
  })
  // 其余before:browser:launch等逻辑保持不变
}

调用该任务时仍可使用Cypress原生的task调用语法：cy.task('getClipboard').then(content => /* 处理剪贴板内容 */)

内容的提问来源于stack exchange，提问作者Ale TheFe