Cucumber-JS步骤定义w/ typescript中的“错误:不能使用模块外的导入语句”

Question

我得到了以下错误：

command: npx cucumber-js .\cucumber-e2e\
import { Given, When, Then  } from '@cucumber/cucumber';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1032:15)
    at Module._compile (node:internal/modules/cjs/loader:1067:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at C:\dev\FrontSystems.KeystonePortal\Keystone.Web\ClientApp\node_modules\@cucumber\cucumber\lib\cli\index.js:122:17
    at Array.forEach (<anonymous>)
    at Cli.getSupportCodeLibrary (C:\dev\xxxxx\xxxx.Web\ClientApp\node_modules\@cucumber\cucumber\lib\cli\index.js:120:26) 
    at Cli.run (C:\dev\xxxx\xxxx.Web\ClientApp\node_modules\@cucumber\cucumber\lib\cli\index.js:145:41)
    at async Object.run [as default] (C:\dev\xxxxx\xxxx.Web\ClientApp\node_modules\@cucumber\cucumber\lib\cli\run.js:25:18)codepath: C:\dev\xxxxx\xxxx.Web\ClientApp\cucumber-e2e\step-definitions\catalog.steps.ts

步骤文件：

import { Given, When, Then  } from '@cucumber/cucumber';

Given('A bank account with starting balance of {int}', (balance: number) => {
    // Write code here that turns the phrase above into concrete actions
    return 'pending';
  });

我的文件夹结构如下：

​

​

cucumber.js：

var common = [
  '--require ./cucumber-e2e/step-definitions/**/*.ts',
  '--publish-quiet',
].join(' ');

module.exports = {
  default: common,
};

tsconfig.json：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/cucumber-e2e",
    "module": "commonjs",
    "target": "es5",
    "types": [
      "jasmine",
      "jasminewd2",
      "node"
    ]
  }
}

继承的tsconfig.json：

{
  "compileOnSave": false,
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "resolveJsonModule": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "jszip": [
        "node_modules/jszip/dist/jszip.min.js"
      ]
    },
    "plugins": [
      {
        "name": "typescript-tslint-plugin",
        "alwaysShowRuleFailuresAsWarnings": false,
        "ignoreDefinitionFiles": true,
        "configFile": "./tslint.json",
        "suppressWhileTypeErrorsPresent": false
      }
    ]
  }
}

我在package.json中添加了以下软件包：

"@cucumber/cucumber": "^7.3.2",
"@types/chai": "^4.3.0",
"chai": "^4.3.6",
"chai-as-promised": "^7.1.1",
"protractor-cucumber-framework": "^8.4.0",
"webdriver-manager": "^12.1.8"

因此，特性文件和步骤定义正在被识别，但是它在不应该的情况下抛出一个语法错误。我觉得它可能与package.json有关，但我尝试了不同版本的包，但没有产生积极的结果。

所有的教程似乎都是这样做的，或者说非常相似。

有什么想法吗？

Answer 1

如果您没有在您的type中指定模块的package.json，它将默认为CommonJS。在这种情况下，您不能使用import语法，您必须依赖require。

解决这一问题的方法有两种：

1. 将导入语法更改为使用require:

const { Given, When, Then } = require('@cucumber/cucumber');

1. 将模块类型更改为ES模块：

// package.json
{
  ...
  "type": "module",
  ...
}

请注意，在第二种情况下，如果您请求的模块是CommonJS模块，则它可能不支持命名导出，因此您必须回过头来使用以下语法：

import Cucumber from '@cucumber/cucumber';
const { Given, When, Then } = Cucumber;