NodeJS Cucumber项目添加.ts文件时报Unknown file extension错误

问题根源 #

项目从CommonJS转为ESM（.mjs）后，Node的模块解析规则发生变化，原CommonJS下依赖ts-node/register处理.ts文件的方式不再适配ESM环境，导致Cucumber无法识别.ts文件扩展名。

解决方案 #

1. 统一项目为ESM规范（推荐） #

• 修改package.json，添加"type": "module"，这样所有.js文件默认按ESM解析，无需再用.mjs后缀（也可保留.mjs，但统一后缀更清晰）。
• 配置tsconfig.json，确保模块相关参数适配ESM：

  {
    "compilerOptions": {
      "module": "ESNext",
      "moduleResolution": "NodeNext",
      "target": "ES2020",
      "esModuleInterop": true,
      "skipLibCheck": true,
      "strict": true
    },
    "include": ["step-definitions/**/*.ts", "features/**/*.ts"]
  }
  

2. 配置Cucumber支持ESM + TypeScript #

• 确保安装ts-node@10+（该版本开始支持ESM）、typescript和@cucumber/cucumber：

  npm install --save-dev ts-node typescript @cucumber/cucumber
  

• 创建Cucumber配置文件cucumber.mjs，指定用ts-node/esm处理.ts文件：

  import { defineConfig } from '@cucumber/cucumber';
  
  // 强制ts-node读取指定的tsconfig
  process.env.TS_NODE_PROJECT = './tsconfig.json';
  
  export default defineConfig({
    paths: ['features/**/*.feature'],
    requireModule: ['ts-node/esm'], // 关键：用ESM版本的ts-node处理.ts
    require: ['step-definitions/**/*.ts'],
    format: ['progress']
  });
  

• 运行Cucumber时指定配置文件：

  npx cucumber-js --config cucumber.mjs
  

3. 处理路径后缀问题 #

ESM模式下，相对导入必须添加文件后缀（如./steps/login.ts而非./steps/login），检查所有.ts和.mjs文件中的导入语句，确保后缀正确。

备选方案：保留CommonJS兼容ESM #

如果不想全量转ESM，可通过动态导入处理ESM依赖，同时继续用CommonJS模式处理.ts：

• 保持package.json无"type": "module"。
• 运行Cucumber时使用CommonJS版本的ts-node：

  npx cucumber-js --require-module ts-node/register --require step-definitions/**/*.ts
  

• 对需要ESM的依赖，用import()动态导入：

  // 在CommonJS文件中动态导入ESM依赖
  const esmModule = await import('esm-only-package');
  

  但这种方式可能会有模块冲突，仅作为临时过渡方案。

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