Cannot find type definition file for '@wdio/globals/types'

Question

I am using webdriverio mocha framework with typescript. @wdio/cli": "^7.25.0" NodeJs v16.13.2 NPM V8.1.2

I am getting below error at tsconfig.json

JSON schema for the TypeScript compiler's configuration file

Cannot find type definition file for '@wdio/globals/types'.
  The file is in the program because:
    Entry point of type library '@wdio/globals/types' specified in compilerOptions

My tsconfig.json

{
    "compilerOptions": 
    {
        "moduleResolution": "node",
        "module": "CommonJS",
        "types": 
        [
            "node",
            "@wdio/globals/types",
            "expect-webdriverio",
            "@wdio/mocha-framework",
        ],
        "lib": 
        [
            "dom",
            "es7"
        ],
        "target": "es2022"
    }
}

My package.json

{
  "name": "mocha-template",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "scripts": 
  {
    "WDIO": "npx wdio run ./test/config/wdio.web.conf.ts"
  },
  "dependencies": {
    "@types/node": "^18.8.3",
    "@wdio/cli": "^7.25.0",
    "@wdio/junit-reporter": "^7.25.1",
    "@wdio/local-runner": "^7.25.1",
    "@wdio/mocha-framework": "^7.25.1",
    "@wdio/sauce-service": "^7.25.1",
    "@wdio/spec-reporter": "^7.25.1",
    "chai": "^4.3.6",
    "chai-http": "^4.3.0",
    "chromedriver": "^108.0.0",
    "deepmerge": "^4.2.2",
    "dotenv": "^16.0.3",
    "eslint": "^8.25.0",
    "eslint-plugin-mocha": "^10.1.0",
    "eslint-plugin-prettier": "^4.2.1",
    "fs-extra": "^10.1.0",
    "moment": "^2.29.4",
    "prettier": "^2.7.1",
    "ts-node": "^10.9.1",
    "typescript": "^4.8.4",
    "wdio-chromedriver-service": "^8.0.0",
    "wdio-video-reporter": "^3.2.3"
  }
}

I can able to run my tests but this error is more annoying. If I open any test file means it's showing error for browser and $ How can I resolve above issue

For $

Cannot find name '$'. Do you need to install type definitions for jQuery? Try `npm i --save-dev @types/jquery` and then add 'jquery' to the types field in your tsconfig.

For browser Cannot find name 'browser'.

Answer 1

There are no types @wdio/globals/types, you just use one from sync or async package. https://v7.webdriver.io/docs/typescript/#framework-setup

{
    "compilerOptions": {
        "types": ["node", "webdriverio/async"]
    }
}

Answer 2

The recommendations will change depending on the version of WebDriverIO you are using (and if you are using sync mode or async mode in version 7). Here is the setup you can use for both Version 7 and Version 8:

Version 7

Add the relevant snippet to your tsconfig.json. Version 7 docs here

Async

{
    "compilerOptions": {
        "types": ["node", "webdriverio/async"]
    }
}

Sync

{
    "compilerOptions": {
        "types": ["node", "webdriverio/sync"]
    }
}

Version 8

Add this snippet to your tsconfig: Version 8 docs here

{
    "compilerOptions": {
        "types": ["node", "@wdio/globals/types"]
    }
}

So maybe the reason you were having trouble is because you were trying to import the types for version 8 into your webdriver version 7 project.