with-msw example doesn't work.

[dwjohnston]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:12:58 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 8
Binaries:
  Node: 20.16.0
  npm: 10.8.1
  Yarn: 1.22.22
  pnpm: 9.6.0
Relevant Packages:
  next: 15.0.0-canary.102 // Latest available version is detected (15.0.0-canary.102).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 4.9.5
Next.js Config:
  output: N/A

Which example does this report relate to?

with-msw

What browser are you using? (if relevant)

N/A

How are you deploying your application? (if relevant)

npm run dev

Describe the Bug

Running the with-msw example as is , using node 20.16 will show this error:

    at async DevServer.handleRequest (/Users/dwjohns5/git-workspace/with-msw-app-2/node_modules/next/dist/server/dev/next-dev-server.js:336:24) {
  page: '/',
  [cause]: Error: getaddrinfo ENOTFOUND my.backend
      at GetAddrInfoReqWrap.onlookupall [as oncomplete] (node:dns:120:26) {
    errno: -3008,
    code: 'ENOTFOUND',
    syscall: 'getaddrinfo',
    hostname: 'my.backend'
  }

This issue here #56608 appears to be refer to the same issue, and it mentions that it's an issue with Next now using native fetch and MSW having an issue with it.

I updated to [email protected] and the issue still exists. (see: dwjohnston/with-msw-repro@3d959be)

It's worth mentioning this open issue here: mswjs/msw#1340

Expected Behavior

At the very least the with-msw example should show some kind of instance of MSW working, and the documentation provide all the caveats and scenarios where it won't work.

To Reproduce

nvm use 20 
npx create-next-app --example with-msw with-msw-app
cd with-msw-app
npm run dev 

Access application at localhost:3000 and observe server rendering fail.

[bitttttten]

iirc msw does not support server components yet: mswjs/msw#1644 (comment)

i could be wrong in saying that it does not support them, but as i understand it's not quite finalised yet.

[dwjohnston]

@bitttttten thanks for pointing that out - it's informative.

Note though - the with-msw example as it is demonstates use with the pages router, not the app router.

The mswjs/msw#1644 thread suggests that the issue is with how Next is monkey patching fetch - however I've also tried downgrading next to 12.3.4 (As I understand it, the use of native fetch was introduced in 13.0.0) but we see the same error.

Repro here:

https://github.com/dwjohnston/with-msw-repro-next-12.3.4

[dwjohnston]

I'll point out to anyone else who is stumbling upon this - a work around for this issue is to not use native fetch, use node-fetch or axios instead. However, this will mean that you will lose Next's data caching functionality