MSW intercept for fetch of next.js 13 app dir server component

[GomaGoma676]

Currently I'm trying to mock the api response for data fetching with react server component (next.js 13 app dir),
so far msw intercept only occurs with explicit import of node-fetch in server component, with fetch which extended by Vercel was not intercepted by msw. does anyone have solution ?

page.tsx (server component)

import fetch from "node-fetch";

type User = {
  id: number;
  name: string;
};

async function fetchUsers() {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  if (!res.ok) {
    throw new Error("Failed to fetch data in server");
  }
  const news: User[] = await res.json();
  return news;
}
export default async function Page() {
  const users = await fetchUsers();
  return (
    <main>
      <ul className="m-3">
        {users.map((user) => (
          <li key={user.id}>
            <p> {user.name}</p>
          </li>
        ))}
      </ul>
    </main>
  );
}

[kettanaito]

Hi. We don't support the Next 13 App directory at the moment. The App directory itself is in beta and we won't be supporting it until it's stable.

Next has removed the _app.js API for us to instantiate MSW, so we would have to find a different approach. I had some luck with integrating MSW using React Server Components but there are a few challenges in regards to how Next works internally that prevent us from moving forward.

[ZachShaw]

@kettanaito now that the app directory is stable, is support for Next 13 on the horizon at all? Would be helpful to know if we need to consider alternatives for now.

[WilliamZimmermann]

@kettanaito, what do you thing that now, that App is stable, put it in the roadmap of msw?

[mikeyfarina]

@kettanaito, bump. App directory has been stable for about a week, curious if there were more thoughts on support yet?

[KevinKra]

there is a dedicated thread here: #1644

short answer as of writing is no, nextjs breaks things,

[dmend3z]

Given that the current version is already stable, is there any plan or decision about whether there will be an update?

[WilliamZimmermann]

I'm having similar problems. It looks that both MSW and also MirageJS doesn't work well with NextJS 13 apps...

[elliotwestlake]

Also interested in if there is any movement on this? Fully understand the team at vercel need to get involved.

For anyone looking for a temporary solution - we've setup a basic express server that acts as a mock server. It's not perfect, but works well for now!

[danielbeardsley]

Can you expand on this temporary solution a little, what does this look like?

[PeterByun]

I use a simple Express-based mock API server with nodemon as a workaround.
It should work fine because I'm just replacing MSW with an Express server.

// index.ts
import express from “express”;
import { registerHandlers } from “./mock-api-handlers/index.ts”;

const app = express();
const port = 3001;

registerHandlers(app);

app.listen(port, () => {
  console.log(`Mock API server is listening on port ${port}`);
});

// mock-api-handlers/index.ts
import { Express } from “express”;

const registerHandlerA = (app: Express) => {
  app.get(‘/api/path’, (req, res) => {
    const mockApiResponse = {};
    return res.status(200).json(mockApiResponse);
  });
}

export const registerHandlers = (app: Express)  => {
  registerHandlerA(app);
}

To spin up the mock API server, add a dev script to the package.json:

// package.json
“scripts”: {
  “dev:mock-api”: “nodemon --watch ‘path-to-mock-api-server/*.ts’ --exec ‘ts-node-esm’ path-to-mock-api-server/index.ts”
}

[elliotwestlake]

We have a very similar setup to @PeterByun

[kettanaito]

Hi. Thanks for reporting this. Please see #1644 and let's use that issue for any related discussions. Thanks.