SyntaxError: Unexpected token { - Error when converting WebDriverio project to Typrscript

Question

I am trying to convert my webdriver.io + cucumber project to Typescript by following https://webdriver.io/docs/typescript.html and getting the error message "Unexpected toke { ". I am using WebDriver.io + TypeScript + Cucumber.

In wdio.conf.js, I have the cucumberOpts as below

cucumberOpts: {
    requireModule: [
            'tsconfig-paths/register',
        () => { require('ts-node').register({files: true}) },
    ],
    require: ['./src/step_definitions/*.ts'],
    backtrace: false,   
    requireModule: [],
    dryRun: false,      
    failFast: false,    
    format: ['pretty'], 
    colors: true,       
    snippets: true,     
    source: true,       
    profile: [],        
    strict: false,      
    tags: [],           
    timeout: 60000,     
    ignoreUndefinedDefinitions: false,
},

And my tsconfig.json looks like below

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "removeComments": true,
    "noImplicitAny": false,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
        "*": [ "./*" ],
        "src/*": ["./src/*"]
    },
    "types": ["node", "@wdio/sync","jest"]
  },

  "include": [
      "./src/**/*"
  ]
}

and my folder structure is as below

src/features/
src/step_definitions
src/pageObjects

And my Step definition has below as first statement

step.ts

import { Given, When, Then } from "cucumber";

Package.json

"scripts": {
    "test":"./node_modules/.bin/wdio wdio.conf.js"
  },

When I run my tests, I am getting the error message " SyntaxError: Unexpected token {" on the above first line in my step.ts.

How do I fix this error.

Answer 1

I got it working by compiling the Typescript files to Javascript files And then providing the location of Javascript files in the cucumberOpts => require