http not defined when used with bun

[sebastianbuechler]

I used MSW v1.3.2 with bun (v1.1.17) successfully and now I wanted to upgrade to v2 (i.e. to v2.3.4) like this:

index.tsx

async function enableMocking() {
  if (import.meta.env.DEV) {
    const { worker } = await import("../mocks/browser");
    return worker.start({ onUnhandledRequest: "bypass" });
  }
  return Promise.resolve();
}

enableMocking()
  .then(() => {
    createRoot(document.getElementById("root") as HTMLElement).render(
      <StrictMode>
        <App />
      </StrictMode>
    );
  });

And without handlers I can see that MSW is enabled by observing in the console: [MSW] Mocking enabled.

However, when I now add an example handler from the docs like this it breaks: handlers.ts

import { http, HttpResponse } from "msw";

export const handlers = [
  http.get("https://example.com/user", () => {
    return HttpResponse.json({
      id: "c7b3d8e0-5e0b-4b0f-8b3a-3b9f4b3d3b3d",
      firstName: "John",
      lastName: "Maverick",
    });
  }),
];

Error: handlers.ts:4 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'get') at handlers.ts:4:8

If I try a GraphQL handler it works as expected:

  graphql.query("ListPosts", ({ query }) => {
    console.log('Intercepted a "ListPosts" GraphQL query:', query);
  })

The mockServiceWorker.js file is in the public directory and I can correctly access it when my application is served. Why is http not defined? Is it because of Bun?

[kettanaito]

Hi, @sebastianbuechler. There seems to be a few things going on.

First, you are using msw/browser, which, I think, Bun has nothing to do with..? Sorry, I'm not aware if Bun ships the entire devkit that allows spawning apps in the browser too. Even if it does, that cannot be connected with the Interceptors library where we're in.

Secondly, the error strongly suggests that the msw package is still old (1.x). Run npm i msw@latest, clear any dependency cache, and re-run your app. I'm fairly certain the error will be fixed then.

If not, please submit a reproduction repository where I can take a look. We generally don't promise Bun compatibility because promising Node.js compatibility is enough (Bun aims to be compatible with Node.js). If there are any issues with MSW itself, I will be happy to find them and fix them. Thanks!

[sebastianbuechler]

Hi, @sebastianbuechler. There seems to be a few things going on.

First, you are using msw/browser, which, I think, Bun has nothing to do with..? Sorry, I'm not aware if Bun ships the entire devkit that allows spawning apps in the browser too. Even if it does, that cannot be connected with the Interceptors library where we're in.

Secondly, the error strongly suggests that the msw package is still old (1.x). Run npm i msw@latest, clear any dependency cache, and re-run your app. I'm fairly certain the error will be fixed then.

If not, please submit a reproduction repository where I can take a look. We generally don't promise Bun compatibility because promising Node.js compatibility is enough (Bun aims to be compatible with Node.js). If there are any issues with MSW itself, I will be happy to find them and fix them. Thanks!

Hi @kettanaito, thanks four your reply!

You're absolutely right. It was a mix up of the old package still being present. I think my monorepo setup was not properly configured for updating dependencies. Now it seems to work with msw/browser, as I use MSW for mocking during development and import it that way.

Thanks for the hint and your work for MSW 👍