Having trouble with WebStorm loading a specific tsconfig.json file?

I'm working on a project with the latest version of WebStorm 2020.3.1 and have multiple tsconfig.json files, but I only want automatic re-compilation for one of them. I've configured everything as shown below.

Interestingly, when I run tsc -p ./tsconfig-electron.json, it works perfectly.

What could be causing the issue here?

https://i.sstatic.net/L8mo6.png

tsconfig-electron.json:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "sourceMap": true,
        "outDir": "electron-dist",
        "rootDir": "electron-src",
        "removeComments": true,
        "strict": true
    },
    "exclude": [
        "node_modules",
        "dist",
        "src",
        "e2e"
    ],
    "declaration": true
}
typescriptwebstorm

Answer №1

When compiling in the IDE, the closest tsconfig.*.json file that the current file is included in is used, searching through the folders hierarchy from the current folder up to the IDE project root. To change the list of known tsconfig*.json name patterns, go to Settings | Editor | File Types, TypeScript Config.

Any options set in Settings | Languages & Frameworks | TypeScript, Options: will be disregarded if there are tsconfig.*.json files in the project, preventing you from passing a custom configuration file to the IDE through this field.

For a related feature request, visit: WEB-21414

Answer №2

While my issue had a unique twist, perhaps my experience can be helpful to others who stumble upon this page.

To get straight to the point:

The concept of the "nearest tsconfig.json" that is often mentioned, particularly the term "nearest," does not necessarily mean the tsconfig.json file at the same level but rather at a higher parent level.

In my situation, IntelliJ was having trouble identifying the correct file for `sub-module/subModule.ts` within the `sub-module/tsconfig.json`. Here is the directory structure:

<root>/
  - tsconfig.json
  - src/
    ...(regular project stuff)
  - sub-module/
    - subModule.ts
    - tsconfig.json

It took me some time to uncover this issue, as it was not explicitly stated in any documentation or comments. The solution involved moving `subModule.ts` and related files into another subfolder so they were positioned one level lower relative to the tsconfig.json file.

Solution:

<root>/
  - tsconfig.json
  - src/
    ...(regular project stuff)
  - sub-module/
    - src/
      - subModule.ts
    - tsconfig.json

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

Retrieving values from objects using Typescript

I am facing an issue while trying to retrieve a value from an object. The key I need to use belongs to another object. Screenshot 1 Screenshot 2 However, when working with Typescript, I encounter the following error message. Error in Visual Studio Is ...

typescriptvue.js

I want to modify a class in Angular 8 by selecting an element using its ID and adjust the styling of a div

Is it possible to dynamically add and remove classes using getElementById in Angular 8? I need to switch from 'col-md-12' to 'col-md-6' when a user clicks on the details icon. I also want to modify the style of another div by setting d ...

angulartypescriptangular8

Is it necessary to declare parameters for the super class constructor in Typescript React? If so, what would those parameters be?

I'm struggling to understand the specifics of the constructor in this code. Can anyone clarify what arguments the constructor for super() and constructor() should have? import * as React from "react"; import styles from "./ScriptEditor.module.scss"; ...

reactjstypescriptsharepoint-2010web-partssuper

The property 1 cannot be added because the object is not extendable in React

Does anyone know what is causing the following issue? I am unable to insert a new object into a key object within my arrays of objects. For example, when I try to insert a new email at index 1 in the 'emails' array, it throws an error stating "ca ...

javascriptreactjstypescript

Encountering an HTTP parsing failure while sending XML through Angular 5's HttpClient

Struggling to access a local webservice through XML: Take a look at the code below: const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'text/xml', 'Accept': 'text/xml', 'Response- ...

javascriptxmlangulartypescript

Using TypeScript with Redux for Form Validation in FieldArray

My first time implementing a FieldArray from redux-form has been quite a learning experience. The UI functions properly, but there seems to be some performance issues that I need to investigate further. Basically, the concept is to click an ADD button to i ...

reactjstypescriptvalidationreduxredux-form

Issue in Typescript: The type 'RegExpMatchArray' cannot be assigned to a parameter of type 'string'

