Regression: fetch requests in middleware fail with a body

[ottomated]

Verify canary release

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

Provide environment information

    Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP PREEMPT_DYNAMIC Fri, 15 Jul 2022 15:33:02 +0000
    Binaries:
      Node: 16.15.0
      npm: 8.5.5
      Yarn: 3.2.1
      pnpm: N/A
    Relevant packages:
      next: 12.2.4-canary.0
      eslint-config-next: 12.2.3
      react: 18.2.0
      react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Making a fetch request from middleware that includes a request body fails with TypeError: fetch failed.

Tested in 12.2.2 - succeeds. Fails in 12.2.3 and canary.

Expected Behavior

The fetch request should succeed.

Link to reproduction

https://codesandbox.io/s/jovial-fast-yflq3w?file=/middleware.ts

To Reproduce

1. Load any page
2. Observe the error in the console
3. Remove the line body: ""
4. Observe that there is no error

[joaogarin]

Maybe take a look in https://nextjs.org/docs/messages/middleware-upgrade-guide#no-response-body seems like this has changed in 12.2 so the behaviour is intentional :

"If your Middleware does respond with a body, a runtime error will be thrown"

[balazsorban44]

@joaogarin that only applies to responding (ie: return) from the Middleware. Using fetch should otherwise work as expected.

I could verify in 12.2.3-canary.17 and upwards, so this seems to be related to #38862, thanks for reporting.

[ghost]

is there a solution for that yet?

[dferber90]

@Charlie-007-star Yes, see vercel/edge-runtime#68

[balazsorban44]

#39219 included the fix for this and will be available in the next next@canary release.

[balazsorban44]

This should be out on 12.2.4-canary.11, please check it out!

[trm217]

@balazsorban44 This error started occurring in a project using [email protected].
Unfortunately it is still happening with [email protected].

The code you see below is executed directly in the middleware and still causes the [TypeError] fetch failed exception.

import { NextRequest } from 'next/server'

/**
 * Function to fetch the roles of the user and updated cookies
 * @param req
 */
async function fetchMeObject(
  req: NextRequest,
): Promise<{ me: null | { roles: string[] }; cookie: string }> {
  const response = await fetch(process.env.API_URL, {
    method: 'POST',
    body: JSON.stringify({ query: 'query { me { roles } }' }),
    headers: {
      'Content-Type': 'application/json',
      // Attach headers to the request to ensure `me` is returned
      Cookie: req.headers.get('cookie'),
    },
  })

  if (response.ok) {
    const { data } = await response.json()

    return {
      me: data?.me,
      cookie: response.headers.get('set-cookie'),
    }
  }

  // Return the updated cookie-header in case the request was not successful
  return {
    me: null,
    cookie: response.headers.get('set-cookie'),
  }
}

export default fetchMeObject

[github-actions]

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