Nx单仓中Quokka.js运行TS文件遇ES模块require错误如何解决？

这个错误是因为Quokka.js默认以CommonJS模块系统运行代码，但你的Angular项目依赖的@angular/core是ES模块格式（.mjs后缀文件）。Node.js明确禁止在CommonJS模块中使用require()加载ES模块，因此触发了这个兼容性报错。

1. 配置Quokka启用ES模块模式 #

这是最直接的解决方案，让Quokka以ES模块方式运行代码：

• 在项目根目录创建或编辑.quokka配置文件，添加如下内容：

  {
    "type": "module"
  }
  

• 或者针对单个文件配置：打开VSCode命令面板（Ctrl+Shift+P），执行Quokka.js: Configure Current File，在弹出的配置中设置type为module。

2. 适配Nx Monorepo的TypeScript配置 #

如果上述方法仍有问题，检查并调整Nx项目的TypeScript配置：

• 打开项目根目录的tsconfig.base.json，确保compilerOptions里的模块相关配置符合ES模块要求：

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

• 若目标库有单独的tsconfig.json（比如libs/features/orders/tsconfig.lib.json），同样确认上述配置；还可以在.quokka里指定该tsconfig路径：

  {
    "type": "module",
    "tsConfig": "./libs/features/orders/tsconfig.lib.json"
  }
  

3. 临时 workaround（不推荐长期使用） #

如果只是临时测试代码，不想修改全局配置，可以把静态导入改成动态导入：

const { Component } = await import('@angular/core');

这种方式会改变代码结构，仅适合快速验证逻辑，不建议用于正式代码。

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