WebStorm failing to recognize index.ts files when used in imports

My project setup involves the use of Webpack and I have set up aliases for different directories:

alias {
    shared/common: path.join(__dirname, 'src/main/js/publish/shared/common')
    app/common: path.join(__dirname, 'src/main/js/publish/app/common')
}

In some files, I need to import various modules from a single barrel:

import { Comp1, Comp5, Comp7 } from 'shared/common/components';

To make this work, I created an index.ts file inside shared/common/components:

import { Comp1 } from '.comp1/comp1.comp';
import { Comp2 } from '.comp2/comp2.comp';
import { Comp3 } from '.comp3/comp3.comp';
....
import { CompN } from '.compN/compN.comp';

export {
    Comp1,
    Comp2,
    Comp3,
    ...
    CompN
}

Even though it compiles without errors, WebStorm shows an error in the initial import stating that it cannot resolve all symbols.

I've attempted to mark src/main/js/publish as Resource Root, which contains shared and app directories, but it doesn't solve the issue.

Changing the import to include 'index.ts' works fine:

import { Comp1, Comp5, Comp7 } from 'shared/common/components/index.ts';

Is there a way for WebStorm to recognize index.ts files without explicitly including them in imports?

Answer №1

It was highlighted by @anstarovoyt in a comment that the issue was resolved upon upgrading to WS2016.2.

Therefore, it appears that the only choices are to either upgrade your WebStorm or continue specifying the extension in the imports:

import { Comp1, Comp5, Comp7 } from 'shared/common/components/index.ts';

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

Setting up Proguard with the IntelliJ IDEA 12: A step-by-step guide

I'm currently attempting to set up Proguard for an Android app in IntelliJ IDEA 12. The issue I'm encountering is that by default, IntelliJ treats all my library projects as injars, and I have been unable to find a way to modify this behavior. T ...

Angular2 bootstrapping of multiple components

My query pertains to the following issue raised on Stack Overflow: Error when bootstrapping multiple angular2 modules In my index.html, I have included the code snippet below: <app-header>Loading header...</app-header> <app-root>L ...

Utilizing Regular Expressions in Angular 4 by Referencing Patterns Stored in an Object

I'm facing an issue where my code is functional, but I keep encountering a Tslint error that's proving difficult to resolve. This particular configuration worked fine with Angular 1, but now I'm in the process of migrating the application to ...

Is it possible in Typescript to reference type variables within another type variable?

Currently, I am working with two generic types - Client<T> and MockClient<T>. Now, I want to introduce a third generic type called Mocked<C extends Client>. This new type should be a specialized version of MockClient that corresponds to a ...

Having trouble importing components from the module generated by Angular CLI library

After creating a simple Angular library using CLI with the command ng g library <library-name>, I encountered an issue while trying to import a component from its module. In my app module, I added components.module to the imports array and attempted ...

Using Angular 6 to render an HTML tag using the ngFor directive and incorporating interpolation

I am facing a challenge with template rendering in Angular 6 and a library for creating floating panels called jsPanel 6, which is written in plain JavaScript. Essentially: After my template is rendered, I have a BUTTON that triggers the following functio ...

The listener for the 'scan' event in the Instascan QR Code scanner does not update the view of an Angular 5 component

I've integrated Instascan (https://github.com/schmich/instascan) into my Angular 5 application to enable users to scan QR Codes. Upon successful scanning, I need to perform certain actions and update the view of my component accordingly. Within my c ...

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

Displaying a horizontal scroll bar for legends in ECharts can be achieved by limiting the legend to three lines. If the legend items exceed this limit, they will scroll horizontally to accommodate all items

I am currently utilizing ECharts to display trend data in a line chart format. With 50 different series to showcase, each series comes with its own legend. My objective is to arrange the legends at the top of the chart, while limiting them to a maximum of ...

Troubleshooting a Missing Angular (8) Pipe Error in Your Ionic 4 Application

Despite seeing similar questions posted here, none have provided a solution to my issue. I believe I am implementing it correctly, but clearly something is not right. In the app I'm developing with Ionic 4, I need to add a key to a URL in a gallery. ...

Enhance your images with the Tiptap extension for customizable captions

click here for image description I am looking to include an image along with an editable caption using the tiptap extension Check out this link for more information I found a great example with ProseMirror, but I'm wondering if it's possible ...

Issue when rendering <options> while looping through country object in the country list

To retrieve a list of all countries in my React project written in TypeScript, I am utilizing the countries-list library which can be found here. My intention is to create a <Form> that includes a <Select> dropdown menu populated with the coun ...

Include element in SweetAlert

Is there a way to add a component in a SweetAlert popup while using Angular 6? I attempted the following method but the component is not rendering: Swal({ type: 'warning', title: this.translate.instant('agents'), text: thi ...

Show the values in the second dropdown menu according to the selection made in the first dropdown menu using Angular 8

My goal is to retrieve data and populate two dropdowns based on user selection. However, the code I've written isn't giving me the desired output and instead, errors are occurring. Being new to Angular, I would appreciate a review of my code. Her ...

Tips for displaying an associative object array as td elements within a tbody in Nuxt

I'm having trouble displaying the property of an associative object array in my code. I attempted to utilize a v-for loop and wanted to showcase the property information within the td elements of a tbody. I am aware that v-data-table components have a ...

Error message when using Typescript with Redux Saga: "Cannot use 'then' property on type 'void'. TS2339"

Whenever I attempt to fetch data from this API endpoint using promises, I encounter these type of issues. export function* signUpWithEmail(authInfo: any) { const { email, password } = authInfo.payload try { const response = yield authSignUpService ...

Enhance Graphql Queries with TypeOrm using Dynamic Filters

I am currently working on building a graphQL query system using Apollo, typescript, and TypeOrm. At the moment, I only have one table called users in my database. I am creating a getUsers GraphQL query which retrieves all users from the table. With the hel ...

Upon initialization, Angular's BehaviorSubject is encountered as undefined

I am in the process of trying to create a fresh BehaviorSubject that is of the type ICar (which I have defined) in a service, with the initial value being either null or undefined. However, when I attempt to change the type to ICar | undefined, I encounter ...

What is the method to create a universal type by utilizing attributes from a different type?

In building a type, I aim to create one that can accept the type of another object and generate a different type based on specific properties in that object. Illustrating this concept through code: // Definition representing the types of inputs shown on UI ...

Jest doesn't seem to be triggering fs.createReadStream as expected

I've been using fs.createReadStream to read files and have encountered a strange issue. When I run the function from the file itself, it works perfectly fine and triggers the events (data, end). However, when I attempt to call the function in order to ...