next.js: With MSW example: fetch failed

Verify canary release

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

Provide environment information

❯ npx --no-install next info

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.4.0: Fri Mar 18 00:45:05 PDT 2022; root:xnu-8020.101.4~15/RELEASE_X86_64
Binaries:
  Node: 19.3.0
  npm: 9.2.0
  Yarn: 1.22.19
  pnpm: N/A
Relevant packages:
  next: 13.1.1
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

Which example does this report relate to?

with-msw

What browser are you using? (if relevant)

Chrome 108.0.5359.124 (Official Build) (x86_64)

How are you deploying your application? (if relevant)

next dev

Describe the Bug

TypeError: fetch failed

  cause: Error: getaddrinfo ENOTFOUND my.backend
      at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:107:26) {
    errno: -3008,
    code: 'ENOTFOUND',
    syscall: 'getaddrinfo',
    hostname: 'my.backend'
  },
  page: '/'

Expected Behavior

The fetch should be handled by MSW. However, it seems the request is not resolved by MSW.

To Reproduce

npx create-next-app --example with-msw with-msw-app

Then simply run yarn dev, and check the browser.

Or deploy to Vercel, it will show an error: https://with-msw-pearl.vercel.app/

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 7
Comments: 17 (5 by maintainers)

Most upvoted comments

Hi, the issue seem to have a link with the latest version of node-fetch and its use of ESM only MSW Issue. I personally chose to ask Node to use its previous version of fetch (as a temporary fix) by doing something like this :

"scripts": {
  "dev": "NODE_OPTIONS='--no-experimental-fetch' next dev",
  ...
}

(I’m on Node v18.13.0 BTW)

SylRob on Feb 7, 2023

@andykenward You were right…again 😃. I made your changes to be able to handle the first load and it is working for me on my work computer with this setup: npx --no-install next info

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.2.0: Fri Nov 11 02:03:51 PST 2022; root:xnu-8792.61.2~4/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.18.1
      npm: 8.19.2
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.1.2-canary.1
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Thanks again @andykenward! I owe you a pint. 🍺

farlandlee on Jan 6, 2023

@andykenward thanks again. You are correct. I missed that msw doesn’t support node 18 and I had not changed the version. But when I run the app on node 16, it does, indeed, load on a refresh of the page, just not on the originally load. I had previously tried your solution for getting it to work on the first load, but since it did not work (due to my using node 18), I thought that was a dead end and rolled back. I will make your recommended changes again and try running it on node 16 and see if the problem goes away. I really appreciate your help!

farlandlee on Jan 6, 2023

Using the with-msw example

npx create-next-app@latest --example with-msw with-msw-app

With

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.2.0: Fri Nov 11 02:03:51 PST 2022; root:xnu-8792.61.2~4/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.18.1
      npm: 8.19.2
      Yarn: 1.22.19
      pnpm: 7.22.0
    Relevant packages:
      next: 13.1.1
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

The request works on the second client side request made in the browser. See the below screen recording.

https://user-images.githubusercontent.com/4893048/211056752-a5820a45-9f05-4787-abb4-b7d97d86da60.mp4

The issue of it not working on the first client side request is what I solved in this comment. There is a repo referenced there if you want to try it out.

I also tried 13.1.2-canary.1 version of next and it did the same as 13.1.1. When using Node 16.18.1.

When i switched to using Node 18.13.0. I got the original issue filed by @fullhdpixel . See this great comment about MSW support for Node 18 native fetch support issue.

CleanShot 2023-01-06 at 16 48 16

@farlandlee I’m not sure it’s an OS related issue. You might try checking that the MSW service worker is updated in the browser via the devtools. And also try deleting the .next & node_modules folder in your project if you’ve been changing node versions while trying to solve your issue.

andykenward on Jan 6, 2023