The tsconfig.json file is located separate from the project directory

Working on my project called "portal" has been quite an interesting journey. As I delved deeper into development, I realized the need for multiple projects within the repository. This led me to restructure my project setup like this:

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

A question popped up in my mind - is it feasible to place the "tsconfig.json" file outside both the "portal" and "shop" directories so that TypeScript compiler options can be applied across all projects? When I tried running 'npm run serve' on the portal project, an error message made its way onto my screen:

Error: Cannot find "C:\Git\ui\portal\tsconfig.json" file. Please check webpack and ForkTsCheckerWebpackPlugin configuration. 
Possible errors: 
  - wrong `context` directory in webpack configuration (if `tsconfig` is not set or is a relative path in fork plugin configuration)
  - wrong `tsconfig` path in fork plugin configuration (should be a relative or absolute path)

This error left me puzzled because nowhere in my codebase had I defined such a filepath.

The "tsconfig.json" file contains the following configurations:

{
 "compilerOptions": {
"target": "ES2020",
"module": "ESNext",
"strict": true,
...
 },
 "include": [
  "portal/src/**/*.ts",
  "portal/src/**/*.tsx",
   "portal/src/**/*.vue"
 ],
 "exclude": [
 "node_modules"
 ]
}

Answer №1

For the best results, maintain your current tsconfig.json file and then generate a new tsconfig.json in every directory with the given specifications:

{
    "extends": "../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

Power up your web development with the dynamic combination of .NET Core, Vue

I'm currently attempting to utilize the following package: https://github.com/IntelliTect/Coalesce.Vue.Template Within the section titled Creating a new Coalesce project using the template, it instructs: Run dotnet coalesce to trigger Coalesce&apos ...

Enhancing DOM Elements in a React Application Using TypeScript and Styled-Components with Click Event

I've been working on an app using React, Typescript, and styled components (still a beginner with typescript and styled components). I'm trying to create a simple click event that toggles between which of the two child components is visible insid ...

What could be the reason for the malfunctioning transition effect in my slider animation?

Having trouble getting my slider animation to work. I've tried different CSS styles but the slide transition is not functioning as expected. When one of the buttons is clicked, I want the slide to change from right to left or left to right. Can anyone ...

using the information from the child array within a v-if condition

I'm struggling to extract data from a child array and utilize it in my v-if condition. Below are my data and code. Any assistance would be appreciated, even if it's just pointers to the right documentation. <div class='post' v-for= ...

What are the steps to manually activate input validation in Angular 2?

Having two inputs is the scenario here: The first input undergoes custom validator application The second input has a dynamic and editable value utilized in the custom validator If the custom validator is applied on the first input, then focus shifts to ...

Unlock the potential of Power BI with this step-by-step guide on enhancing the Circle Card visual by incorporating unique formatting

Power BI Tutorial: Adding Formatting Options to the Circle Card Visual After completing step 8, I copied the code into my VS Code and encountered 2 error messages: Error message: "import VisualSettings - Module '"./settings"' has no e ...

ESLint has detected an unexpected use of an underscore in the variable name "__place". Avoid using dangling underscores in variable names to follow best coding practices

I received the JSON response shown below. To validate the _place, I used responseData.search[0].edges[0].node._place { "data": { "search": [ { "_place": "SearchResultItemConnection", "edges": [ { "cursor": ...

What strategies can be employed to improve generic inference skills?

Looking at the scenario provided below, how can we enhance code reusability in a manner similar to foobarA? interface F<T, U extends string> { t: T, f: (u: U) => void } declare const foo: <T, U extends string>(type: U) => F<T, U>; ...

Exploring the power of makeStyles in Material UI when combined with TypeScript

I am currently in the process of converting a JavaScript template to Typescript. Here is an example of my accordionStyle.ts file: import { primaryColor, grayColor } from "../../material-dashboard-pro-react"; const accordionStyle = (theme?:an ...

Adding data to an array from a JSON source using Angular 5

When I receive a response from an endpoint, it looks like this: { "data": [{ "volume": 4.889999866485596, "name": "Carton03", "weight": 5.75, "storage": 3 }, { "volume": 2.6500000953674316, "name": "Carton02", "weight": 4.5 ...

Having trouble retrieving data property in Vue 3: Error thrown (in promise) TypeError: Unable to access properties of undefined (reading 'variablename')

export default { data() { return { results: [], }; }, methods: { getData() { fetch("http://rb.test/api/posts/all") .then(function (response) { if (response.ok) { return response.json(); ...

Looking to showcase a .tif image in your Angular project?

This code is functioning properly for .png images. getNextImage(imageObj:{imageName:string,cityImageId:number,imgNumber:number}):void{ this.imgNumber= imageObj.imgNumber; this.imagePath=`assets/images/${imageObj.imageName}.png`; this.cityIma ...

Issue with validation in Vue using vue-signature-pad was encountered

Greetings! As a newcomer, I humbly present my first question, so please be gentle. Prior to reaching out with this query, I scoured every corner in search of a solution but unfortunately came up empty-handed. In Vue with Vuetify, I've crafted a strai ...

Converting ASP .Net Core Dto's and Controllers into TypeScript classes and interfaces

My concept involves incorporating two key elements: Converting C# Dto's (Data-transfer-objects) into TypeScript interfaces to ensure synchronization between client-side models and server-side. Transforming ASP .Net Core controller endpoints into Typ ...

Using TypeScript to apply a typed decorator function to a subclass

I've taken on the challenge of creating a node.js and MongoDB ORM library similar to "Entity Framework" using TypeScript. This library will allow users to define a Model class (e.g. Person) that extends a Base class. The class decorator will enhance ...

Retrieve the radio button value without using a key when submitting a form in JSON

Looking to extract the value upon form submission in Angular, here is the code: In my Typescript: constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController, public formBuilder: FormBuilder, public alertCtrl ...

Exploring the Potential of CSS Styling within Vue.js

I am in the process of creating a website and I am looking for a way to manage my styles through Vue. I want to be able to utilize CSS with Vue, as the style of .skill-bar serves as the background of the bar, while .skill-bar-fill represents the green fil ...

Updating the values of parent components in Vue.js 3 has been discovered to not function properly with composite API

Here is a Vue component I have created using PrimeVue: <template lang="pug"> Dialog(:visible="dShow" :modal="true" :draggable="false" header="My Dialog" :style="{ width: '50vw' }" ...

Unable to navigate to a page called "meeting" in NextJS 13 due to issues with router.push not functioning correctly

import { Input, Button } from '@nextui-org/react'; import router from 'next/router'; import { SetStateAction, useEffect, useState } from 'react'; const SignIn = () => { const [errorMessage, setErrorMessage] ...

Angular - failure to detect function execution by spy

I've been trying to test a feature module, but I'm facing some difficulties. The last test is failing because the spy isn't detecting that the method is being called, even when I move the this.translate.use(this.currentLanguage.i18n) call ou ...