如何让cucumber-js编译TypeScript文件并解决import语句报错问题

该报错是ESM模块规范与ts-node默认加载模式不匹配导致的：你在package.json中添加"type": "module"后，Node.js会按ESM规则加载所有.js文件，但ts-node默认以CommonJS模式处理TypeScript文件，二者模块加载逻辑冲突，所以识别不了ESM的import语法。

按照以下步骤调整配置即可解决：

• 调整tsconfig.json配置，新增ts-node专属的ESM开启配置：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "ts-node": {
    "esm": true,
    "experimentalSpecifierResolution": "node"
  }
}

• 修改cucumber-js运行命令，替换ts-node加载器，同时给glob路径加引号避免shell提前解析：

node_modules\.bin\cucumber-js --loader ts-node/esm --require "step-definitions/**/*.ts" --format progress-bar --require "tests/page/*.ts" "features/**/*.feature"

• 检查代码中的相对导入语句，ESM规范要求必须补全导入文件后缀，例如把import { TestSupportPage } from './test-support.page'改为import { TestSupportPage } from './test-support.page.js'（注意填编译后的.js后缀，不是.ts后缀）。

如果没有强制使用ESM的需求，可以直接回退到CommonJS模式，无需调整代码导入逻辑：

• 删除package.json中新增的"type": "module"配置
• 将tsconfig.json的module配置改为CommonJS
• 直接使用你原本的运行命令即可正常执行

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