What is the best way to set up the typeRoots option for proper configuration

I have a unique yarn monorepo structure that is oddly shaped. Here's how it's set up:

monorepo root
├── frontend
│   ├── dashboard <-- not managed by yarn workspaces
│   |   ├── src
│   |   ├── node_modules
│   |   ├── tsconfig.json
├── node_modules <-- hoisted by yarn
├── packages
│   ├── another typescript project <-- included in yarn workspaces
│   |   ├── tsconfig.json
│   |   ├── node_modules

All the tsconfig.json files are configured with this setting:

compilerOptions: {
  "typeRoots": [
     "./node_modules/@types/"
   ]
}

In addition, the exclude property is also specified as follows:

"exclude": [
    "node_modules/**/*",
    "../../node_modules/**/*"
  ]

After running tsc within frontend/dashboard, I encounter the following error:

node_modules/@types/react/index.d.ts:3088:14 - error TS2300: Duplicate identifier 'LibraryManagedAttributes'.

3088         type LibraryManagedAttributes<C, P> = C extends React.MemoExoticComponent<infer T> | React.LazyExoticComponent<infer T>
                  ~~~~~~~~~~~~~~~~~~~~~~~~

  ../../node_modules/@types/react/index.d.ts:3100:14
    3100         type LibraryManagedAttributes<C, P> = C extends React.MemoExoticComponent<infer T> | React.LazyExoticComponent<infer T>
                      ~~~~~~~~~~~~~~~~~~~~~~~~
    'LibraryManagedAttributes' was also declared here.

I'm puzzled as to why Typescript is venturing outside of the designated typeRoots directories?

typescript

Answer №1

The latest TypeScript version 5.1 now includes a fix for the issue discussed in this announcement:

Explicit typeRoots Disables Upward Walks for node_modules/@types

Prior to this update, if the typeRoots option was set in the tsconfig.json but failed to resolve any directories, TypeScript would continue searching in parent directories and their node_modules/@types folders.

This behavior has been removed in TypeScript 5.1 to prevent unnecessary look-ups.

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

Unraveling the mysteries of Typescript with async await