Here is the code snippet I am working with: import { persistState } from 'redux-devtools'; const enhancer = compose( applyMiddleware(thunk, router, logger), DevTools.instrument(), persistState( window.location.href.match(/[?&]debu ...

typescriptvisual-studio-codetypescript1.8typescript-typings

Can we specify the type of a destructured prop when passing it as an argument?

I have implemented Material UI's FixedSizeList which requires rendering rows in the renderRow function and passing it as a child to the component. The renderRow function accepts (index, style, data, scrolling) as arguments from the FixedSizeList comp ...

reactjstypescriptcastingmaterial-ui

Issue: "contains method is not supported" in Ionic 2

I'm currently working on a code to validate the contents of my input field, but I've encountered an issue with using the contains function. Here's the TypeScript function I have written: checkFnameFunction(name){ if(name.contains("[a-z ...

stringvalidationtypescriptionic2contains

What is the best way to implement a counter with setInterval in Angular?

As a beginner in Angular, I am trying to utilize the setInterval function to count numbers, but I am facing difficulties in achieving success. Can someone provide assistance with this issue? (Apologies for any grammar mistakes in my English.) Thank you in ...

arraysangulartypescriptsetintervalclearinterval

A step-by-step guide on configuring data for aria's autocomplete feature

Currently, I am implementing aria autocomplete and facing an issue while trying to populate data from the server into the selection of aria autocomplete. I have tried setting the selected property of the aria autocomplete object, but it doesn't seem t ...

javascriptphpjsontypescriptselect

Using Angular2 in conjunction with the simpleheat plugin

I've been attempting to integrate the NPM plugin Simpleheat () into my Angular2 app, but unfortunately, the heatmap is not rendering even though everything appears to be set up correctly. You can find the full repository with the issue here: https:// ...

javascriptangulartypescript

Can you identify the type of component that is returned from the withStyles() function?

My project includes a simple Dictionary component with basic properties: interface DictionaryProps { word: string; } In another component's props, I am looking for a generic component that only requires a string word: dictionary: React.ComponentC ...

reactjstypescriptmaterial-uireact-componentjss

What is the best way to determine the appropriate generic type for this situation?

Here is an example of some code: type secondaryObjectConstraint = { [key: string]: number } abstract class Base<TObject extends object, TSecondaryObject extends secondaryObjectConstraint> {} type secondaryObjectType = { myProp: number } c ...

typescript

What is the reason for the removal of the `?` decorator in this mapped type? Are there alternative methods to achieve a similar outcome without eliminating it

Challenge In the process of creating a mapped type that excludes properties of type Function, we encountered an issue. Our current method not only eliminates functions but also strips away the optional decorator (?) from the mapped properties. Scenario ...

typescripttypesmapped-types

Moving from Http to HttpClient in Angular4Changeover your Angular4

I recently migrated my Angular app to use the new HttpClient, but I'm encountering some challenges in achieving the same results as before with Http. Can anyone help me out? Here's what I was doing with Http: getAll() { return this.http.get ...

angulartypescriptangular4-httpclient

Tips for bundling a substantial Typescript framework using Webpack

In my endeavor to construct a TypeScript framework and bundle it using Webpack, I have encountered a perplexing issue. The problem lies in determining the appropriate "entry point" - setting it to all files results in only the final built file being access ...

typescriptnpmwebpack

How can I configure Material-UI's textfield to return a numerical value instead of a string when the type is set to "number"?

Utilizing Material-UI's TextField alongside react-hook-form to monitor inputs has raised an issue for me. I have observed that regardless of the input type, it always returns a string. This creates conflicts with the data types I am using in my codeba ...

typescriptmaterial-uitextfieldreact-hook-form

Conceal or remove disabled years in Angular Material datepicker

I previously disabled years prior to 2018, but now I would like to hide or delete them. The year selection range currently starts from 1998, but it should begin at 2018 instead. Is there a way to display only 3-4 years instead of the current 24-year rang ...

javascriptangulartypescriptangular-materialdatepicker

Encountered an error during npm installation: Fetch Package Metadata error occurred while attempting to request from http://registry.npmjs.org/concurrently, the cause being a socket hangup

I am encountering the following errors: "An unexpected fetchPackageMetaData error occurred while making a request to http://registry.npmjs.org/concurrently failed due to a socket hang up." I am currently connected through a corporate proxy with the firew ...

node.jsangulartypescriptsocketsnpm