Despite attempts to exclude them, types in node_modules continue to be compiled in TypeScript

During my attempt to compile my typescript source code, I've noticed that the compiler is also attempting to compile the types found within my node_modules directory. I am currently utilizing typescript version 2.6.1 and have my tsconfig file set up as follows


{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "outDir": "./dist",
    "mapRoot": "./dist",
    "module": "commonjs",
    "target": "es6",
    "sourceMap": true,
    "sourceRoot": "./source",
    "removeComments": false
  },
  "exclude": [
    "node_modules",
    "test"
  ],
  "include": [
    "source/*.ts"
  ]
}

Upon executing the command "tsc -w -p tsconfig.json," I encountered the following error:


node_modules/@types/es6-promise/index.d.ts(11,15): error TS2300: Duplicate identifier 'Promise'.
typescripttsconfig

Answer №1

Upon reviewing this document, I found the solution at https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

In the segment discussing @types, typeRoots, and types, it was noted:

To deactivate the automatic inclusion of @types packages, specify "types": [].

The revised tsconfig.json appears as shown below:

{
  "compilerOptions": {
   "allowSyntheticDefaultImports":true,
   "outDir": "./dist",
   "mapRoot": "./dist",
   "module": "commonjs",
   "target": "es6",
   "sourceMap": true,
   "sourceRoot": "./source",
   "removeComments": false,
   "types": []
 },
 "exclude": [
   "node_modules",
   "test"
 ],
 "include": [
   "source/*.ts"
 ]
}

Answer №2

Why?

This issue may arise due to a mismatch in TypeScript versions being used.

For example, if you have TypeScript 2.9.x in your global npm cache, but TypeScript 3.5.x is installed locally in your project's node_modules directory.

Test

You can verify this by running "npx tsc", which requires TypeScript to be listed as a dependency in your project and that you have npm version 5.2.x or higher.

Alternatively, you can check your local TypeScript version with "npm list typescript" and your global TypeScript version with "npm list typscript -g".

Solution

If the "npx tsc" test passes or if there is a version mismatch, ensure that your local and global TypeScript versions are aligned.

Other Notes:

"npx" executes commands using the Node package from your project's local "node_modules" folder.

Consider checking out Node Version Manager if you're not familiar with it; it's a useful tool for quickly switching between Node versions.

Answer №3

To ensure everything was in sync, I double-checked that my Microsoft.TypeScript.MsBuild version matched the 'typescript' devDependency version specified in the packages.json file (which was 4.6.3 in this instance). Once I had downgraded the Microsoft.TypeScript.MsBuild assembly to match the required version, I simply right-clicked on the "node_modules" folder it added and selected 'exclude from project'. This resulted in a significant reduction in TypeScript errors related to the specific source code I was working with.

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

How to Generate a Unique URL in Angular 7 Using Typescript

I'm struggling to display or download a .pdf file in my Angular 7 project due to issues with window.URL.createObjectURL. Here's the code snippet I've written: this.userService.getFile(report.id).subscribe( res => { console.log(res) ...

angulartypescripturlangular7

Encountering a TypeScript error while calling a Vue lifecycle hook method

