Issue with TypeScript compilation: Build error occurred because an asynchronous function or method in ES5/ES3 needs the 'Promise' constructor

I'm currently using VS2017 and TypeScript 2.5.3.

The .ts code I'm working with is as follows:

class LossEnergyCalculation {

    async initLossEnergyCalculation(): Promise<void> {
        try {
            const response = await fetch("/LossEnergyCalculation/GetOilFieldList");
            const oilFieldsData = await response.json();
    }
    ...
}

In the project's properties under the TypeScript Build section, I have configured it as follows:

TypeScript version: 2.5
ECMAScript version: ECMAScript 5
JSX compilation in TSX files: None
Module System: CommonJS

I do not have a tsconfig.json file in this project.

When I try to build the project, I encounter the following error message:

Build:An async function or method in ES5/ES3 requires the 'Promise' constructor. Make sure you have a declaration for the 'Promise' constructor or include 'ES2015' in your `--lib` option.

Any suggestions on how to resolve this error would be greatly appreciated.

Answer №1

In order to incorporate the necessary Promise declarations, it is imperative that you specify the lib option. Additionally, if your runtime environment lacks built-in support for promises, you will also require a library for promises at runtime.

To delineate the libraries required, a tsconfig.json file must be used. Based on the details provided in your query, the configuration should align with your current setup:

{
  "compilerOptions": {
    "module": "commonjs",
    "sourceMap": true,
    "target": "es5",
    "lib": [ "es2015.promise", "es5", "dom" ]
  }
}

NOTE Only the es2015.promise from es2015 has been included, along with es5 for other runtime declarations. This ensures exclusion of features from es2015 that are unnecessary while providing only the essential promises. It is important to note that including the es2015.promise lib does not guarantee the presence of promises in the runtime environment; this aspect must be managed separately.

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

What is causing my custom Angular 2 dropdown to not populate @ContentChildren?

Recreating the appearance of a Fabric-style dropdown for Angular 2 is my current project. There are two key elements that I need to focus on: I'm making use of ngModel The dropdown component is unaware of its children until queried. The dropdown ite ...

Move to the first item on the list without any unnecessary scrolling of the view - ReactJS

Whenever I try to scroll to a specific item in the list, clicking on it causes the entire view to scroll instead. Is there a way to ensure that only the div containing the list scrolls? <AlertsList> {productInventoryAlert?.map((prod ...

Webpack encountered an error regarding an unidentified variable: babelHelpers

I'm currently developing a React application and using react-router-dom along with typesafe-react-router for routing. My project is configured with webpack 4 and Babel. I have defined my routes in a file named routes.ts: import { route } from 't ...

Having trouble with Tailwind's 'select-none' class not functioning properly in mobile Safari

While working on my NextJS app, I encountered this code block: <div className="select-none"> bro </div> Surprisingly, even with the "select-none" class added, I can still select it in mobile Safari. I tried adding the ...

Choose the desired option from Angular 7 / Ionic 4 dropdown menu

I am facing an issue with a piece of code that creates dynamic drop-down select options. I need to retrieve the selected values from these items. The loop in the code generates 3 to 5, or sometimes even more, different dropdowns based on API data. My goa ...

Troubleshooting import errors with Typescript for C3 and D3 libraries

I have recently started working on a project using the C3 graphing library within an Ionic2/Angular2 TypeScript setup. After installing C3 via npm and the type definitions via tsd, I imported it into my own TypeScript file like this: import {Component} fr ...

Effortlessly passing props between components using React TypeScript 16.8 with the help

In this scenario, the component is loaded as one of the routes. I have defined the type of companyName as a string within the AppProps type and then specified the type to the component using <AppProps>. Later on, I used {companyName} in the HTML rend ...

Data retrieved from API not displaying in Angular Material table

I've hit a roadblock trying to understand why my mat-table isn't displaying the data for me. I'm working with Angular 15 and using Angular Material 15. Below is my HTML component code: <mat-divider></mat-divider> <table mat-t ...

Angular component that interacts with the Storybook using Actions

I'm having trouble connecting the eventemitter of an Angular button to Storybook actions. The action doesn't seem to be triggering even though I can see in the console that the button is being clicked. However, it's not showing up in the act ...

By pairing delay(0) with refCount(), we can achieve optimal efficiency

The refCount operator is discussed in this article. It explains the necessity of adding delay(0) to prevent unsubscription of observable A: import { Observable } from "rxjs/Observable"; const source = Observable.defer(() => Observable. ...

An array containing optional types Ts and required types Ks

Can an array be typed in TypeScript to require at least one or more strings at any index, with any extra elements being numbers? type NumberArrayWithAtleastOneString = [...(number[] | string)[], string] const a: NumberArrayWithAtleastOneString = [1,' ...

Using Typescript generics to enhance arrays

I am looking to extend a generic list of Array that has been previously extended from my class. How can I accomplish this in the correct way? export interface DeliveryMethod { readonly id: string; readonly company: string; readonly cost: number; re ...

Automatically identify the appropriate data type using a type hint mechanism

Can data be interpreted differently based on a 'type-field'? I am currently loading data from the same file with known type definitions. The current approach displays all fields, but I would like to automatically determine which type is applicab ...

Which TypeScript type must be used to define a class as a prop in the script setup of Vue 3?

Currently, I am working on a Vue 3 single file component that utilizes the script setup method. The challenge I am facing involves defining a prop that should accept values similar to those passed to the HTML class attribute. This means the prop could be a ...

Unexpected behavior with onKeyPress in React-Native Windows resulting in missing key press events

Currently, I am working on a Windows app using react-native version 0.54.0. For one of the functionalities, I have incorporated a TextInput element and would like to use onKeyPress. Here is my code snippet: <TextInput ref = { this.setTextInputRef } on ...

When attempting to access Element.object3D in A-frame using TypeScript, an error stating "The 'object3D' property does not exist on the 'Element' type" is encountered

As a Japanese student, I ask for your understanding regarding my limited English proficiency. Currently, I am working on developing an a-frame library that utilizes anime.js in TypeScript to create animations. However, I encountered an issue when attemptin ...

Ensure that the output of a function in Typescript matches the specified data type

Looking for a way to inform TypeScript that the output of a function will always meet the type requirements of a variable, therefore avoiding any error messages? Type 'string | Date' is not assignable to type? For example: const getStringOrDat ...

Typing function parameters that accept generic types "from the identical instance"

I have come across a similar implementation of an Event Emitter in TypeScript and I am looking to create a helper function that maintains type integrity. You can find my code attempt on TS Play sample page. Below is the snippet from my sample: In the prov ...

Is there another option for addressing this issue - A function that does not declare a type of 'void' or 'any' must have a return value?

When using Observable to retrieve data from Http endpoints, I encountered an error message stating that "A function whose declared type is neither 'void' nor 'any' must return a value." The issue arises when I add a return statement in ...

Configuring TypeScript to utilize worker_threads

Currently, I am attempting to implement WebWorkers in my Typescript project and I have encountered a hurdle. Despite having installed @types/node and updating everything, 'worker_threads' has transitioned from an experimental feature to a stable ...