Oiy-JS 단계 정의의 "오류: 모듈 외부에서 가져오기 문을 사용할 수 없습니다"(스크립트 포함)

Oiy-JS 단계 정의의 "오류: 모듈 외부에서 가져오기 문을 사용할 수 없습니다"(스크립트 포함)

다음 오류가 발생합니다:

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';
  });

내 폴더 구조는 다음과 같습니다:

오이.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
      }
    ]
  }
}

그리고 다음 패키지를 패키지에 추가했습니다.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"

따라서 기능 파일과 단계 정의가 인식되고 있지만 인식되지 않아야 할 때 구문 오류가 발생합니다. 나는 그것이 소포와 관련이 있을 것 같은 느낌이 든다.json 하지만 나는 여러 버전의 다양한 패키지를 시도했지만 긍정적인 결과는 없었다.

모든 튜토리얼이 이런 식으로 또는 비슷한 방식으로 진행되는 것 같습니다.

무슨 생각 있어요?

---

나에게 해결책은 다음과 같았다:

컴파일러 옵션 옵션이 아닌 ts-node 설정을 변경하면 프로젝트가 정상적으로 작동하고 오이 단계에서 commonjs 모듈을 사용할 수 있습니다.

---

에서 모듈을 지정하지 않은 경우 기본적으로 CommonJS로 설정됩니다. 이러한 맥락에서 구문을 사용할 수 없으며 의존해야 합니다.

이 문제를 해결하는 두 가지 방법이 있습니다:

1. require를 사용하도록 가져오기 구문을 변경합니다:

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

2. 모듈 유형을 ES 모듈로 변경합니다:

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

두 번째 경우, 요청하는 모듈이 공통인 경우JS 모듈. 명명된 내보내기를 지원하지 않을 수 있으므로 다음 구문으로 되돌아가야 합니다:

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