Enabling draft mode causes "Invariant: expected pageData to be a string, got undefined"

[benmerckx]

Link to the code that reproduces this issue

https://github.com/benmerckx/next-debug
Live: https://next-debug-blush.vercel.app/

To Reproduce

1. Host it on Vercel
2. Click the button

Current vs. Expected behavior

When hosted on Vercel enabling draft mode and then requesting a previously static page dynamically via RSC payload (in this example by router.refresh) results in a 500 error response with the following error shown in the logs:

Error: Invariant: expected pageData to be a string, got undefined

Stack trace

Error: Invariant: expected pageData to be a string, got undefined
    at r3.renderToResponseWithComponentsImpl (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:3521)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async r3.renderPageComponent (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:4780)
    at async r3.renderToResponseImpl (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:5363)
    at async r3.pipeImpl (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:16:17297)
    at async r3.handleCatchallRenderRequest (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:17:36510)
    at async r3.runImpl (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:16:17030)
    at async r3.handleRequestImpl (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:16:16123)
    at async Server.<anonymous> (/var/task/___next_launcher.cjs:25:5)
    at async Server.<anonymous> (/opt/node-bridge/bridge-server-YN63DHRI.js:1:8857)

HTTP request (some headers stripped)

GET https://next-debug-blush.vercel.app/?_rsc=1xuj0
Cache-Control: no-cache
Cookie: __prerender_bypass=xxx
Next-Router-State-Tree: %5B%22%22%2C%7B%22children%22%3A%5B%22__PAGE__%22%2C%7B%7D%5D%7D%2Cnull%2C%22refetch%22%5D
Next-Url: /
Pragma: no-cache
Rsc: 1

HTTP/1.1 500 Internal Server Error
Cache-Control: public, max-age=0, must-revalidate
Content-Disposition: inline; filename="500"
Content-Length: 2130
Content-Type: text/html; charset=utf-8
Server: Vercel
Vary: RSC, Next-Router-State-Tree, Next-Router-Prefetch, Next-Url
X-Matched-Path: /500
X-Vercel-Cache: HIT
X-Vercel-Id: cdg1::7csb7-1706614439461-d4fd6a4ceb4c

Minimal reproduction

import {Toggles} from './toggles'
import {draftMode} from 'next/headers'

export default async function SomeRSC() {
  const {isEnabled} = draftMode()
  return <Toggles isEnabled={isEnabled} />
}

// toggles.jsx

'use client'

import {useRouter} from 'next/navigation'
import {setDraftMode} from './actions'

export function Toggles({isEnabled}) {
  const router = useRouter()
  return (
    <div>
      <p>
        Draft mode is {isEnabled ? 'enabled' : 'disabled'}
      </p>
      <button onClick={async () => {
        await setDraftMode(!isEnabled)
        router.refresh()
      }}>Enable draft Mode</button>
    </div>
  );
}

// actions.js

'use server'

import {draftMode} from 'next/headers'

export async function setDraftMode(isEnabled) {
  if (isEnabled) draftMode().enable()
  else draftMode().disable()
}

This points to a possible issue with a cached version being expected:

next.js/packages/next/src/server/base-server.ts

Lines 2836 to 2840 in b8a7efc

	if (typeof cachedData.pageData !== 'string') {
	throw new Error(
	`Invariant: expected pageData to be a string, got ${typeof cachedData.pageData}`
	)
	}

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
Binaries:
  Node: 18.17.0
  npm: 9.6.7
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 14.1.1-canary.21 // Latest available version is detected (14.1.1-canary.21).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router, Routing (next/router, next/navigation, next/link)

Which stage(s) are affected? (Select all that apply)

Vercel (Deployed)

Additional context

No response

[IlirEdis]

Getting this error on Nextjs v14.1.0 with Sanity. It breaks my LiveVisualEditing functionality.
Is the above fix released or i have to update to canary?

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