Type error using default RequestHandler type

[Erazihel]

Hey guys,

I've set up msw in my project and I must say that I'm pretty amazed 👍

Everything is working flawlessly but I have a TypeScript error that I can't get rid off without using any.

Here is my code:

export function handleCourse(): RequestHandler {
  return rest.get(COURSE_URL, (_, res, ctx) => res(ctx.json({ foo: 'bar' })));
}

And this is the TypeScript error that I get:

mocks/handlers.ts:22:3 - error TS2322: Type 'RequestHandler<MockedRequest<DefaultRequestBodyType, RequestParams>, RestContext, ParsedRestRequest, MockedRequest<...>, any>' is not assignable to type 'RequestHandler<MockedRequest<DefaultRequestBodyType, RequestParams>, { status: (statusCode: number, statusText?: string | undefined) => ResponseTransformer<...>; set: <N extends string | Record<...>>(...args: N extends string ? [...] : [...]) => ResponseTransformer<...>; delay: (durationMs?: number | undefined) => R...'.
  Types of property 'resolver' are incompatible.
    Type 'ResponseResolver<MockedRequest<DefaultRequestBodyType, RequestParams>, RestContext, any>' is not assignable to type 'ResponseResolver<MockedRequest<DefaultRequestBodyType, RequestParams>, { status: (statusCode: number, statusText?: string | undefined) => ResponseTransformer<...>; set: <N extends string | Record<...>>(...args: N extends string ? [...] : [...]) => ResponseTransformer<...>; delay: (durationMs?: number | undefined) =>...'.
      Types of parameters 'context' and 'context' are incompatible.
        Type '{ status: (statusCode: number, statusText?: string | undefined) => ResponseTransformer<any>; set: <N extends string | Record<string, string | string[]>>(...args: N extends string ? [...] : [...]) => ResponseTransformer<...>; delay: (durationMs?: number | undefined) => ResponseTransformer<...>; fetch: (input: string ...' is not assignable to type 'RestContext'.

22   return rest.get(COURSE_URL, (_, res, ctx) => res(ctx.json({ foo: 'bar' })));
     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

By overcharging with any the RequestHandler type, the error goes away but I don't like setting a any as a type...

export function handleCourse(): RequestHandler<MockedRequest, any> {
  return rest.get(COURSE_URL, (_, res, ctx) => res(ctx.json({ foo: 'bar' })));
}

Is there a way to achieve this without any?

Thanks for your time 🙏

[marcosvega91]

Hi @Erazihel thanks for reaching us :).

You can do in this way

import {
  rest,
  RequestHandler,
  MockedRequest,
  RequestParams,
  restContext,
  ParsedRestRequest,
} from 'msw'


export function handleCourse(): RequestHandler<
  MockedRequest<null, RequestParams>,
  typeof restContext,
  ParsedRestRequest,
  MockedRequest<null>,
  string
> {
  return rest.get(COURSE_URL, (_, res, ctx) => res(ctx.json({ foo: 'bar' })))
}

You can also drop the response type because it will be inferred from the return value

export function handleCourse() {
  return rest.get(COURSE_URL, (_, res, ctx) => res(ctx.json({ foo: 'bar' })))
}

[kettanaito]

I wonder if return type inference would be preferable in this scenario.

[dwjohnston]

Just mentioning that four years later, I'm running into a bizarre issue where, if I have this file:

import { http, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
 
export const handlers = [
  // Intercept "GET https://example.com/user" requests...
  http.get('https://example.com/user', () => {
    // ...and respond to them using this JSON response.
    return HttpResponse.json({
      id: 'c7b3d8e0-5e0b-4b0f-8b3a-3b9f4b3d3b3d',
      firstName: 'John',
      lastName: 'Maverick',
    })
  }),
]

//                                       👇
export const server = setupServer(...handlers)

In a brand new project this is fine, but in my existing project I see this error:

Argument of type 'HttpHandler' is not assignable to parameter of type 'RequestHandler<RequestHandlerDefaultInfo, any, any, RequestHandlerOptions> | WebSocketHandler'.
  Type 'HttpHandler' is not assignable to type 'RequestHandler<RequestHandlerDefaultInfo, any, any, RequestHandlerOptions>'.
    Types have separate declarations of a private property '__kind'.ts(2345)

Both are using MSW 2.8.0

No idea what this is about. Some other type has been overiden somewhere?

[f1nl0wt3ch]

Thanks for bumping this. I've added a type test for this in #2502 and it seems to be passing.

One thing I recommend is making sure you aren't loading an old version of MSW or multiple versions of MSW by accident in the same app. Removing your node_modules and re-installing dependencies should be enough to ensure that.

Another possible reason is running an old version of TypeScript. Note that at the moment of writing this, MSW officially supports TS 5.0-5.8 as older versions are considered EOL. Upgrade your typescript dependency if it's not in that range and see if that helps.

I am using TS 5.2.2 and still get that issue. Anyone have the same issue with me?

[RichardLindhout]

Yes i keep getting this issue.

[nuriaheep]

I am using TS 5.2.2 and still get that issue. Anyone have the same issue with me?

Yes, I'm using typescript 5.6.3 and I have this issue

[ItAve]

In package.json

I changed
"msw": "^2.7.5",
To
"msw": "~2.7.5",

So something must have sneaked in on a new version.

[devpeerapong]

Also, if anyone has a running reproduction of this, please share the link so I can see what's going on. I cannot reproduce this issue on the latest version of msw.

Here is the reproduction repo. https://github.com/devpeerapong/msw-type-error

You can run tsc or see an error in the editor.

The error happens when you import from both msw/node and msw/browser (for SSR application).

Based on this message Types have separate declarations of a private property '__kind'.
I looked at the build artifact in node_modules. The issue might come from 2 type files for different module system. HttpResponse-DAxViIqi.d.mts and HttpResponse-CSWX6ahe.d.ts