Webdriver.IO v8迁移后配置wdio-video-reporter遇ESM导入错误

问题背景 #

• 原WebdriverIO v7环境中，wdio-video-reporter录屏功能无法正常工作，因此迁移至v8版本
• 迁移完成后E2E测试用例可正常执行，但在wdio.conf.ts中配置wdio-video-reporter时出现模块兼容错误，其他导入功能均正常

完整错误信息 #

ERROR @wdio/config:ConfigParser: Failed loading configuration file: file:///D:/workspace/sample/mochascript/wdio.conf.ts: require() of ES Module D:\workspace\sample\mochascript\node_modules\wdio-video-reporter\node_modules\@wdio\reporter\build\index.js from D:\workspace\sample\mochascript\node_modules\wdio-video-reporter\dist\wdio-video-reporter.cjs not supported.
Instead change the require of index.js in D:\workspace\sample\mochascript\node_modules\wdio-video-reporter\dist\wdio-video-reporter.cjs to a dynamic import() which is available in all CommonJS modules.
Error [ERR_REQUIRE_ESM]: require() of ES Module D:\workspace\sample\mochascript\node_modules\wdio-video-reporter\node_modules\@wdio\reporter\build\index.js from D:\workspace\sample\mochascript\node_modules\wdio-video-reporter\dist\wdio-video-reporter.cjs not supported.
Instead change the require of index.js in D:\workspace\sample\mochascript\node_modules\wdio-video-reporter\dist\wdio-video-reporter.cjs to a dynamic import() which is available in all CommonJS modules.
    at require.extensions.<computed> [as .js] (D:\workspace\sample\mochascript\node_modules\ts-node\dist\index.js:851:20)        
    at Object.<anonymous> (D:\workspace\sample\mochascript\node_modules\wdio-video-reporter\dist\wdio-video-reporter.cjs:3:20)   
    at require.extensions.<computed> [as .js] (D:\workspace\sample\mochascript\node_modules\ts-node\dist\index.js:851:20)        
    at Object.<anonymous> (D:\workspace\sample\mochascript\wdio.conf.ts:7:47)
    at m._compile (D:\workspace\sample\mochascript\node_modules\ts-node\dist\index.js:857:29)
    at require.extensions.<computed> [as .ts] (D:\workspace\sample\mochascript\node_modules\ts-node\dist\index.js:859:16) {      
  code: 'ERR_REQUIRE_ESM'
}

解决方法 #

1. 升级wdio-video-reporter至兼容v8的版本 #

错误核心是wdio-video-reporter的CommonJS代码尝试用require()导入WebdriverIO v8中已转为ESM的@wdio/reporter模块，导致兼容冲突。优先升级该包到最新版：

• 执行命令：

  npm install wdio-video-reporter@latest
  

• 若最新版仍未适配，可查看该包的官方issue确认修复计划或临时补丁。

2. 切换项目为ESM模块规范 #

将项目从CommonJS转为ESM，适配WebdriverIO v8的模块结构：

• 在项目根目录的package.json中添加：

  "type": "module"
  

• 修改tsconfig.json的编译配置：

  {
    "compilerOptions": {
      "module": "ESNext",
      "moduleResolution": "NodeNext"
    }
  }
  

• 调整wdio.conf.ts中的导入语法，统一使用ESM的import而非CommonJS的require。

3. 替换为官方录屏工具 #

如果上述方法无效，可替换为WebdriverIO官方提供的@wdio/video-reporter，原生适配v8版本：

• 安装官方包：

  npm install @wdio/video-reporter --save-dev
  

• 在wdio.conf.ts中配置：

  reporters: [
    ['video', {
      saveAllVideos: false,
      videoSlowdownMultiplier: 3
    }]
  ]
  

内容的提问来源于stack exchange，提问作者Arpit Goyal