Configuring Typescript target and library to utilize Promise.allSettled on outdated web browsers

I am currently using TypeScript version 4.3.5 and Node.js version 14.18.1 in my project. The code I am working on is compiled to target both old and new browsers by setting target=es5 in the tsconfig file. I make use of both Promise.all and Promise.allSettled methods in my source code.

However, when testing on older browsers like Safari on iPhone 8 with iOS version 11, I encounter client-side errors specifically related to Promise.allSettled. This is surprising to me as I expected using es5 target would ensure compatibility with older devices for this method. I'm struggling to understand the root cause of this issue. Below is an excerpt from my tsconfig.json file:

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "module": "commonjs",
    "esModuleInterop": true,
    "outDir": "dist",
    "jsx": "react",
    "lib": [
      "ES2020.Promise",
      "dom",
      "webworker"
    ],
    "skipLibCheck": true
  },
  "include": [
    "typings/node.d.ts",
    "typings/modules.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules",
    "**/*.scss.d.ts"
  ]
}

Answer №1

In the context of the query What is the necessity of a polyfill with Typescript?, TypeScript does not automatically offer backward compatibility implementations known as "polyfills". Hence, the target tsconfig may not provide as much support as expected: It primarily modifies syntax elements such as arrow functions and generators, rather than entire libraries like Promise. Therefore, being able to resolve Promise.allSettled relies on explicitly including "ES2020.Promise" in the lib list. This directive signals to TypeScript that within your environment, it is assumed that you have access to ES2020 Promises (including Promise.allSettled).

A notable excerpt from the lib documentation, emphasis added:

You might consider modifying these [lib entries] due to various reasons:

  • Your application does not operate within a browser environment, hence eliminating the need for "dom" type definitions
  • The runtime platform offers specific JavaScript API objects (possibly through polyfills), but does not fully support the syntactical aspects of a particular ECMAScript version yet
  • You possess polyfills or native implementations for certain features of an advanced ECMAScript version, though not all

Reference can also be made to the question asked in Promise.allSettled in babel ES6 implementation, where different techniques are suggested for implementing a polyfill, one prominent option being the inclusion of es.promise.all-settled.js from core-js. Integration of these solutions into a Webpack build can be achieved through utilizing the polyfills entry point which points to a concise polyfill-import-only JS file. Although the use of babel-polyfill has been phased out in favor of core-js/stable.

To implement these, you would need to either import or require one of the following:

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

Tips for accessing the 'index' variable in *ngFor directive and making modifications (restriction on deleting only one item at a time from a list)

Here is the code snippet I'm working with: HTML: <ion-item-sliding *ngFor="let object of objectList; let idx = index"> <ion-item> <ion-input type="text" text-left [(ngModel)]="objectList[idx].name" placeholder="Nam ...

Compilation issues encountered while running TypeScript in Dockerfile

I am encountering an issue with my Dockerfile during the TypeScript compilation step. Below is the snippet of code where it fails: FROM node:12 WORKDIR /usr/src/app # SETUP COPY package.json . COPY tsconfig.json . COPY src . RUN npm install -g yarn@^1. ...

Following the upgrade of Angular, the webpack module source-map-loader is encountering an error: "this.getOptions is not a function"

