The folder creation in the 'outDir' directory by TSC continues to grow

Hello!

Currently, I am engaged in a small TypeScript project where I need to utilize two separate tsconfig.json files, both of which inherit from my main tsconfig.base.json file.

Unfortunately, I encountered an issue with the compiler creating unnecessary subfolders within the designated outDir, causing me some frustration.

Presented below is the content of my core tsconfig.base.json:

{
    "compilerOptions": {
      "target": "es6",
      "module": "commonjs",
      "resolveJsonModule": true,
      "lib": ["es6", "dom"],
      "esModuleInterop": true,
    },
    "exclude": [
      "node_modules"
    ]
}

Additionally, here is a snippet from the derived tsconfig.src.json:

{
    "extends": "./tsconfig.base.json",
    "compilerOptions": {
        "rootDirs": ["./src/ts", "."],
        "outDir": "./src/js/"
    },
    "exclude": [
        "page/**/*.ts",
        "tsconfig.page.json"
    ],
    "include": [
        "src/**/*.ts",
        "service_account.json"
    ],
}

The current structure of my project appears as follows:

.
+-- node_modules/
+-- src/
|    +-- js/ (desired compilation destination for TypeScript files)
|    +-- ts/ (location of all TypeScript files)
+-- tsconfig.base.json
+-- tsconfig.src.json
+-- service_account.json

When executing the build:backend script (

"build:backend": "tsc -p ./tsconfig.source.json"
), the compiler generates unwanted subfolders, resulting in the following project layout:

.
+-- node_modules/
+-- src/
|    +-- js/ 
|        +-- src/
|            +-- ts/ (unexpected location of compiled JavaScript files now)
|    +-- ts/ 
+-- tsconfig.base.json
+-- tsconfig.src.json
+-- service_account.json

If you have any insights on what could be causing this problem, your help would be greatly appreciated! Thank you in advance for your assistance!

Answer №1

Make sure to organize all your inputs in one folder and all the outputs in a separate folder that is not within the inputs directory.

Here's an example solution:

{
    "extends": "./tsconfig.base.json",
    "compilerOptions": {
        "rootDir": "/src/ts",
        "outDir": "./src/js"
    },
    "exclude": [
        "page/**/*.ts",
        "tsconfig.page.json"
    ]
}

Also, don't forget to move the service_account.json file into the src/ts directory as well.

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

Encapsulation of JSON data with variable declaration

After generating a json data using the PHP code below: $index = array(); foreach($rows as $row) { $row['data'] []= (object) []; $index[$row['cat_id']] = $row; } // build the tree foreach($index as $id => &$row) ...

Link Array with Google Charts

I've been struggling for a long time to connect this array to a Google chart with no success. I would really appreciate some assistance in identifying what mistake I've made. I have created a jsfiddle where the array appears to be correct, and wh ...

Issue: Unable to import certain modules when using the Typescript starter in ScreepsTroubleshooting: encountering

Having trouble with modules in the standard typescript starter when transferring to screeps. One issue is with the following code: import * as faker from 'faker'; export function creepNamer() { let randomName = faker.name.findName(); return ...

Using React, PIXI, and Zustand can sometimes lead to stale state issues when handling mouse events

I currently have a Pixi canvas that utilizes pointer handlers. Users are able to click on a point within a 'sequence' and move it. Recently, I came across an issue with the mouse handlers having stale state. To resolve this, I began recreating t ...

Ensure that compiler errors are eliminated for object properties that do not exist

Coming from a JavaScript background, I recently began working with Angular 2 and TypeScript. Below is a snippet of my code: export class AddunitsComponent implements OnInit { public centers:any; constructor(){ this.centers = {}; }} In my view, I h ...

What is the best way to determine if several simultaneous tasks have been completed?

Implementing multiple parallel actions in an Angular component has proven to be challenging for me. Following each action (foo), I subscribe to its result. I've been attempting to determine if any actions are currently running or have completed using ...

Establishing the request body for RESTful web services utilizing the POST technique

Hey there, I'm currently working on creating a REST response using the POST method. I want to pass variables dynamically instead of hardcoding them. However, I am encountering an issue when trying to send an array as a parameter to the REST web servic ...

The process of running npx create-react-app with a specific name suddenly halts at a particular stage

Throughout my experience, I have never encountered this particular issue with the reliable old create-react-app However, on this occasion, I decided to use npx create-react-app to initiate a new react app. Below is a screenshot depicting the progress o ...

The specified "ID" type variable "$userId" is being utilized in a positional context that is anticipating a "non-null ID" type

When attempting to execute a GraphQL request using the npm package graphql-request, I am exploring the use of template literals. async getCandidate(userId: number) { const query = gql` query($userId: ID){ candidate( ...

Extract data from JSON fields and assign them to variables

I am attempting to extract specific fields from a JSON response received from an API query. Here is a sample JSON: { "_id":"611a7b651571d300074b9875", "Details":{ "Source":{ "Type":&qu ...

An issue occurred while trying to use a function that has a return type of NextPage

After successfully implementing the code below: const HomePage: NextPage = () => ( <div> <div>HomePage</div> </div> ); I wanted to adhere to Airbnb's style guide, which required using a named function. This led me t ...

Is React Spring failing to trigger animations properly on iOS devices?

I have a code that functions perfectly on my desktop and across all browsers. Each button is designed to trigger a 4-second animation upon load or hover, initiating the playback of various videos. However, there's an issue with iOS where the video or ...

End the pipeline execution in a chain of RxJS observables

Here is a scenario where a series of Observables are chained together. Is it possible to prevent the subsequent chain from executing if an error is thrown by 'parentObs1'? import { throwError } from "rxjs"; import { mergeMap, catchError ...

Sending a JavaScript function as part of an ajax response

I'm currently working on a system where the user can submit a form through AJAX and receive a callback in response. The process involves the server processing the form data and returning both an error message and a JavaScript function that can perform ...

The Json parsing failed to deserialize the API response

Struggling to send a JSON to my API, I've tried various solutions but still can't figure out what's going wrong. I'm stuck on this post call function: @PostMapping(path = "ts/sts") public void saveTestStep(@RequestBody Tes ...

Handle the Axios response for a POST request, specifically capturing the JSON data when a 400 (Bad Request) error

When making an http request in an api using React Native with Axios, I am able to retrieve and parse json data when the callback is 200. However, in cases where I call a method - such as registering a user with an email that is already registered - I recei ...

Utilizing the moment function within an Angular application

I've successfully added the library moment.js by running: npm i moment I've included it in scripts and attempted to import it in module.ts. However, when I try to use moment in component.ts, I'm getting an error that says: 'canno ...

Launching React Native in Visual Studio Code: launchReactNative.js

Struggling to get visual studio code to create the launchReactNative.js file in the ./vscode directory. I've been attempting to configure a react-native project with typescript on visual studio code to debug typescript files, but all my efforts have ...

Generate a JSON array with a unique format using jq

Here is a sample JSON data (this is just a test database, no actual data) { "pguid": "4EA979A2-E578-4DA3-89DB-24082F3092AA", "lastEnrollTguid": "EA98B161-04D3-4F0A-920A-58DBFF3C2274", "timestamp": 101 ...

Updating subdata in an array using Reactjs handleChange

I am facing an issue with my handleChange function. While I can easily change data in the same directory without any problem, I'm struggling to update sub-data. I would like to find a clean solution for this without having to add extra functions withi ...