Bring in the module for DecompressionStream

I'm encountering an issue in my React Typescript app where I am seeing the following error message:

webpack compiled with 1 warning
ERROR in src/App.tsx:30:21
TS2304: Cannot find name 'DecompressionStream'.
    28 | const enc = new TextEncoder()
    29 | const dc  = new TextDecoder()
  > 30 | const gunzip  = new DecompressionStream('gzip')
       |                     ^^^^^^^^^^^^^^^^^^^

Interestingly, when I run a Node script without TypeScript, everything runs smoothly. The CompressionStream and DecompressionStream objects are present in that scenario. However, it appears that TypeScript, during its checks (or maybe due to the fact that it's being built as a web application?), believes that we are missing an import or require statement.

I've tried various import approaches without success as shown below:

  • import { DecompressionStream } from 'compression-streams'
  • const DecompressionStream = require('DecompressionStream')
  • const DecompressionStream = globalThis.DecompressionStream

All the resources I've consulted regarding the CompressionStreams API do not specify any module name, leading me to suspect that I might be overlooking something. I've also searched for a Typescript @types/ module related to this, but it seems that such a module does not exist. Could it be that this web API is too recent for TypeScript support?

typescriptwebapi

Answer №1

If you're working with Angular in Typescript, using 

new (window as any).CompressionStream('gzip')
may work, but a more optimal solution would be to include the definitions in the file where CompressionStream is being utilized.

interface CompressionStream extends GenericTransformStream {  }
type CompressionFormat = "deflate" | "deflate-raw" | "gzip";
declare var CompressionStream: {
  prototype: CompressionStream;
  new(format: CompressionFormat): CompressionStream
}

Answer №2

It's not solely the absence of type definitions that is a concern. TypeScript is serving as a protective measure due to the lack of CompressionStream or DecompressionStream support in Firefox and Safari as of 2023-03-19 (UPDATE September: Now they do!). Therefore, these are not recognized within the globalThis context (despite being in Node's globalThis).

For now, it is recommended to rely on existing compression packages. I personally opted for pako, which proved to be effective.

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

The name property of event.currentTarget is now being returned as currentTarget

I am facing an issue with my handleChange function in typescript. When I try to retrieve the name attribute from a text field and log it, it returns 'currentTarget' instead of the assigned name. Additionally, the value is showing up as undefined. ...

reactjstypescriptmaterial-uijsx

Tips for eliminating Ref upon exiting the screen on React / React Native?

When navigating back in React / React Native, I am encountering keyboard flickering caused by the presence of Ref on the screen. I would like to remove it before leaving the screen. The code snippet I am using is as follows: // To focus on the input fie ...

javascriptreactjstypescriptreact-native

The navigator.geolocation.watchPosition call did not return any available position information

