Playwright页类导入自建Angular库报ERR_REQUIRE_ESM错误如何解决

AI 小北

2026-8-26

问题根因

这个报错是模块格式不兼容导致的：

Playwright Test 运行E2E测试时，默认不会转译node_modules目录下的依赖，会直接按照Node.js原生模块规则加载文件。你自建的my-ui-components库打包产物是纯ESM格式的.mjs文件，Node.js尝试用CommonJS规范的require()加载ESM文件时就会抛出ERR_REQUIRE_ESM错误。
主Angular应用使用无异常，是因为Angular CLI/Webpack在构建阶段会统一处理所有依赖的模块格式转译，不会直接调用Node原生require加载裸.mjs文件，因此不会触发该问题。
导入@playwright/test、rxjs等第三方依赖无异常，是因为这些包都做了CJS/ESM双格式兼容，同时提供两种规范的产物，且package.json中配置了正确的入口映射，Node.js无论用require还是import加载都能匹配到对应格式的文件。

解决方案

按推荐优先级排序：

方案1：配置Playwright转译自建库（改动最小，推荐优先尝试）
修改项目下的playwright.config.ts，调整转译忽略规则，把你的自建UI库从默认忽略列表里排除，让Playwright像处理项目内TS文件一样转译该库，自动处理模块兼容问题：
```
import { defineConfig } from '@playwright/test';

export default defineConfig({
  // 其余原有配置保持不变
  // 覆盖默认的node_modules全忽略规则，仅忽略除my-ui-components外的依赖
  transformIgnorePatterns: ['/node_modules/(?!my-ui-components)/'],
});
```
方案2：给自建Angular库补充CJS产物
修改my-ui-components库的构建配置，让Angular打包时同时输出CommonJS格式产物，并在库的package.json中正确配置不同模块规范的入口：
1. 调整库的angular.json构建配置，开启CJS产物输出
2. 库的package.json入口配置参考示例：
```
{
  "main": "dist/ui-components/cjs/index.js",
  "module": "dist/ui-components/fesm2015/ui-components.mjs",
  "es2015": "dist/ui-components/fesm2015/ui-components.mjs",
  "typings": "dist/ui-components/index.d.ts"
}
```
配置完成后重新打包发布UI库，Node.js用require加载时会自动匹配到CJS入口，不会再抛错。
方案3：类型-only导入（仅适用于无运行时依赖的场景）
如果你在Page类中仅将OptionItem作为TypeScript类型标注使用，不需要调用它的构造函数、静态方法等运行时逻辑，可以改成类型导入，TS编译后会完全移除该导入语句，不会产生运行时加载逻辑：
```
import type { OptionItem } from 'my-ui-components';

export class MyPage {
  // 仅做类型标注时可用
  selectedOption?: OptionItem;
}
```
注意如果代码中存在new OptionItem()这类运行时调用，该方案无效。

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