instanceof filtering with multiple msw versions

[meesvandongen]

I have recently come across an issue where we had multiple versions of MSW in a monorepo:

• One for the API client project, which defines the handlers which can be mocked.
• One for the e2e test, which uses @msw/playwright
• One for the app project.

@msw/playwright does this at some point:

const handlers = server.listHandlers().filter((handler) => {
  return handler instanceof RequestHandler
})

If there are multiple RequestHandler declarations due to different versions being resolved, this check will fail even if the handler could be used as a request handler.

The behavior then is that it seems like msw is not intercepting anything; in my case this resulted in responses with status code 500 and an empty body.

I don't think this is necessarily a problem on msw side; this discussion is simply to document the behavior. Users of monorepo's should probably use something (e.g. PNPM Catalogs) to prevent this type of issue.

[kettanaito]

Hi, @meesvandongen. Thanks for raising this.

Perhaps we can help with this kind of issues as well by setting a loose peer dependency version on packages like @msw/playwright so they end up using the msw version you have installed.

A pull request would be welcome here!

[alexlafroscia]

Just to add a note about how I ran into this problem, in case anyone else runs into this in the future: I encountered this same instanceof issue with the same version of msw due to the way that pnpm includes peer dependency versions in the path to the module that it resolves. In my case, I was using @msw/playwright to hook up some API mocks that exist in a separate package.

The RequestHandler constructor in each case came from two separate paths that were almost the same, except for a different typescript peer dependency

This results in the instanceof filtering failing. In my case I'm already using pnpm catalogs to try to preempt this kind of problem, but there are still rough edges here that are tough to avoid!

The fix, in my case, was to make sure that the same version of typescript was being used in all of the packages in my mono-repo (which catalog was also helpful for).

[kettanaito]

Worth nothing that we are moving away from instanceof checks in #2650 and will only rely on the handler's kind property for filtering. This should prevent issues such as this one.