pronoun Posts - Answer Overflow

pronoun

•Created by pronoun on 6/14/2024 in #workers-help

@cloudflare/worker-types ReadableStream incompatible with TypeScript default

I'm trying to use the body property of a Response object, but it seems like the type declarations in @cloudflare/worker-types conflict with those in @types/node for ReadableStream. I'm a bit stumped as to why TypeScript is looking for types from @types/node. Anyone else run into this issue before? Here's some simple code to reproduce the issue with the default TypeScript starter:

const res = await fetch('https://www.example.com');

if (!res.body) {
  throw new Error('No body on request');
}

let body: ReadableStream = res.body;

const res = await fetch('https://www.example.com');

if (!res.body) {
  throw new Error('No body on request');
}

let body: ReadableStream = res.body;

which produces the error:

error TS2345: Argument of type 'import("stream/web").ReadableStream<any>' is not assignable to parameter of type 'ReadableStream<any>'.
  The types returned by 'getReader(...)' are incompatible between these types.
    Property 'readAtLeast' is missing in type 'ReadableStreamDefaultReader<any>' but required in type 'ReadableStreamBYOBReader'.

24 readableStreamConsumer(res.body);
                          ~~~~~~~~

  node_modules/.pnpm/@[email protected]/node_modules/@cloudflare/workers-types/experimental/index.d.ts:2019:3
    2019   readAtLeast<T extends ArrayBufferView>(
           ~~~~~~~~~~~
    'readAtLeast' is declared here.

error TS2345: Argument of type 'import("stream/web").ReadableStream<any>' is not assignable to parameter of type 'ReadableStream<any>'.
  The types returned by 'getReader(...)' are incompatible between these types.
    Property 'readAtLeast' is missing in type 'ReadableStreamDefaultReader<any>' but required in type 'ReadableStreamBYOBReader'.

24 readableStreamConsumer(res.body);
                          ~~~~~~~~

  node_modules/.pnpm/@[email protected]/node_modules/@cloudflare/workers-types/experimental/index.d.ts:2019:3
    2019   readAtLeast<T extends ArrayBufferView>(
           ~~~~~~~~~~~
    'readAtLeast' is declared here.

Not sure what's going on because my tsconfig should ensure TypeScript is only reading from the worker types package:

{
  "compilerOptions": {
    // ...
    "types": ["@cloudflare/workers-types/experimental"]
  },
  // ...
}

{
  "compilerOptions": {
    // ...
    "types": ["@cloudflare/workers-types/experimental"]
  },
  // ...
}

I can do res.body as ReadableStream and it's resolved to the ReadableStream from the worker types, so I think the problem is that the type of fetch is being pulled from @types/node for some reason (I can see that overload if I go to definition in VSCode)

9 replies

Gaming

Programming