with-msw: Cannot use fetch in node?

[PeterlitsZo]

UPDATE: Maybe it is a bug(?) of MSW. @s-bilic tell me that we can switch node's version from v18 to v16. I never try. But I promise that I will try tonight (tonight in my area 🤣 ).

$ nvm install v16.0
$ nvm use v16.0

Done. This works. It is not a bug of next.js, it is a... emmm... bug(?) of MSW.

---

Verify canary release

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

Provide environment information

    Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP PREEMPT Wed May 18 09:20:01 UTC 2022
    Binaries:
      Node: 18.2.0
      npm: 8.5.5
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 12.1.6
      react: 17.0.2
      react-dom: 17.0.2

I also try in next@12.1.7-canary.23.

Which example does this report relate to?

with-msw

What browser are you using? (if relevant)

Firefox (100.0.2). Chrome(101.0.4951.41 beta)

How are you deploying your application? (if relevant)

Just next

Describe the Bug

I run the code below:

$ npx create-next-app --example with-msw with-msw-app
$ cd with-msw-app
$ yarn
$ yarn dev

Then it raises two errors. The second tells me that the msw needs be inited. So I run code below:

$ npx msw init public/ --save

And now it only raise one error:

(in page)
Server Error
TypeError: fetch failed
This error happened while generating the page. Any console logs will be displayed in the terminal window.

(in console)
error - TypeError: fetch failed
    at Object.processResponse (node:internal/deps/undici/undici:5570:34)
    at node:internal/deps/undici/undici:5896:42
    at node:internal/process/task_queues:140:7
    at AsyncResource.runInAsyncScope (node:async_hooks:202:9)
    at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: Error: getaddrinfo ENOTFOUND my.backend
      at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:83:26) {
    errno: -3008,
    code: 'ENOTFOUND',
    syscall: 'getaddrinfo',
    hostname: 'my.backend'
  },
  page: '/'
}

Expected Behavior

I hope there is no error at all.

To Reproduce

$ npx create-next-app --example with-msw with-msw-app
$ cd with-msw-app
$ yarn
$ npx msw init public/ --save
$ yarn dev

By the way, I still do not get why we need to use the function fetch in node.js environment...

[johnnypea]

Any update, please?

[s-bilic]

Had the same issue, switched from node v18 to v16 as a temp workaround.

[PeterlitsZo]

Had the same issue, switched from node v18 to v16 as a temp workaround.

Oh yeah. I remember that MSW works on v16. Maybe we need just wait or switch to v16.

[kettanaito]

MSW doesn't support Node.js 18 yet. There's a big effort around that support from our contributors (see mswjs/msw#1388). For now, use a supported Node.js version range, which is v14-v17.

[balazsorban44]

See mswjs/msw#1388 (comment)

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.