Argument of type { status: 500 } is not assignable to parameter of type 'HttpResponseInit'

[benwainwrightawaze]

Prerequisites

• I confirm my issue is not in the opened issues
• I confirm the Frequently Asked Questions didn't contain the answer to my issue

Environment check

• I'm using the latest msw version
• I'm using Node.js version 18 or higher

Node.js version

20.6.0

Reproduction repository

https://github.com/benwainwright/rtm-typescript

Reproduction steps

• clone the above repository
• run npm install
• open src/lib/client.ts in an editor
• remove the @ts-expect-error comment on line 34

Current behavior

The editor produces a type error.

Expected behavior

No type error. As far as I can see, I'm using this function exactly as described in the documentation, and indeed it seems to work as described at runtime.

[kettanaito]

Hi, @benwainwrightawaze. Thanks for reporting this. I've checked the repo you attached, and there's no ts-expect-error comment in the src/lib/client.ts module anymore. Should you update the reproduction steps, perhaps? Or have you found the solution for the issue?

[benwainwrightawaze]

Whoops sorry - I think I moved things around just after I posted this. Try this:

https://github.com/benwainwright/rtm-typescript/blob/6a9869bc5cf827d8fce31eaf6ba7ea3e07fb02af/src/lib/core/client.spec.ts#L36C26-L36C26

[kettanaito]

Why this happens

If you CMD+Click on the .text method, you will see this type declaration from MSW:

static text<BodyType extends string>(body?: BodyType | null, init?: HttpResponseInit): StrictResponse<BodyType>;

Then, CMD+Click on the HttpResponseInit, which is the problematic type:

interface HttpResponseInit extends ResponseInit {
    type?: ResponseType;
}

Now, the global ResponseInit type doesn't exist in your app. Usually, that class ends up in people's code through the "DOM" standard library in TypeScript. But since your project is aimed at Node.js, from what I gather, that type is missing as Node, sadly, doesn't provide proper types for the global fetch API.

You can also validate this rather quickly if you try to annotate an object as ResponseInit in your own code:

const x: ResponseInit = {}
// Cannot find name 'ResponseInit'. Did you mean 'Response'?ts(2552)

How to fix this

You need to expose the fetch types to your TypeScript code. I've just spent 30 minutes looking for an acceptable way to do that, but despite DefinitelTyped claiming they've fixed it in the latest @types/node release, practice proves that not to be the case.

The easiest way to solve this is do add the "DOM" library to your tsconfig.json:

{
  "compilerOptions": {
     "lib": ["ES2023", "DOM"]
  }
}

Now, the standard lid.dom.d.ts will also expose a bunch of browser-oriented types to your source, which is not ideal. Feel free to pursue alternatives to arrive at a better solution. As much as I'd like to recommend one, this isn't an MSW issue and I don't have time to research this in proper detail.

Please post the solution you end up with for others to follow. Thanks!