Struggling to call a method in a Vue root component from a lifecycle method in typescript? See below for a simple example that showcases this issue: import Vue from "vue"; class Game { a: number; b: number; constructor() { this.a = 3; ...

typescriptvue.js

Angular StrictNullChecks: "Error - object may be null"

I am encountering an issue with the 'strictNullChecks' setting in my Angular project. This has resulted in numerous errors across my templates (.html), such as: <input #inputValue type="text" (keyup.ent ...

angulartypescriptobjectdomnull

Is there a more effective alternative to using the ternary condition operator for extended periods of time?

Do you know of a more efficient solution to handle a situation like this? <tr [style.background]="level == 'ALARM' ? 'violet' : level == 'ERROR' ? 'orange' : level == 'WARNING' ? 'yellow' ...

angulartypescript

The 'push' property is not found within the 'Control' type

I am attempting to create an array that contains arrays within it. This array is intended for a dynamic form functionality, where the user can add a new section and push the array of control fields to the main array. Angular2 then generates this dynamical ...

arraysangulartypescript

The Threejs Raycaster detects collisions with objects even when the ray is just grazing the surface

Within my Vue component, I have integrated a threejs scene and I am facing an issue with selecting objects using the mouse. I am currently using the OnPointerDown event and raycaster to locate objects under the mouse pointer. However, it seems like the ray ...

typescriptvue.jsthree.js

TypeScript creates a .d.ts file that contains declaration statements rather than export declarations

When compiling my code using the command tsc --p typescript/tsconfig.json --outFile "dist/umd/index.d.ts", I encountered an issue. The contents of my tsconfig.json file are as follows: { "include": ["../src/**/*"], "exclude": ["../**/*.test.ts"], ...

javascripttypescript

Retrieve properly formatted text from the editor.document using the VSCode API

I have been working on creating a personalized VSCode extension that can export the current selected file contents as a PDF. Although PrintCode exists, it does not fit my specific needs. The snippet of code I am currently using is: const editor = vscode.w ...

htmltypescriptpdfvisual-studio-codevscode-extensions

Enhance the performance of your React/NextJS app by controlling the rendering of a component and focusing on updating

I'm facing an issue with my NextJS application that showcases a list of audio tracks using an <AudioTrackEntry> component. This component receives props like the Track Title and a Link to the audio file from an external data source. Within the ...

javascriptreactjstypescriptnext.js

The beforePopState event in next/router is not triggering as expected

Noticing an issue where the beforePopState event is not triggering when I use the back button. This code snippet is part of a hook defined in _app.js according to the documentation. The current version being used is 12.1.5 If anyone has insights on what ...

javascriptreactjstypescriptnext.js

Utilizing Angular 11's HostListener to capture click events and retrieve the value of an object

Using the HostListener directive, I am listening for the click event on elements of the DOM. @HostListener('click', ['$event.target']) onClick(e) { console.log("event", e) } Upon clicking a button tag, the "e" object contains the fol ...

javascriptangulartypescript

How can we design a return type for a function in Typescript that enforces the exact keys present in the input array K[] to be included in the Record?

I have a function that takes an array of Animals, and returns a map where the keys are the animals and the values are their fur colors: export enum Animals { CAT = 'CAT', DOG = 'DOG', SEAL_PUP = 'SEAL_PUP', } const furC ...

typescript

Using TypeScript to define a static enum within a React functional component

Creating a React.FunctionalComponent with static props: import MyAwesomeComponent from './MyAwesomeComponent'; ... <MyAwesomeComponent mode={MyAwesomeComponent.modes.superAwesome} /> Static props defined as key-value pairs: MyAwe ...

reactjstypescript

Experimenting with NGXS selectors: A comprehensive guide

Hey there, I am currently utilizing the NGXS state management library in my application. I have a selector set up like this and everything seems to be functioning correctly. However, while testing the app, I encountered the following error message: "PrintI ...

javascriptangulartypescriptkarma-runnerngxs

Chrome fails the karma tests while phantomjs passes them

I've been struggling with this issue for some time now and can't seem to find a solution. I'm working on an Ionic 2 project that utilizes Angular 2's testing environment. When I run 'ng test' using Karma's Chrome launcher ...

node.jsangulartypescriptionic2karma-runner

Enforcing the requirement of null values

My goal is to create a variable that can either hold a number or be null. The purpose of this variability is to reset the variable at times by setting it to null. However, I am facing an issue where if I declare the variable with the type number | null, I ...

typescript

Ways to adjust the properties within a type that are nested

I'm looking to modify a specific type in my code while retaining the other properties. Can anyone help? type Foo = { a: { b: { c: string[] ...rest } ...rest } ...rest } Is there a way to change the type of a.b.c without ...

typescript

The module 'crypto-js' or its corresponding type declarations cannot be located

I have a new project that involves generating and displaying "QR codes". In order to accomplish this, I needed to utilize a specific encoder function from the Crypto library. Crypto While attempting to use Crypto, I encountered the following error: Cannot ...

reactjstypescriptcryptojs

core.js encountered an error at line 6237: Unable to assign value to property 'area' as it is undefined

HTML: I have created a form but encounter an error when clicking the submit button. Can someone please assist me in identifying the issue? <h3 class="page-header">Operator Form</h3> <div class="outer-container"> <form class="form-s ...

angulartypescript

How can the Calendar Ant Design showcase events that have fluctuating dates?

Seeking a solution to display events on an Ant Design Calendar using dateCellRender with dates stored in a variable object. Here's an example of the object: [ { "id": 1, "content": "Example", & ...

reactjstypescriptantd