I'm facing a peculiar issue in my code that I'm struggling to identify. try { const result = await somePromise.catch((err) => { console.log(new Date()); // displays time, t0 console.log('Stats', eventLoopStats.se ...

node.jstypescriptevent-loop

In Typescript, you can easily group a string into sections that consist of digits like 345-67, along with text containing a

I have a string that looks like this: "[111-11] text here with digits 111, [222-22-22]; 333-33 text here" and I am trying to parse it so that I can extract the code [111-11], [222-22-22], [333-33] along with their respective text descriptions. The challeng ...

javascripttypescriptsplit

NodeJS Jest test failing due to a global variable being set for a different test already

I am currently working on a project in TypeScript using Node.js and Jest. I have a function that may or may not modify a global variable, which is a TypeScript Map. After one test modifies the global variable, it retains that value for subsequent tests. I ...

javascriptnode.jstypescriptunit-testingjestjs

`Implementing Typescript code with Relay (Importing with System.js)`

Is there a way to resolve the error by including system.js or are there alternative solutions available? I recently downloaded the relay-starter-kit (https://github.com/relayjs/relay-starter-kit) and made changes to database.js, converting it into databas ...

javascripttypescriptsystemjsrelay

What steps can be taken to dismiss a "TS2531: Object is possibly 'null'" error as a false positive if the object is always guaranteed to not be null?

Here is the code snippet: const infinoteUrl = $q.localStorage.getItem("infinote-dev-api") === null ? `${window.location.protocol}//${window.location.host}` : $q.localStorage.getItem("infinote-dev-api") console.log(`infinote UR ...

typescriptcompiler-errors

Tailored component properties for React applications

I am currently working on configuring discriminative component props. Check out my code snippet below: import React, { ReactNode } from 'react' type SelectionModalProps<T> = ( | { multiSelect: true onSubmit: (data: T[]) => ...

reactjstypescript

Is there a way for me to steer clear of using optional chaining in Typescript?

I'm currently working on storing object data known as Targetfarms in redux. I've defined a type named Farmstype for the Targetfarms. However, when I retrieve the Targetfarms using useSelector in the MainPage component and try to access targetfar ...

reactjstypescript

Exploring the functionality of the Angular 7 date pipe in a more dynamic approach by incorporating it within a template literal using backticks, specifically

I have a value called changes.lastUpdatedTime.currentValue which is set to 1540460704884. I am looking to format this value using a pipe for date formatting. For example, I want to achieve something like this: {{lastUpdatedTime | date:'short'}} ...

angulartypescriptangular6

Typescript: Securing Data with the Crypto Module

I am currently working on encrypting a password using the built-in crypto module. Previously, I used createCipher which is now deprecated. I am wondering if there is still an effective way to achieve this. Here is the old code snippet: hashPassword(pass: ...

javascripttypescriptcryptojs

What is the correct way to assign multiple types to a single entity in TypeScript?

(code at the end) While attempting to write section.full.link, I encountered the following error: Property 'link' does not exist on type 'SectionSingle | SectionTitle | SectionHeaderMedia'. Property 'link' does not exist on ...

typescript

Tips for effectively invoking an API within a Next.js application

I've been exploring the most effective method for calling an external API within a Next.js application recently. Given my experience in developing MERN stack applications, I typically rely on axios for handling API requests and utilize it within a use ...

typescriptnext.jsaxiosmern

Encountering an issue with Typescript Vue class-based components in Laravel Mix: issue arises when attempting to set property 'render' on an undefined object

I have been using Laravel Mix to compile my Vue components, incorporating TypeScript and class-based components. Each class is exported from the component, and every component is required by the context in the main application script. However, during rende ...

typescriptvue.jswebpackvuejs2laravel-mix

Checkbox offering a tri-state option

Seeking help on creating a checkbox with three states. I have implemented a method to toggle between these states upon clicking. However, the issue is that this method is only triggered after the HTML changes. As a result, the checkbox's navigation be ...

htmlangulartypescriptangular2-forms

Challenges arise when attempting to share a theme across different repositories within a Storybook monorepo that utilizes

In my unique project setup, I have a singular repository containing atoms, molecules, and organisms along with storybooks to develop a custom components library. This library is based on MUI framework with a customized theme applied, all built with TypeScr ...

reactjstypescriptmaterial-uistorybook

Divide the code into individual components within Angular 2 projects

I currently have 3 Angular 2 projects developed in TypeScript. Each project contains the same models and services. I would like to find a way to integrate these common elements at a global level and connect them with each individual project. Any suggesti ...

javascriptangulartypescriptarchitecturefrontend

Choosing a single element through viewChild using the "#" selector in Angular 2

Is there a special method to choose multiple tags on the same level with the same tag? <div #el></div> <div #el></div> <div #el></div> I keep getting an error message that says "Reference "#el" is defined several times ...

angulartypescriptangular2-directivesviewchild

Angular is unable to access functions or variables within a nested function

I am currently utilizing google.maps.geocoder to make location requests within my Angular app. When I provide a callback function with the results, it leads to unexpected code breaks when trying to call another function that displays map markers. It seem ...

angulartypescriptfunctiongoogle-maps

React Typescript: The element is implicitly assigned an 'any' type as the type does not have an index signature

While attempting to locate a key of an object using an item from an array, I encountered an error... An Element implicitly has an 'any' type because type lacks an index signature I've replicated the issue in this sandbox https://codesandbo ...

reactjstypescript

Accessing a targeted XML file within a document using Office.js in a Word Add-In

I am struggling to load the file named item1.xml from the ..\customXml folder of my document into my Word Add-In. So far, I have attempted the following: var url = Office.context.document.url + '\\customXml\\item1.xml\& ...

xmltypescriptoffice-jsword-addins

Creating a universal parent constructor that can take in an object with keys specific to each child class

I am looking to create a base class with a constructor that allows for all the keys of the child class to be passed. However, I am facing a challenge because 'this' is not available in constructors. Here is what I hope to accomplish: class BaseCl ...

typescript