Draft Mode isEnabled is always false on the Edge Runtime

[alvarlagerlof]

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 Thu Jun 15 02:15:40 UTC 2023
    Binaries:
      Node: 18.16.0
      npm: 8.11.0
      Yarn: 1.22.19
      pnpm: N/A
    Relevant Packages:
      next: 13.4.8-canary.14
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.5
    Next.js Config:
      output: N/A

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

App directory (appDir: true)

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

https://github.com/alvarlagerlof/next-js-draft-mode-repro

To Reproduce

Run the repro in dev or build.

1. Click the link on / to enable draft mode.
2. Go back to /
3. Draft mode is not enabled

Describe the Bug

isEnabled from draftMode() always returns false with export const runtime = "edge"

Expected Behavior

isEnabled returns true after draftMode().enable() is ran,

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

Seems to happen locally, in dev, build, and on Vercel

_NEXT-1477

[mattddean]

It also seems like draft mode cannot be enabled from an edge Route Handler.

Navigating to /api/draft results in an error: "Error: Invariant: previewProps missing previewModeId this should never happen"

// /api/draft/route.ts
import { draftMode } from 'next/headers'

export const runtime = 'edge'

export async function GET() {
  draftMode().enable()
  return new Response('Draft mode is enabled')
}

Additionally, if export const runtime = 'edge' is configured on my root layout, I get the same "Error: Invariant: previewProps missing previewModeId this should never happen" error when navigating to /api/draft, whether or not /api/draft exports runtime = 'edge' itself. I'm not sure if the runtime constant is a valid layout configuration, but Next's TypeScript plugin seems to recognize that export on layout.tsx files.

[nickjackson]

There is a e2e test suite that suggests it should work, but I don't think any of those tests are actually testing pages with export const runtime = 'edge'.

The tests are just testing the standard node implementation.

[DanielHirunrusme]

Any update on this? Experiencing this issue as well.

[dsbrianwebster]

Hoping this can make its way up the priority list for the next release. we sadly find ourselves having to opt-out of edge runtime on the majority of our projects/routes because of this issue.

[lightningspirit]

I ended up using request.cookies.has('__prerender_bypass') to test is draft mode is enabled. Temporary fix, not totally reliable for future upgrades.

[Multiply]

We're seeing either the same, or a similar issue when running in development.

In development mode, if no prerender manifest exists on the server instance it'll create a new one, which results in a new id for __prerender_bypass as expected.
However, the prerender manifest is stored on the server instance in memory, and is not shared with other server instances, such as the worker it starts up by defualt.

Maybe the prerender manifest should be written to disk in development-mode as well?

Edit: It's worth mentioning this only happened after upgrading from 13.x to 14.x. I don't know which version in between started "experimenting" with an IPC bridge, and workers, but that's definitely where it broke for us.

Edit 2: Another note to add, is that previously when an invalid __prerender_bypass was supplied, our server would simply just fail with a 5xx status code, now it simply removes the cookie silently.

[stephenmatthews]

Is there an update on this? Upgraded to 14.2 and still having the same issue in development?

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