Unable to intercept requests sent during pre-rendering in Next.js

Prerequisites

• I confirm my issue is not in the opened issues
• I confirm the Frequently Asked Questions didn’t contain the answer to my issue

Environment check

• I’m using the latest msw version
• I’m using Node.js version 14 or higher

Node.js version

v18.3.0

Reproduction repository

https://github.com/ajfAfg/msw-operation-research

Reproduction steps

1. Run the following commands

git clone https://github.com/ajfAfg/msw-operation-research.git
cd msw-operation-research/nextjs-rest
npm install
npm run dev

1. Open http://localhost:3000

Current behavior

In src/pages/index.tsx, getServerSideProps fetches data and outputs the received data to the console. Currently, the output is as follows.

server: {"answer":"yes","forced":false,"image":"https://yesno.wtf/assets/yes/14-b57c6dc03aa15a4b18f53eb50d6197ee.gif"}

The data being fetched here is as follows.

$ curl https://yesno.wtf/api
{"answer":"yes","forced":false,"image":"https://yesno.wtf/assets/yes/11-a23cbde4ae018bbda812d2d8b2b8fc6c.gif"}

Expected behavior

The expected output is as follows, since the request is intercepted by the definition in src/mocks/handlers.ts.

server: {"foo":"bar"}

[andykenward]

@kettanaito The issue with NextJS and MSW being enabled to intercept client side requests still exists.

Using node: v16.18.1 npm: 8.19.2

I’ve managed to fix the issue. But it involved changing a few things in the Next.JS setup. Had to enable webpack experiments of topLevelAwait along with changing TypeScript tsconfig.json target from ES5 to ESNext

So I could change _app.tsx from using

  require('../mocks')

to

  await import('../mocks')

You can see all the changes in this commit https://github.com/andykenward/next-with-msw/commit/91d9bbda12baff864913dc9eb95e7d921d75fb27

To reproduce the client side error before the above changes, checkout commit https://github.com/andykenward/next-with-msw/commit/3d00db8f66b12e5496881b18bbd3b903a479f0df

You should get this error on the server from the client side fetch happening in a useEffect

error - FetchError: request to https://my.backend/book failed, reason: getaddrinfo ENOTFOUND my.backend
    at ClientRequest.<anonymous> (/Users/andykenward/Documents/github/andykenward/next-with-msw/with-msw-pages/node_modules/next/dist/compiled/node-fetch/index.js:1:65756)
    at ClientRequest.emit (node:events:513:28)
    at TLSSocket.socketErrorListener (node:_http_client:494:9)
    at TLSSocket.emit (node:events:513:28)
    at emitErrorNT (node:internal/streams/destroy:157:8)
    at emitErrorCloseNT (node:internal/streams/destroy:122:3)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  type: 'system',
  errno: 'ENOTFOUND',
  code: 'ENOTFOUND',
  page: '/'
}

I’ve started to also look into using the new Next.JS app directory changes they are currently working on. But haven’t managed to get it working yet. https://github.com/andykenward/next-with-msw/tree/main/with-msw-app . Will probably hold off until msw native fetch support version is released.

[andykenward]

@kettanaito I’ve tested the NextJS MSW template and it doesn’t work at all, I’ve reported it to them, but if you have any idea how to make it work, that would be awesome 😁 vercel/next.js#43221

Thanks!

@watch-janick The NextJs MSW example is using an exact version of msw 0.47.3 and doesn’t install the latest version. If you update it to the latest version 0.49.0 it should work. I’ve fixed the example in this PR https://github.com/vercel/next.js/pull/43224