Using Typescript in combination with snowpack may result in nullish coalescing operators being generated when targeting a version lower than ES2020

I've been working on compiling my TypeScript code/packages to ensure compatibility with Safari Version less than 14.

After researching, I discovered that nullish coalescing operators (??) are not allowed in the targeted version. Despite changing my target to ES2019, TypeScript/Snowpack still generates ??'s in the output directory, both in my code and third-party packages.

Even the alternative method of using || like let x = a || b doesn't seem to be supported by Safari 13 in my tests.

Is there any workaround for this issue, or am I overlooking something?

Answer №1

Interestingly, snowpack completely bypasses the tsconfig.json file during the build process and instead relies on its own TypeScript compilation toolchain.

The configuration setting to define the target for the compiled JavaScript code is found in the optimize property. Surprisingly, this crucial information is not included in the official documentation about configuration, but rather in a separate section that focuses on optimization and bundling. By specifying optimize.target as "es2019", I was able to achieve the desired outcome without any unnecessary ?? operators in the resulting output.

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

Having difficulty launching a TypeScript Node.js application using ts-node and pm2

I have a node app built with TypeScript and it works fine with nodemon, but when I try to move it to the server using PM2, I encounter errors. I've searched GitHub and StackOverflow for solutions, but nothing has worked for me so far. Any help would b ...

What is the best way to connect to a library using a script within a Typescript React application?

I'm a newbie to React and haven't worked on web development in years, so I'm facing a basic issue: Currently, I'm working on implementing a Stripe-based payment flow in a React web app (written in Typescript) and I've hit a roadbl ...

The user keeps finding themselves redirected back to the Home page rather than the page they are trying

Within my Angular application, users are authenticated through an OIDC provider using the library angular-auth-oidc-client. In the scenario where a user is not authenticated or their session has expired and they attempt to access a page such as https://loc ...

Is there a way to simulate AWS Service Comprehend using Sinon and aws-sdk-mock?

As a newcomer to Typescript mocking, I am trying to figure out how to properly mock AWS.Comprehend in my unit tests. Below is the code snippet where I am utilizing the AWS Service Comprehend. const comprehend = new AWS.Comprehend(); export const handler ...

Establishing the types of object properties prior to performing a destructuring assignment

Consider a scenario where a function is utilized to return an object with property types that can be inferred or explicitly provided: const myFn = (arg: number) => { return { a: 1 + arg, b: 'b' + arg, c: (() => { ...

The attribute 'prop' is not found on the type 'IntrinsicAttributes & TableProp'.ts(2322)

Encountering an error while trying to pass a prop to a React component for the first time. Despite looking at other posts for solutions, I have been unable to resolve it so far. Here is a snippet of my code: type TableProp = {}; function Table(prop: Tabl ...

Guide on transferring the token and user information from the backend to the front-end

Here is the code from my userservice.ts file export class UserService { BASE_URL = "http://localhost:8082"; constructor(private httpClient:HttpClient) {} public login(loginData:any){ return this.httpClient.post(this.BASE_URL+"/au ...

Guide to creating a personalized pipe that switches out periods for commas

I currently have a number with decimal points like --> 1.33 My goal is to convert this value so that instead of a dot, a comma is displayed. Initially, I attempted this using a custom pipe but unfortunately, it did not yield the desired result. {{get ...

Issues encountered while attempting to update data in angular2-datatable

Once the datatable has been rendered, I am facing an issue where I cannot update the data. I'm utilizing angular2-datatable. In my appcomponent.html file: If I try to update 'data2' in my appcomponent.ts file as shown below: this.httpserv ...

Why isn't useEffect recognizing the variable change?

Within my project, I am working with three key files: Date Component Preview Page (used to display the date component) useDateController (hook responsible for managing all things date related) In each of these files, I have included the following code sn ...

Creating a layered image by drawing a shape over a photo in Ionic using canvas

While there are plenty of examples demonstrating how to draw on a canvas, my specific problem involves loading a photo into memory, adding a shape to exact coordinates over the photo, and then drawing/scaling the photo onto a canvas. I'm unsure of whe ...

How can I define types for (const item of entries) in Typescript?

I attempted for (const ElementType as element of elements ) {} or for (const ElementType of elements as element) {} However, neither of these options is correct. ...

What is the best way to monitor and react to individual changes in a form array within an Angular application?

constructor(private stockService: StockService, private fb: FormBuilder, public dialog: MatDialog, public snackBar: MatSnackBar, private supplierService: SupplierService, private productService: ProductService) { this.stockForm = this.fb.group ({ //fo ...

What is the best way for me to examine [...more] closely?

import * as Joi from 'joi'; import 'joi-extract-type'; const schema = { aaaaaaa: Joi.number() .integer() .positive() .allow(null), bbbbbb: Joi.number() .integer() .positive() .all ...

Exploring the implementation of custom global declaration in the latest version of NextJS, version

Looking to implement custom global declaration in NextJS In my NextJS project, I've defined a global prototype for String as shown below utils.d.ts export {} declare global { interface String { /** * Returns string after removing all htm ...

Expanding the global object in ES6 modules to include TypeScript support for extensions like `Autodesk.Viewing.Extension`

I created a custom forge extension and now I am looking to incorporate typescript support as outlined in this blog post. However, I am facing an issue where typescript cannot locate the objects like Autodesk.Viewing.Extension and Autodesk.Viewing.ToolInter ...

Testing useEffect with React hooks, Jest, and Enzyme to add and remove event listeners on a ref

Here is a component I've been working on: export const DeviceModule = (props: Props) => { const [isTooltipVisible, changeTooltipVisibility] = useState(false) const deviceRef = useRef(null) useEffect(() => { if (deviceRef && dev ...

An issue has been detected by Zone.js where the ZoneAwarePromise `(window|global).Promise` has been unexpectedly replaced

I have recently integrated the Angular2 quickstart code into my existing webpack setup, but I seem to be facing an issue where something is interfering with the promise from zone.js, resulting in an error. Based on my research on Stack Overflow, it appears ...

Issue TS2315: Type 'ElementRef' does not support generics

While attempting to integrate @angular/materials into my application, I encountered a successful compilation with the following error messages: webpack: Compiled successfully. ERROR in node_modules/@angular/material/button-toggle/typings/button-toggle.d.t ...

Defining a custom type for accessing Date.getTime() in TypeScript

Are there any data types similar to Timestamp that could be utilized for Date().getTime() purposes? const currentTime = new Date().getTime(); ...