Using ky with edge functions works on prod but fails on local Next.js dev server

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:17:10 PDT 2022; root:xnu-8020.140.49~2/RELEASE_X86_64
Binaries:
  Node: 16.18.0
  npm: 8.19.2
  Yarn: 1.22.19
  pnpm: 7.13.5
Relevant packages:
  next: 12.3.2-canary.29
  eslint-config-next: 12.3.1
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

106.0.5249.119

How are you deploying your application? (if relevant)

next dev

Describe the Bug

ky is a small wrapper around fetch. The following edge function works fine in production: https://next-edge-test-yl6y.vercel.app/api/ky, but it produces an error when run locally with next dev:

import { NextRequest, NextResponse } from 'next/server'
import ky from 'ky'

export default async function handler(req: NextRequest) {
  const data = await ky
    .post('https://httpbin.org/post', {
      json: { test: true }
    })
    .json()
  console.log(data)

  return NextResponse.json(data)
}

export const config = {
  runtime: 'experimental-edge'
}

(source)

Visiting this edge function locally results in the error “TypeError: Request with GET/HEAD method cannot have body.”:

Expected Behavior

Visiting this edge function locally should work as it does in production, producing a valid JSON output: https://next-edge-test-yl6y.vercel.app/api/ky

This is presumably due to some inconsistency with how Next.js is polyfilling fetch or one of it’s related globals. Is Next.js properly polyfilling all of the related globals as ky-universal does here? https://github.com/sindresorhus/ky-universal/blob/main/index.js

Link to reproduction

https://github.com/transitive-bullshit/next-edge-test

To Reproduce

1. Clone https://github.com/transitive-bullshit/next-edge-test/blob/main/pages/api/ky.ts
2. yarn install (or whatever package manager)
3. yarn dev
4. Visit http://localhost:3000/api/ky

[Kikobeats]

I tried to understand what’s happening.

If I create a minimal ky@0.31.3 and undici@5.11.0 interaction (that’s pretty much what Edge runtime does) it works:

import { fetch, Headers, Request, Response } from 'undici'

globalThis.fetch = fetch
globalThis.Headers = Headers
globalThis.Request = Request
globalThis.Response = Response

const { default: ky } = await import('ky')

;(async () => {
  const data = await ky
    .post('https://httpbin.org/post', {
      json: { test: true }
    })
    .json()
  console.log(data)
})()

so I suspect the issue is actually in the Next.js transpilation layer, or in the Edge Runtime tweaks over undici. I have to go deep.

[balazsorban44]

My bad, I actually noticed I was on the wrong repo. 🤦. I am investigating this still since there should be no difference between local/production deployment behavior anyway.

FWIW, Node.js now uses undici as it’s fetch implementation since Node.js 18. (although still marked experimental).