WebStorm is unable to detect tsconfig paths

Currently, we are facing an issue with WebStorm identifying some of our named paths as problematic. Despite this, everything compiles correctly with webpack.

Here is how our project is structured:

apps
  app1
    tsconfig.e2e.json
    src
      tests
        testsuite1
          file.po.ts
libs
  lib1
    src
      index.ts
      libs

The content of our lib's index.ts file:

export * from './lib';

In the tsconfig.e2e.json file, these are the paths causing issues:

{
  "compilerOptions": {
    ...
    "paths": {
      "@a/lib1": ["../../libs/lib1/src"],
    }
  }
}

WebStorm is flagging the import in file.po.ts as not being found:

import { Mo } from '@a/lib1';

We have already activated TypeScript language service in WebStorm, and other similar imports are working fine. As newcomers to TypeScript and WebStorm, it is possible that we might be overlooking something essential.

typescriptintellij-ideaimportwebstorm

Answer №1

Don't forget to restart after adding a new path

I encountered the same issue; when I added a new path to my tsconfig.json file, I had to restart my Intellij IDEA in order for it to recognize the path in import statements.

"paths": {
  "@alias/*": ["folder/*"],
},

After restarting, the red underline disappeared from the path:

import { SomeFeatureModule } from '@alias/some-feature/some-feature.module';

Verify that the path is relative to the baseUrl

If this doesn't resolve the issue, try clicking on the alias to see if it is recognized; clicking should take you to the tsconfig.json file where the path alias is defined. Also make sure that the path takes into account the baseUrl property configured in the compilerOptions. The path should be relative to this base url.

For example:

"baseUrl": "src",

This means that in our previous example, the actual folder should be located at:

