Error alert: TypeScript typings issue - Naming conflict with Promise / Failure to locate name Promise

I am currently working on a client/server JavaScript application and I am facing a significant issue with Promises. It appears that they are either undefined or duplicated, and this problem seems to be related to the @types package.

npm install --save @types/es6-promise`

This results in server errors like the following:

cd ../server 
➜  server git:(master) ✗ tsc
../node_modules/@types/es6-promise/index.d.ts(11,15): error TS2300: Duplicate identifier 'Promise'.
../node_modules/@types/es6-promise/index.d.ts(42,19): error TS2300: Duplicate identifier 'Promise'
.../../../../../../../usr/local/lib/node_modules/typescript/lib/lib.es6.d.ts(4936,11): error TS2300: Duplicate identifier 'Promise'.
../../../../../../../usr/local/lib/node_modules/typescript/lib/lib.es6.d.ts(5261,11): error TS2300: Duplicate identifier 'Promise'.
../../../../../../../usr/local/lib/node_modules/typescript/lib/lib.es6.d.ts(5511,13): error TS2300: Duplicate identifier 'Promise'.
../../../../../../../usr/local/lib/node_modules/typescript/lib/lib.es6.d.ts(5737,11): error TS2300: Duplicate identifier 'Promise'.
➜  server git:(master) ✗

If I remove this package, then I start getting client errors:

tsc
src/components/GeneralChatAdminInputArea.tsx(100,14): error TS2304: Cannot find name 'Promise'.
src/components/GeneralChatAdminInputArea.tsx(103,16): error TS2304: Cannot find name 'Promise'.
src/routes/users/index.ts(11,21): error TS2304: Cannot find name 'Promise'.
src/routes/users/index.ts(12,21): error TS2304: Cannot find name 'Promise'.
src/routes/users/index.ts(13,3): error TS2304: Cannot find name 'Promise'.

What is the solution to this dilemma?

This is how my tsconfig.json file is set up:

{
    "compilerOptions": {
        "sourceMap": true,
        "noImplicitAny": false,
        "target": "es6",
        "jsx": "react",
        "module": "commonjs",
        "moduleResolution": "node",
        "isolatedModules": false,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "declaration": false,
        "removeComments": true,
        "noLib": false,
        "preserveConstEnums": true,
        "suppressImplicitAnyIndexErrors": true,
        "noUnusedLocals": true
    },
    "filesGlob": [
        "**/*.ts",
        "**/*.tsx",
        "**/*.tsd"
    ],
    "compileOnSave": true,
    "buildOnSave": false,
    "atom": {
        "rewriteTsconfig": false
    }
}

Here's an example that illustrates how the problem comes and goes:

The client compiles successfully

➜  author git:(402-compile-errors) ✗ cd client 
➜  client git:(402-compile-errors) ✗ tsc
➜  client git:(402-compile-errors) ✗ cd ../server

But the server fails

➜  server git:(402-compile-errors) ✗ tsc
../node_modules/@types/es6-promise/index.d.ts(11,15): error TS2300: Duplicate identifier 'Promise'.
../node_modules/@types/es6-promise/index.d.ts(42,19): error TS2300: Duplicate identifier 'Promise'.
../../../../../../../usr/local/lib/node_modules/typescript/lib/lib.es6.d.ts(4936,11): error TS2300: Duplicate identifier 'Promise'.
../../../../../../../usr/local/lib/node_modules/typescript/lib/lib.es6.d.ts(5261,11): error TS2300: Duplicate identifier 'Promise'.
../../../../../../../usr/local/lib/node_modules/typescript/lib/lib.es6.d.ts(5511,13): error TS2300: Duplicate identifier 'Promise'.
../../../../../../../usr/local/lib/node_modules/typescript/lib/lib.es6.d.ts(5737,11): error TS2300: Duplicate identifier 'Promise'.

Removing the library allows the server to compile

➜  server git:(402-compile-errors) ✗ rm -rf ../node_modules/@types/es6-promise 
➜  server git:(402-compile-errors) ✗ tsc                                      
➜  server git:(402-compile-errors) ✗ cd ../client

However, now the client compilation fails

➜  client git:(402-compile-errors) ✗ tsc
src/components/GeneralChatAdminInputArea.tsx(100,14): error TS2304: Cannot find name 'Promise'.
src/components/GeneralChatAdminInputArea.tsx(103,16): error TS2304: Cannot find name 'Promise'.
src/routes/users/index.ts(11,21): error TS2304: Cannot find name 'Promise'.
src/routes/users/index.ts(12,21): error TS2304: Cannot find name 'Promise'.
src/routes/users/index.ts(13,3): error TS2304: Cannot find name 'Promise'.
➜  client git:(402-compile-errors) ✗

It feels like being stuck in a catch22 situation

javascripttypescriptpromisetypescript-typings

Answer №1

Ensure that you include the necessary lib in your tsconfig.json:

// tsconfig.json
{
  "compilerOptions": {
    "lib": [
      "es2015"
    ]
  }
}

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

Looking for a powerful filtering menu similar to Excel or Kendo UI Grid in Datatables?

Is there a way to add Excel-like filtering to DataTables? It's surprising that such a widely used and advanced plugin doesn't have this feature already. If not, is there an easy way to implement it? Below are examples of advanced menu filters sim ...

javascriptexcelgridviewfilterdatatables

"Unfortunately, this container did not send out any hits" - Google Tag Manager

After successfully integrating Google Tag Manager into my Next.js website, here is the implemented code: import '../styles/global.css'; import type { AppProps } from 'next/app'; import Script from 'next/script'; import NextNP ...

typescriptnext.jsgoogle-analyticsgoogle-tag-manager

Utilizing Angular 4 alongside ng-sidebar to incorporate the class "right"

Just started using ng-sidebar in my Angular 4 project, but I'm a bit lost on where to place the "ng-sidebar--right" class. Could someone please guide me through this small issue (I'm new to this, so apologies in advance). Here's a snippet of ...

javascriptangular

Changing JavaScript functions into jQuery functions

Currently, I have this Javascript function that I am interested in converting to jQuery: function confirm() { var http = new XMLHttpRequest(); var url = "index.php?tag=' . $dt . '"; var params = "confirm_ref=' . urlencode(encry ...

javascriptjqueryajax

Updating Angular components by consolidating multiple inputs and outputs into a unified configuration object

When I develop components, they often begin with numerous @Input and @Output properties. However, as I continue to add more properties, I find it beneficial to transition to utilizing a single config object as the input. For instance, consider a component ...

javascriptangularangular-components

Disable dates that are more than 7 days from the current date using Material UI's Date

How can I restrict users from selecting dates more than 7 days after their initial selection? In the example image provided, the date of January 30th should be disabled for selection. https://i.stack.imgur.com/iTem4.png Below is the code snippet: const ...

reactjstypescriptmaterial-ui

Updating table width using AngularJS/jQuery after completion of ajax request

One of my challenges involves a table that defaults to a specific width, such as 80% of its parent div. Initially, the table remains hidden using 'ng-if' until an ajax call is completed in this manner: This is reflected in the HTML code snippet ...

javascriptjqueryajaxangularjsangularjs-ng-repeat

When using my webrtc technology, I configure my sdp to establish a recvonly direction

While attempting to make a video call using WebRTC, I encountered bugs during testing. My goal is to integrate this project into a webview for my Android app. I conducted testing using phone-pc and phone-phone scenarios. Scenario A: When the PC initialize ...

javascriptandroidhtmlnode.jswebrtc

Issue with accessing Scope value in AngularJS directive Scope

FIDDLE I've recently developed a directive that looks like this: return { restrict: 'EAC', scope: { statesActive: '=' }, link: function (scope, element, attrs) { var ...

javascriptangularjs

AngularJS / Updating the URL only after the template's resolve property has been successfully resolved

Resolve plays a crucial role in preventing a template from being displayed based on certain conditional logic that deals with the result of a promise (whether it is solved or rejected). In my application, I implement it like this: .config(['$routePr ...

javascriptangularjsroutes

Building a versatile component library for Next.js using TypeScript and Tailwind CSS: Step-by-step guide

Lately, I've been utilizing Next.js and crafting components such as buttons, inputs, and cards with Tailwind CSS for my various projects. However, the repetitive task of rewriting these components from scratch for each new project has become quite tir ...

reactjstypescriptnext.jstailwind-cssnext.js13

Steps to temporarily turn off Backbone.sync for a fresh model and then reactivate it once the user clicks the save button

I am currently working with a Backbone collection model that consists of sub-models as elements, along with views to edit it. My objective is to have the syncing functionality "turned off" initially when the model is created, so that the back end is not c ...

javascriptbackbone.js

Issue with Angular 5 HttpClient - PUT request not working in Firefox, however functions correctly in Chrome

Currently in the process of developing a website with Angular 5 and CouchDB. One of my methods in database.service.ts looks like this: import {HttpClient} from '@angular/common/http'; const auth = my database adress; constructor(private http: Ht ...

angulartypescripthttpclientput

There was an issue stating that valLists is not defined when paginating table rows with AngularJS and AJAX

I found a helpful code snippet on this website for implementing pagination in AngularJS. I'm trying to adapt it to work with data from a MySQL DB table called 'user', but I keep running into an issue where the valLists variable is undefined, ...

javascriptphpmysqlajaxangularjs

Ways to get to the bottom in a React component using a button

I've been struggling to automatically scroll the user to the bottom of the page when they click on a button. Despite my best efforts, I haven't been able to find a solution. Can someone please assist me in achieving this goal? Thank you ...

javascriptreactjsecmascript-6react-redux

Unable to declare an "if statement" within a Jasmine JS test scenario

I'm having trouble creating an "if statement" inside my test case using Jasmine JS. The error seems to be related to a wrong locator, but I suspect it might actually be due to a syntax issue. ** Pay attention to the code block of "screen 4" ** desc ...

javascriptnode.jsselenium-webdriverjasmineprotractor

The color used to highlight questions on Stackoverflow

Could someone please help me identify the specific color that stackoverflow uses to highlight the background when a question answer link is followed? For instance, take a look at this link: Is there a float input type in HTML(5)? Appreciate any assistanc ...

javascriptcsscolors

What is the most effective way to move specific data from one page to another in Angular/Typescript?

Welcome to my Main Page! https://i.stack.imgur.com/m9ASF.png This is where I want to start my journey. https://i.stack.imgur.com/E8pAW.png My goal is to click the Last 1 Day button to redirect to another page with the date filter and ItemId values already ...

angulartypescriptprimeng

The final value is always returned by jQuery's each method

Is there a way to prevent the .each() function from selecting the last value every time it runs? var items = ["item1", "item2", "item3"]; $("#list li").each(function() { var addedClass; if ($(this).hasClass("one")) { addedClass = "red"; } else ...

javascriptjquery

PWA JavaScript struggling with GPS geolocation coordinates

I am experiencing issues with the GPS coordinates being stuck when using geolocation in a Progressive Web App (PWA). Sometimes, the coordinates get stuck at the previous location, even if the user has moved since then. I suspect that this is due to the GP ...

javascriptjquerygeolocationgpsprogressive-web-apps