Currently in the process of constructing my angular project using webpack alongside source-map-loader to extract source maps, like this: module.exports = { // ... module: { rules: [ { test: /\.js$/, enforce: "pre&quo ...

Navigating Routes with Router in Angular 7: A Step-by-Step Guide

Within my sidebar navigation component, the sidebar.component.html file is structured as follows: <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav"> <a class="navbar-brand" href="#page-top"> <span cl ...

Best practices for utilizing forwardRef and next/dynamic in next.js version 13.4 with the "react-email-editor" component

I've been attempting to utilize the "react-email-editor" library in a Next.js project. My goal is to copy the email content generated within the editor to the clipboard. Since the library relies on browser interaction and the use of the "window" objec ...

Looking for guidance on locating Typescript type definitions?

As a newcomer to Typescript, I have recently delved into using it with React. While I have grasped the fundamentals of TS, I find myself perplexed when it comes to discovering or deriving complex types. For example, in React, when dealing with an input el ...

Collaborative service involves objects passing through reference

I am encountering an issue with a shared service in angular. Upon application startup, the init function is triggered, fetching and returning data that is vital across the entire application. Components have the ability to inject this service and retrieve ...

How to nullify the valueChanges pipe in Angular RxJS until the observable is resolved

A challenge I am facing is piping the valueChanges from a select element to trigger the appropriate API request and displaying a spinner until the response is received. Additionally, I am trying to utilize publish() and refCount() methods so that I can use ...

Resolve ESLint errors in _document.tsx file of next.js caused by Document<any> and ctx.renderPage = () with TypeScript usage

maxbause took the initiative to create a comprehensive boilerplate project for Next.js, complete with GraphQL and styled components in TypeScript. Check out the project here However, upon integrating ESLint into the project, I encountered several warning ...

Node.js, sigma.js, and the typescript environment do not have a defined window

When attempting to set up a sigma.js project with node.js in TypeScript, I encountered a reference error after starting the node.js server: ts-node index.ts The problem seems to be located within the sigma\utils\index.js file. <nodejsproject& ...

The AWS Lambda express.js server is reporting that it cannot locate the static HTML file directory

Currently, I am encountering an issue while attempting to deliver a static HTML file using the res.sendFile() method from my express.js server hosted on AWS Lambda with the Serverless framework. Specifically, I aim to serve an HTML file located in the dire ...

Investigating the issue: Why is my React Typescript canvas image resizing component producing small, fuzzy images from high-quality, large images

I have developed a small image resizer but am facing an issue with the output images being blurry, especially when working with large images. import React, { useState } from 'react'; interface PropsInterface { placeholder: string; resizeTo: ...

Problem encountered while directing to a component within Angular

Here is the overview of my directory structure: Directory Structure login.component.ts: import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms ...

Divs are not being organized into rows correctly due to issues with Bootstrap styling

I have implemented Bootstrap in my Angular application. The stylesheet link is included in my Index.html file as follows: <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css"> In addition to that, I have listed Bootstrap a ...

The initial invocation of OidcSecurityService.getAccessToken() returns null as the token

Our internal application requires all users to be authenticated and authorized, including for the home page. To achieve this, we use an HttpInterceptor to add a bearer token to our API requests. Initially, when rendering the first set of data with the fir ...

When utilizing a generic type with a class, type T fails to meet the specified constraint

export type ExtractType<T extends Array<{ name: Array<string>, type: keyof TypeMapping }>> = { [K in T[number]['name'][0]]: TypeMapping[Extract<T[number], { name: K }>['type']] } export class CommandLineParse ...

Experiencing a problem with Typescript validation while integrating Storybook with Material-UI (

Encountering a Typescript validation issue while attempting to pass args as children to a Material-UI button in Storybook :-/ Any suggestions on how to resolve this and avoid the Typescript error? I suspect it is caused by not passing a ReactNode. Thanks ...

How can we define a function using a generic type in this scenario using Typescript?

Here's a challenge that I'm facing. I have this specific type definition: type FuncType<T> = (value: T) => T I want to create a function using this type that follows this structure: const myFunc: FuncType<T> = (value) => valu ...

The specified function is not recognized within the HTMLButtonElement's onclick event in Angular 4

Recently diving into Angular and facing a perplexing issue: "openClose is not defined at HTMLButtonElement.onclick (index:13)" Even after scouring through various resources, the error seems to be rooted in the index page rather than within any of the app ...

Webpack error: Unable to locate serverless lambda module

I have been utilizing AWS lambda functions and successfully configured Webpack and Babel to work with ES6 or later JavaScript versions. Additionally, I have set up lambda layers for commonly used Node.js modules. Here is the code snippet from my serverless ...