src/folder/*

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

I am experiencing import issues with ts-node/ts-jest and unable to import the necessary modules

I'm having trouble with a syntax error while trying to integrate mdast-util-from-markdown into my Jest tests for a TypeScript project. I am seeking a solution that does not involve using Babel. The code functions properly when using ts-node. Issue: ...

typescriptjestjsts-jestts-node

Is it possible to create a combined header/declaration file in Golang within a single file?

My goal is to automatically generate Golang declaration files based on .json data. While with TypeScript I can consolidate types/declarations in one file using namespaces, it seems more complex to achieve the same with Golang packages and namespacing. In ...

typescriptgo

While working on a project in React, I successfully implemented an async function to fetch data from an API. However, upon returning the data, I encountered an issue where it was displaying as a

I am working with React and TypeScript and have the following code snippet: const fetchData = async () => { const res: any = await fetch("https://api.spotify.com/v1/search?q=thoughtsofadyingatheist&type=track&limit=30", { met ...

javascriptreactjstypescriptasync-awaitfetch

Utilizing GroupBy in RxJs for an Observable of Objects数组

I am working with entries of type Observable<Event[]>, and they are structured as follows: [{ "_id": 1, "_title": "Test Event 1", "_startDate": "2019-05-29T07:20:00.000Z", "_endDate": "2019-05-29T08:00:00.000Z", "_isAllDay": false }, ...

javascripttypescriptrxjsobservable

React: Using useState and useEffect to dynamically gather a real-time collection of 10 items

When I type a keystroke, I want to retrieve 10 usernames. Currently, I only get a username back if it exactly matches a username in the jsonplaceholder list. For example, if I type "Karia", nothing shows up until I type "Karianne". What I'm looking f ...

javascriptreactjstypescriptreact-hooksuse-effect

Deleting a key from a type in TypeScript using subtraction type

I am looking to create a type in TypeScript called ExcludeCart<T>, which essentially removes a specified key (in this case, cart) from the given type T. For example, if we have ExcludeCart<{foo: number, bar: string, cart: number}>, it should re ...

reactjsgenericstypescriptdecoratorhigher-order-components

What is the proper way to import the Database class from BetterSqlite3 in a TypeScript project?

I am currently working on code that utilizes better-sqlite3 and my goal is to convert it to typescript. The original javascript code includes the following relevant sections: import Database from "better-sqlite3"; /** * @param {string} filenam ...

typescripttypescript-typings

What is the method for obtaining the return type based on the type of a generic function?

Within my api function, I utilize a parser function that is generic and typically returns the same type as its input. However, in some cases, this may be different for simplification purposes. When using the api function, I am able to determine the type t ...

typescripttypescript-generics

PrimeNG Template not showing the form

I have integrated a form into PrimeNG's turbotable to allow users to create a new entry (group) in the table located within the footer. However, the form is not being displayed as expected. Can you help me troubleshoot this issue? <ng-template pTe ...

angulartypescriptprimengangular-reactive-forms

What is the reason for TypeScript not providing warnings for unrealistic conditions involving 'typeof' and 'in'?

The recent updates in version 4.9 highlighted the enhanced narrowing with 'in'. Intrigued by this, I decided to experiment with their example in a coding playground. Surprisingly, I discovered that seemingly impossible conditions involving typeof ...

typescript

Compiling fails when creating an object literal with a generic key

I am attempting to accomplish the following task. function createRecord<T extends string>(key: T) : Record<T, T> { return {[key]: key}; // Type '{ [x: string]: T; }' is not assignable to type 'Record<T, T>' } Howe ...

typescript

Typescript's tree-pruning strategy design for optimization

I've been working on developing a library that enforces the use of specific strategies for each target. The current structure I have in place is as follows: [Application] -> contains -> [player] -> contains -> [renderer] In the current s ...

javascripttypescriptnpmwebpack

Executing Multiple Requests Concurrently in Angular 5 using forkJoin Technique

Important Note The issue lies in the backend, not Angular. The requests are correct. In my Angular5 app, I am trying to upload multiple files at once using rxjs forkJoin. I store the requests in an array as shown in the code below. However, after adding ...

javascriptangulartypescriptangular5

Encountering unusual results while utilizing interfaces with overloaded arguments

I came across a situation where TypeScript allows calling a method with the wrong type of argument. Why doesn't the TypeScript compiler flag this as an issue? interface IValue { add(value: IValue): IValue; } class NumberValue implements IValue { ...

typescript

Retrieving data from an API using VUEJS3 and Typescript

I am facing an issue with displaying data in my template. When I try to do so, the screen remains blank. I am using Vue.js 3 with TypeScript and I am fairly new to this technology. <template> <div> <img :src="datas[0].imag ...

typescriptvue.jsvuejs3

What is the proper way to structure a React component class without any props?

When working with Typescript in a React project, the top level component typically does not receive any props. What is the recommended approach for typing this scenario? I have been using the following coding structure as a template, but I am curious if t ...

reactjstypescript

Is there a workaround for the React useContext issue in Typescript aside from using <Partial>?

I am currently working on a React app that utilizes the useContext hook, but I am facing challenges with correctly typing my context. Here is the code snippet in question: import React, { useState, createContext } from 'react'; import endpoints f ...

reactjstypescriptreact-context

When the first argument is missing, using a recursive constraint default can result in the incorrect inference of the second argument, especially when both arguments share the same generic

Currently, I am developing a TypeScript implementation of a recursive binary search tree (BST) data structure using generic constraints. In order to establish a default for the recursive generic variable T without directly using it in the default declarati ...

typescript

The directive for angular digits only may still permit certain characters to be entered

During my exploration of implementing a digits-only directive, I came across a solution similar to my own on the internet: import { Directive, ElementRef, HostListener } from '@angular/core'; @Directive({ selector: '[appOnlyDigits]' ...

angulartypescript

Having trouble choosing the component-button using Protractor

I'm having trouble selecting the "Add New" button using any locator component. Check out the audience.po.ts file and the method "ClickAddNewBtn()": clickAddNewBtn() { console.log("Clicking on the Add New button."); return element(by.cs ...

javascriptangulartypescriptprotractor