The type definition file for '@wdio/globals/types' is nowhere to be found

I'm currently utilizing the webdriverio mocha framework with typescript. @wdio/cli": "^7.25.0" NodeJs v16.13.2 NPM V8.1.2

Encountering the following error in 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": {...}

Managing to execute my tests, yet bothered by this persisting error message. Whenever I open a test file, errors show up for browser and $. How can I tackle this issue?

Regarding $

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'.

typescriptwebdriver-iowdio

Answer №1

Depending on the version of WebDriverIO that you are using, the recommendations for setup may vary (especially if you are utilizing sync mode or async mode in Version 7). Here is how you can set it up for both Version 7 and Version 8:

Version 7

Include the appropriate snippet in your tsconfig.json. Check out the Version 7 documentation here

Async

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

Sync

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

Version 8

Insert this snippet into your tsconfig file: Read through the Version 8 documentation here

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

If you were experiencing issues, it could be because you were attempting to import the types for Version 8 into your Version 7 project.

Answer №2

Instead of using the @wdio/globals/types types, you can simply choose one from either the sync or async package. For more information on setting up the framework, you can visit 

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

Answer №3

    {
  "compilerOptions": {
    "outDir": "./dist/wdio",
    "target": "ESNext",
    "module": "CommonJS",
    "removeComments": true,
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "types": ["node", "@wdio/globals/types", "@wdio/allure-reporter", "expect-webdriverio", "@wdio/jasmine-framework", "@wdio/devtools-service","axios","jasmine"],
    "resolveJsonModule": true,
    "lib": ["es2018", "dom", "dom.iterable", "ESNext"],
    "allowSyntheticDefaultImports": true,
  },
  "include": ["./src/TestComponents/*.ts", "./index.ts"]
}

By mistake, I added typeRoots in my tsconfig.json file which caused an issue with locating type definitions.

To resolve the error, all I had to do was remove the typeRoots setting and the error disappeared.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to containerize my basic typescript web application

Attempting to launch a Typescript project in Docker has been quite the challenge for me. I followed a tutorial to create the Docker file but upon execution, I encountered this error message: /usr/local/bin/docker-entrypoint.sh: 8: exec: .: Permission den ...

node.jstypescriptdockerexpress

Exploring the concept of asynchronous subscriptions in Angular

My current issue seems to be related to asynchronous programming, specifically with the subscription not running at the desired time. I typically approach this problem from both the user's and developer's perspectives. User's Perspective: ...

angulartypescriptasynchronous

Dynamically loading components within an Angular application

I am tasked with displaying different components at specific times by iterating through them. Below is an example of how I have attempted to achieve this. The components I can use are determined by the server. <ngb-tabset [activeId]="1"> ...

javascriptangulartypescriptangular-material

Performing operations on information within a map function

While using toLocaleString within this map, I encountered an issue where only one of the payment.amount's returned formatted as currency. {props.paymentDates.map((payment, index) => ( <tr key={"payment-" + index}> <td>{i ...

reactjstypescript

I need to explicitly tell TypeScript that there are optional numeric properties on two objects that need to be compared

I am faced with the challenge of sorting an array of objects based on an optional integer property called order, which falls within the range of [0, n]. To achieve this task, I am utilizing JavaScript's Array.prototype.sort() method. Given that the p ...

typescript

Using getters in a template can activate the Angular change detection cycle

When using getters inside templates, it seems that Angular's change detection can get stuck in a loop with the getter being called multiple times. Despite researching similar issues, I have not been able to find a clear solution. Background info: I ...

angulartypescriptloopsangular6angular-changedetection

Implementing Immer in Typescript

Recently, I've been exploring the possibility of integrating Immer into my React project that already utilizes Typescript. Unfortunately, I haven't been able to discover a clear guide on how to effectively employ Immer in conjunction with Typescr ...

reactjstypescript

The requested module cannot be located, were you referring to "js" instead?

