Nuxt3项目运行Cypress遇Error [ERR_REQUIRE_ESM]错误求助

错误原因 #

报错本质是Cypress依赖的listr2用CommonJS的require()加载wrap-ansi，但wrap-ansi 8.x及以上版本已转为纯ESM模块，二者加载机制不兼容导致冲突。

可行解决方案 #

1. 锁定兼容版本的wrap-ansi（快速临时修复）

直接安装支持CommonJS的低版本wrap-ansi，强制项目使用该版本：

# npm
npm install wrap-ansi@7.0.0 --save-dev

# yarn
yarn add wrap-ansi@7.0.0 -D

这也是你之前解决yarn安装问题的思路，能快速绕过版本冲突。

2. 使用Nuxt官方Cypress集成模块（长期推荐）

Nuxt3提供官方测试工具模块@nuxt/test-utils，已做好Cypress的依赖兼容处理：

1. 安装依赖：

npm install @nuxt/test-utils cypress --save-dev

2. 在nuxt.config.ts中配置模块：

export default defineNuxtConfig({
  modules: ['@nuxt/test-utils/module'],
  testUtils: {
    cypress: true
  }
})

3. 启动Cypress：

npx nuxt test --cypress open

该方案能避免后续依赖更新带来的兼容问题，适合长期维护项目。

3. 修改listr2源码（应急临时方案，不推荐）

找到node_modules/listr2/dist/renderer/default.renderer.js第7行，将CommonJS的require改为ESM动态导入：

// 原代码
const cliWrap = require("wrap-ansi");

// 修改为
const cliWrap = await import("wrap-ansi");

注意：此修改会在依赖重新安装后失效，仅适合临时测试场景。

内容的提问来源于stack exchange，提问作者Matthew T