500 Internal Server Error with Draft Mode API route using Pages router

[ehowey]

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 21.3.0: Wed Jan  5 21:37:58 PST 2022; root:xnu-8019.80.24~20/RELEASE_ARM64_T8101
    Binaries:
      Node: 19.6.1
      npm: 9.4.0
      Yarn: 1.22.19
      pnpm: 8.6.11
    Relevant Packages:
      next: 13.4.13
      eslint-config-next: 13.4.13
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

Middleware / Edge (API routes, runtime)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/ehowey/test-draftmode-bug

To Reproduce

1. Install packages & run NextJS in dev mode
2. Goto http://localhost:3000/api/draft

Describe the Bug

Here is the code in the api route, taken almost verbatim from the docs:

import type { NextApiRequest, NextApiResponse } from "next";

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  res.setDraftMode({ enable: true });
  res.end("Draft mode is enabled");
}

Here is the error code from the terminal:

TypeError: cookies is not iterable
    at get [headers map sorted] (node:internal/deps/undici/undici:1844:34)
    at node:internal/deps/undici/undici:1865:43
    at Headers Iterator.next (node:internal/deps/undici/undici:1108:26)
    at toNodeOutgoingHttpHeaders (/Users/erichowey/coding/test-draft-bug/node_modules/next/dist/server/web/utils.js:106:31)
    at invokeRender (/Users/erichowey/coding/test-draft-bug/node_modules/next/dist/server/lib/router-server.js:250:122)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async handleRequest (/Users/erichowey/coding/test-draft-bug/node_modules/next/dist/server/lib/router-server.js:422:24)
    at async requestHandler (/Users/erichowey/coding/test-draft-bug/node_modules/next/dist/server/lib/router-server.js:439:13)

In the browser it gives a 500 server error:

on-demand-entries-client.js:49     GET http://localhost:3000/api/draft 500 (Internal Server Error)

Expected Behavior

Activate draft mode

Which browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

N/A

[ehowey]

I did a bit of version testing - works as expected in v13.4.12, breaks in v13.4.13. So some kind of regression between .12 and .13.

[vodkaslime]

Having the same issue. After upgrading to 13.4.13, Server side has error TypeError: cookies is not iterable with same error tracebacks. Any root causes or fixes?

[ehowey]

@vodkaslime I would just downgrade to v13.4.12 for now until this is fixed. I don't expect it will take too long for a fix.

[vodkaslime]

@ehowey Sure hopefully Nextjs team would pick it up and come up with a fix soon.

[vodkaslime]

Btw have you tried upgrading to node 20? I tried locally and looks like it's working. Refer to nodejs/node#46704

[fitiskin]

I guess this is related to the Set-Cookie header handling in undici update.

I am utilising a legacy page router and within it, there is an API route that configures this header in the response as follows:

res.setHeader("Set-Cookie", [
  `${Cookies.ACCESS_TOKEN}=${payload.access_token}; Secure; Expires=${accessTokenExpires}; Path=/`,
  `${Cookies.REFRESH_TOKEN}=${payload.refresh_token}; Secure; Expires=${refreshTokenExpires}; Path=/; HttpOnly`,
]);

However, I have encountered an issue with this approach on Next.js versions higher than v13.4.12 using Node.js 18 LTS. I then upgraded Node.js to version 20+, and it started working.

I suspect that the issue might be connected to #52492 and this particular line: https://github.com/vercel/next.js/blob/canary/packages/next/src/server/web/utils.ts#L119

P.S. For some reason, I can't reproduce it locally even after downgrading back to Node.js 18 (using nvm).

[ricardogarim]

Hey folks. I was facing a similar issue with cookies and headers.

When I ran the code below as an app router api endpoint, I was getting testHeader as null.

export async function GET(req: Request) {
  console.log(req.headers.get('testHeader'))

  return new NextResponse('Hello, Next.js!', {
    status: 200,
    headers: req.headers,
  });
}

After upgrading from Node 18 to 20+ the issue was resolved. I also tested the suggestions above to update Next from a version less than or equal to 13.4.12. Nothing happened until I switched to Node 20+.

Now my working environment is Next 13.4.19 and Node 20.5.1.

[Lstmxx]

Btw have you tried upgrading to node 20? I tried locally and looks like it's working. Refer to nodejs/node#46704

It works, thx.

[shaunwarman]

@timneutkens not everyone in a position to update to node 20. Is there an effort to fix the breaking changes introduced in 13.4.13. Looks related to #52492

[kuldeepsaini23]

Does Next fix this issue I am still getting this error on "next": "13.4.19",

[SyzBeats]

Having the same issue as well

• Next.js Version: 13.5.2
• Node.js Version: 20.7

Host: Netlify

My Draft Script:

const homepageDraft = async (req: NextApiRequest, res: NextApiResponse) => {
    // Check the secret and next parameters
    // This secret is shared between this API route and the directus CMS
    if (req.query.secret !== config.secrets.cmsPreview) {
        return res.status(401).json({ message: 'Invalid token' });
    }

    // Enables Preview Mode
    res.setPreviewData({});
    
    // Also does not work with;
    // res.setDraftMode({ enable: true });

    // Rediretct to the target
    res.redirect('/');
};

[balazsorban44]

Hi, I just tested this and should be working on latest versions of Next.js, please upgrade!

If you are still having this issue, please open a new bug report, thanks!

[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.