how to integrate msw in react-router v7?

[codenoobforreal]

Can I do it without custom framework?
https://reactrouter.com/start/framework/custom#custom-framework

[elatomo]

Hi @codenoobforreal! I just came across your question, and even though it's a bit old, I thought I'd reply for others who might be wondering about this:

You don't need a custom framework. You can simply reveal either your entry.client.tsx file or your entry.server.tsx file, depending on whether you are building an SPA or an SSR app, and what you want to mock. Then, hook up the worker there.

For example, if you are building an SPA, first reveal your entry.client.tsx with react-router reveal entry.client (see React Router Documentation).

You can then update it to start the worker, like in the example below:

import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import { HydratedRouter } from "react-router/dom";

async function enableApiMocking() {
  if (process.env.NODE_ENV !== "development") {
    return;
  }

  const { worker } = await import("~/mocks/browser");

  console.info("Starting MSW service worker...");
  return worker.start();
}

enableApiMocking().then(() => {
  startTransition(() => {
    hydrateRoot(
      document,
      <StrictMode>
        <HydratedRouter />
      </StrictMode>,
    );
  });
});

[codenoobforreal]

thank you!