I am currently developing a React application using webpack and typescript. I have integrated the dependency react-financial-charts into my project, and it is properly specified in the package.json. Inside the node_modules directory, there are two folders ...

javascriptreactjstypescriptwebpackwebpack-dev-server

A Typescript type that verifies whether a provided key, when used in an object, resolves to an array

I have a theoretical question regarding creating an input type that checks if a specific enum key, when passed as a key to an object, resolves to an array. Allow me to illustrate this with an example: enum FormKeys { x = "x", y = "y&q ...

typescript

Accessing an external API through a tRPC endpoint (tRPC Promise is resolved before processing is complete)

I want to utilize OpenAI's API within my Next.js + tRPC application. It appears that my front-end is proceeding without waiting for the back-end to finish the API request, resulting in an error due to the response still being undefined. Below is my e ...

reactjstypescriptnext.jstrpc.io

Retrieve the values of a dynamic JSON object and convert them into a comma-separated string using Typescript

I recently encountered a dynamic JSON object: { "SMSPhone": [ "SMS Phone Number is not valid" ], "VoicePhone": [ "Voice Phone Number is not valid" ] } My goal is to extract the va ...

angulartypescript

Issues with applying different styles in a React Component based on prop values are hindering the desired outcome

I am currently working on a Display component that is supposed to show an item. The item should be styled with the css property text-decoration-line, applying line-through when the Available prop is set to false, and no decoration when set to true. Howev ...

javascriptreactjstypescriptreact-props

The error message ``TypeError [ERR_UNKNOWN_FILE_EXTENSION]:`` indicates a

I am encountering an error while trying to run the command ./bitgo-express --port 3080 --env test --bind localhost: (node:367854) ExperimentalWarning: The ESM module loader is experimental. internal/process/esm_loader.js:90 internalBinding('errors ...

node.jstypescriptexpressts-node

The Power of TypeScript's Union Types

Provided: Reducer only accepts one of the following actions: interface ItemAction { type: 'ADD_TODO'|'DELETE_TODO'|'TOGGLE_TODO', id: number } interface QueryAction { type: 'SET_QUERY', query: string ...

typescript

What is the most effective way to determine the data type of a value associated with a key in an interface?

In my TypeScript interface, I have defined the following structure: MyInterface { 'key1': number | string; 'key2': string; 'key3': SomeOtherInterface; } I am looking to create a new type that utilizes the properties of ...

typescript

What exactly does the use of type assertion as any in Typescript entail?

I'm attempting to dissect a portion of code and figure out its functionality. While I've encountered type assertion before, this particular example is proving to be quite baffling for me. (this.whatever as any).something([]); Here's the la ...

reactjstypescriptcastingreact-reduxassertion

The project graph creation for NX has encountered a setback and was unable to be completed. The worker has halted with exit

I've encountered an issue with my Angular project while using nx. Upon running npm install, I received the following error: > NX Nx Daemon was not able to compute the project graph. Log file with the error: ...\node_modules\.cache ...

angulartypescriptnomachine-nx

Building a custom CellRenderer in AGGrid using TypeScript within a React environment

Currently, I am utilizing React along with TypeScript and attempting to create a custom CellRenderer in AGGrid. My code is structured like this: PriorityCellRenderer.tsx import React from 'react'; function PriorityCellRenderer(props:any) { co ...

reactjstypescriptag-gridag-grid-react

Unable to locate the module '@vitejs/plugin-react' or its associated type

After creating the project with npm create vite@latest and selecting ts-react, everything seemed to work fine when I ran npm run dev. However, in my vs code editor, I encountered the error message "Cannot find module '@vitejs/plugin-react' or its ...

typescriptvite

Ways to pass functions as properties to a React custom modal?

I'm currently working on a React login page setup. The login functionality is embedded in a Modal using the React-Modal library. When a user presses the login button, data is supposed to be sent to a Custom Modal as props to display a notification win ...

reactjstypescriptreduxreact-propsreact-modal