@cloudflare/worker-types ReadableStream incompatible with TypeScript default

I'm trying to use the

body

body

body

body property of a

Response

Response

Response

Response object, but it seems like the type declarations in @cloudflare/worker-types conflict with those in @types/node for

ReadableStream

ReadableStream

ReadableStream

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;

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/@cloudflare+workers-types@4.20240605.0/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/@cloudflare+workers-types@4.20240605.0/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/@cloudflare+workers-types@4.20240605.0/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/@cloudflare+workers-types@4.20240605.0/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"]
  },
  // ...
}

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

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

I can do

res.body as ReadableStream

res.body as ReadableStream

res.body as ReadableStream

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

fetch

fetch

fetch is being pulled from @types/node for some reason (I can see that overload if I go to definition in VSCode)

pronounOP•6/15/24, 4:59 AM

For future reference if anyone else ran into the same issue, it seems like it was because of my vitest.config.tsvitest.config.ts — in particular this import (included in the starter template) apparently introduced an additional global type declaration for fetch()fetch():

import { defineWorkersConfig } from '@cloudflare/vitest-pool-workers/config';

import { defineWorkersConfig } from '@cloudflare/vitest-pool-workers/config';

so I was able to solve the issue with a separate tsconfig for files being run in Node (like my Vitest config)

Ppronoun I'm trying to use the [`body`](https://developer.mozilla.org/en-US/docs/Web/API/...

Jürgen Leschner•7/5/24, 6:39 PM

Hi @pronoun - thanks for posting this - I have filed an issue here https://github.com/cloudflare/workers-sdk/issues/6211

GitHub

TypeScript errors for `ReadableStream` in C3 "Hello World" worker ·...

Which Cloudflare product(s) does this pertain to? Impacts C3 "Hello World" TypeScript users - suspected bug in Workers Vitest Integration What version(s) of the tool(s) are you using? @cl...

pronounOP•7/6/24, 1:39 AM

Oh I should’ve done that — thanks!

Jürgen Leschner•7/13/24, 12:03 PM

so I was able to solve the issue with a separate tsconfig for files being run in Node (like my Vitest config)

@pronoun would you mind sharing how you configured a separate tsconfig for vitest (or link to the repo if it's public)

pronounOP•7/13/24, 5:45 PM

huh, I just checked and apparently my setup doesn't do it properly

pronounOP•7/13/24, 5:46 PM

but I just set tsconfig.jsontsconfig.json to only include files in my src/ directory and had a separate tsconfig.node.jsontsconfig.node.json including only config files running in node

pronounOP•7/13/24, 5:51 PM

it seems like vscode doesn't detect this (the DOM declarations are available) but for me running tsc -p tsconfig.node.jsontsc -p tsconfig.node.json is good enough and I still get intellisense for the config so I guess I didn't notice

Jürgen Leschner•7/17/24, 8:29 AM

thanks for clarifying that @pronoun - super helpful.

@cloudflare/worker-types ReadableStream incompatible with TypeScript default

Similar Threads

Similar Threads

Similar Threads