I offer a service that monitors the position of devices: getLocation(opts): Observable<any> { return Observable.create(observer => { if (window.navigator && window.navigator.geolocation) { window.navigator.geolocat ...

angulartypescriptgeolocationrxjs

Phaser3 encountering issues while loading files from Multiatlas

Attempting to utilize the multiatlas functionality in Phaser alongside TexturePacker. Encountering this issue: VM32201:1 GET http://localhost:8080/bg-sd.json 404 (Not Found) Texture.js:250 Texture.frame missing: 1/1.png The JSON file can actually be fou ...

jsontypescriptwebpackphaser-frameworktexture-atlas

generate a fresh array with matching keys

Here is an example array: subjectWithTopics = [ {subjectName:"maths", topicName : "topic1 of maths " }, {subjectName:"maths", topicName : "topic2 of maths " }, {subjectName:"English", topicName : &quo ...

arraysangulartypescriptangular8ngfor

Updating reactive form fields with patched observable data in Angular

Struggling with initializing a reactive form in my component's onInit() method, as well as handling data from a service to update or create entries in a MySQL table. The issue lies in using patchValue to pass the retrieved data into the form: compone ...

javascriptangulartypescriptangular-reactive-forms

Exploring Angular component testing through jasmine/karma and utilizing the spyOn method

I have been facing an issue while trying to test my component. Even though the component itself works perfectly, the test keeps generating error messages that I am unable to resolve. Here is the snippet of code that I am attempting to test: export cl ...

javascriptangulartypescripttestingjasmine

Exploring the world of Typescript TSX with the power of generic

Introducing JSX syntax support in Typescript opens up new possibilities. I have an expression that functions smoothly with traditional *.ts files, but encounters issues with *.tsx files: const f = <T1>(arg1: T1) => <T2>(arg2: T2) => { ...

genericstypescriptjsx

Why does the error message "DeprecationWarning: 'originalKeywordKind' deprecated" keep popping up while I'm trying to compile my project?

Upon completing the compilation of my project, I encountered the error message provided below. What does this signify and what steps can I take to resolve it? - info Linting and checking validity of types DeprecationWarning: 'originalKeywordKind' ...

node.jsreactjstypescriptnext.js

Collect the GET parameters as an array of strings when there is only one value

How can I properly pass a string array as a parameter for a GET call? // Passing one value param: filters=Something value: filters: 'Something' // Passing multiple values param: filters=Something&filters=Something else value: filters: [ &ap ...

typescriptgetgoogle-cloud-firestore

Retrieving the inner text of a dragged element using Angular Material's DragAndDrop feature

Can the inner text of a dragged element be retrieved and utilized in the "onDrop" function within Angular's cdkDragAndDrop feature? onDrop(event: CdkDragDrop<string[]>) { if (event.previousContainer === event.container) { moveItemIn ...

angulartypescriptangular-materialangular-cdk-drag-drop

Tips for transforming Http into HttpClient in Angular 5 (or higher than 4.3)

I have successfully implemented code using Http and now I am looking to upgrade it to use the latest HttpClient. So far, I have taken the following steps: In App.module.ts: imported { HttpClientModule } from "@angular/common/http"; Added HttpClientModul ...

angulartypescriptangular4-httpclient

Establish a route nickname for files outside the project directory

I'm currently tackling a project that is divided into multiple angular projects. Within these projects, there are some services that are shared. Is there a way for me to incorporate these services into my project without encountering errors? /root / ...

javascriptangulartypescript

The optimal time to register for events within the Vue lifecycle

Currently, I am developing a Vue2 component using vue-component that includes a subcomponent. Here is an example: <note :bus="bus" :itemId="selectedId"></note> The subcomponent contains the following code snippet: <textarea v-model="text" ...

typescriptvue.jsvuejs2vue-component

"The debate over using 'stringly typed' functions, having numerous redundant functions, or utilizing TypeScript's string enums continues to divide the programming

I have a specific object structure that contains information about countries and their respective cities: const geo = { europe: { germany: ['berlin', 'hamburg', 'cologne'], france: ['toulouse', ' ...

javascripttypescriptfunctionenumsfunctional-programming

Importing Heroicons dynamically in Next.js for more flexibility

In my Next.js project, I decided to use heroicons but faced a challenge with dynamic imports. The current version does not support passing the icon name directly to the component, so I created my own workaround. // HeroIcon.tsx import * as SolidIcons from ...

reactjstypescriptnext.js

Determining a value that increases to yield a fresh sum

I'm currently developing a character generator that determines your score based on the experience points you allocate to it. The scoring system is such that 1 XP gives you a score of 1, 3 XP gives you a score of 2, 6 XP gives you a score of 3, 10 XP g ...

angulartypescript

Passing a reference to a react functional component (react.FC) results in a type error: The property ref is not recognized on the type 'IntrinsicAttributes & Props & { children: ReactNode}'

Currently, I am working on mastering the utilization of forward refs. In a functional component (FC), I am trying to initialize all my refs and then pass them down to its child components so that I can access the canvas instances of some chartjs charts. Ho ...

javascriptreactjstypescriptreact-ref

The error TS2300 arises from the duplicate identifier 'PropertyKey' found in the node_modules/@types/core-js/index.d.ts file

I am encountering errors in the file node_modules/@types/core-js/index.d.ts while using Visual Studio Code IDE: https://i.sstatic.net/fkAej.png After running npm start to serve the application, the following errors are displayed: (list of errors her ...

angulartypescriptpackage.jsontsconfig

Using TypeScript to extract types from properties with specific types

My current challenge involves working with a filter object derived from an OpenAPI spec. The structure of this object is illustrated below: export interface Filters { field1: string[] field2: string[] field3: boolean field4: number } My goal is to ...

typescripttype-mapping