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

[ajfAfg]

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

2. 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"}

[AleskiWeb]

Does this discussion here provide any insight? #1209 - I must admit, I too have issues with the initial requests but that may be my somewhat janky implementation and its not key for me personally that the initial SSR bit works

[kettanaito]

Hey, @ajfAfg. Thanks for reporting this.

Could you please update to the latest msw version? You're using 0.44.1 while the latest published version if 0.48.2. That's quite a lot of changes, which may have potentially fixed your issues too.

Please update your reproduction repository and let me know if the issue is still there.

I've read through it and found no apparent reasons why server-side mocking wouldn't work. I can see your setup is based on the NextJS MSW template, which should be functional.

[watch-janick]

@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!

[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 vercel/next.js#43224

[kettanaito]

Another thing to consider is that MSW doesn't officially support Node.js 18. You can follow the progress in #1388. If I were to look into these changes, I'd use Node.js 17.

[kettanaito]

Thanks for fixing the template, @andykenward! Does it function as expected now both in terms of client-side and server-side interception (i.e. this issue is resolved)?

[andykenward]

Thanks for fixing the template, @andykenward! Does it function as expected now both in terms of client-side and server-side interception (i.e. this issue is resolved)?

@kettanaito I've not checked the "reproduction repository" https://github.com/ajfAfg/msw-operation-research in this issue. Will do that now and also try the latest msw 0.49.0. But I wont use node 18.

[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 andykenward/next-with-msw@91d9bbd

To reproduce the client side error before the above changes, checkout commit andykenward/next-with-msw@3d00db8

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]

I've downgraded from ESNext to ES2017 to support more browsers andykenward/next-with-msw@8308df2 .

I think at the moment the only other way to avoid changing these configurations is to run a total custom next.js server when you want to use MSW

[Wekios]

@andykenward thanks man!

We've just recently protected our API route and we didn't put auth headers on the request that went out to that API so we got 2 nasty surprises:

• Some of our static built pages (especially those created getStaticPaths + getStaticProps) were going out to our real API instead of being intercepted.
• The occurrences were random, sometimes it works, but after navigating between pages it fails.

Implementing your solution works for now!