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

What is the best way to implement asynchronous guarding for users?

Seeking assistance with implementing async route guard. I have a service that handles user authentication: @Injectable() export class GlobalVarsService { private isAgreeOk = new BehaviorSubject(false); constructor() { }; getAgreeState(): Obser ...

What is the best way to utilize a promise for a singular variable?

In my code, I have a requirement where I need to make two HTTP requests. The second request is dependent on information retrieved from the first request. Initially, the first request sets the variable 'amount' which is later used in the second re ...

Is React.lazy() compatible with Create React App?

I recently developed a React App using npx create-react-app my-app command, utilizing the React 17 version. However, I ran into an issue when trying to update a traditional component. import Component from './Component' to const Component = Rea ...

Errors in Visual Studio regarding typescript are often not found by tsc and eslint, causing frustration for developers

Today, after restarting my computer and launching visual studio code, I encountered an unfamiliar error that I've never seen before: I haven't made any changes to my project's code (confirmed by running git status). It's unclear whethe ...

Unused code splitting chunk in React production build would improve performance and efficiency of

When running the command npm run build, a build directory is generated with js chunks. I have observed an unfamiliar file named [number].[hash].chunk.js that does not appear in the list of entrypoints in the asset-manifest.json file. Instead, this mysteri ...

Issue: Unable to 'locate' or 'access' ./lib/React folder while utilizing webpack

I've been delving into the world of React for a while now and decided to experiment with integrating it with webpack. Below is my webpack.config.js : var path = require('path'); module.exports = { entry: './app.js', outp ...

Incorporate an external JS file (File A) that is dependent on another JS file (File B) into a TypeScript file within the context of Angular 4

Working on an Angular 4 project, I recently installed two external JS libraries using npm. They are now in the node_modules folder and usable in another TS file within my project. The issue arises because import B requires import A, preventing me from effe ...

The most effective method for transferring a JavaScript object between a TypeScript frontend and a Node.js backend

I need some advice on how to effectively share a JavaScript object between my Angular2 with Typescript frontend and NodeJS backend in an application I'm working on. Currently, I am using a .d.ts file for the frontend and adding a module.exports in the ...

Guide on integrating react-tether with react-dom createPortal for custom styling of tethered components based on their target components

Within a Component, I am rendering buttons each with its own tooltip. The challenge is to make the tooltip appear upon hovering over the button since the tooltip may contain more than just text and cannot be solely created with CSS. The solution involves ...

If the numeral variable is used within an HTML function, a 'numeral is not defined' error may occur

Numeral.js is a key tool for me, utilized in both the viewmodels and occasionally in the HTML of my knockout components. <div data-bind="text: numeral(totalCurrent()).format('$0,0.00')"></div> While using webpack to bundle my HTML a ...

I will not be accessing the function inside the .on("click") event handler

Can someone help me troubleshoot why my code is not entering the on click function as expected? What am I missing here? let allDivsOnTheRightPane = rightPane.contents().find(".x-panel-body-noheader > div"); //adjust height of expanded divs after addi ...

Oops, it seems like there was an issue with NextJS 13 Error. The createContext functionality can only be used in Client Components. To resolve this, simply add the "use client" directive at the

**Issue: The error states that createContext only works in Client Components and suggests adding the "use client" directive at the top of the file to resolve it. Can you explain why this error is occurring? // layout.tsx import Layout from "./componen ...

The custom error page in NextJS is failing to display

In my custom pages/404.ts file, I have coded the following: export default function NotFound() { return <h1>404 - Page Not Found</h1> } Additionally, there is another page that displays a 404 error when the organization is null: import Error ...

finding the adjacent li element using the document.(property)

Utilizing a pub/sub solution named ably.io for real-time data updates, I have implemented a method that assigns dynamic ids to each ngFor listing. This allows me to easily identify and update the values received from ably.io subscribe. document.getElement ...

What is the process of substituting types in typescript?

Imagine I have the following: type Person = { name: string hobbies: Array<string> } and then this: const people: Array<Person> = [{name: "rich", age: 28}] How can I add an age AND replace hobbies with a different type (Array< ...

Is there a way to combine compiling TypeScript and running the resulting .js file into one build command in Sublime Text 3?

I have successfully installed the TypeScript plugin on Sublime Text 3. Once installed, a build system is added to the menu for easy access. https://i.stack.imgur.com/m21bT.png You can simply press "Command + B" to build a .ts file. My goal is to compile ...

Can default values be assigned to a DTO during initialization?

What is the method to assign default values when a query is empty? In the case where I have this DTO structure for a query: export class MyQuery { readonly myQueryItem: string; } If the request doesn't include any query, then myQuery.myQueryItem ...

An issue has occurred: TransformError SyntaxError: Unexpected keyword 'const' was encountered

While practicing programming with React-Native, I encountered a problem that I couldn't figure out how to solve. I attempted to use solutions from various forums, but none of them worked. import { StyleSheet, Text, View, Image } from 'react-nativ ...

The attribute 'y' is not found within the data type 'number'

Currently working on a project using Vue.js, Quasar, and TypeScript. However, encountering errors that state the following: Property 'y' does not exist on type 'number | { x: number[]; y: number[]; }'. Property 'y' does not ...

Adding existing tags to Select2 in Angular2 can be accomplished by following these steps:

HTML: <select data-placeholder="Skill List" style="width:100%;" class="chzn-select form-control" multiple="multiple"> <option *ngFor="#skill of allSkills" [ngValue]="skill">{{skill}} </option> </select> TS: allSkills = [& ...