Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
benmerckx opened this issue Jan 30, 2024 · 2 comments · Fixed by #62121
Closed
Labels
bug Issue was opened via the bug report template. locked Navigation Related to Next.js linking (e.g., <Link>) and navigation.

Comments

@benmerckx
Copy link
Contributor

benmerckx commented Jan 30, 2024

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:

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

@benmerckx benmerckx added the bug Issue was opened via the bug report template. label Jan 30, 2024
@github-actions github-actions bot added the Navigation Related to Next.js linking (e.g., <Link>) and navigation. label Jan 30, 2024
Ethan-Arrowood added a commit that referenced this issue Feb 21, 2024
### What?

In today's implementation, requests that don't end in `.rsc` are getting
the data request query. We need to remove this toggle to prevent them
from 500'ing.

### Why?

The invariant triggered was:


https://github.com/vercel/next.js/blob/212553958c671ea1f71d96fbc97ea4b9e5019bf3/packages/next/src/server/base-server.ts#L2838-L2842

Crawling up the code, the conditional:


https://github.com/vercel/next.js/blob/212553958c671ea1f71d96fbc97ea4b9e5019bf3/packages/next/src/server/base-server.ts#L2815

must be `true`.

The variable `isDataReq` is set here:


https://github.com/vercel/next.js/blob/212553958c671ea1f71d96fbc97ea4b9e5019bf3/packages/next/src/server/base-server.ts#L1833-L1839

This conditional expression is a bit complex, but it simplifies down to:
- `isDataReq` is `true` when (TODO)
- `isDataReq` is `false` when (TODO)

### How?

Closes NEXT-2341
Fixes #61377

Tested manually by:
- Building and packaging this branch locally
- Deploying tarball and then depending on it as the Next.js version for
an example app similar to the one reported by #61377
- Inspecting console for 500 errors.

---------

Co-authored-by: JJ Kasper <jj@jjsweb.site>
Co-authored-by: Zack Tanner <zacktanner@gmail.com>
@IlirEdis
Copy link

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?

Ethan-Arrowood added a commit that referenced this issue Feb 28, 2024
### What?

In today's implementation, requests that don't end in `.rsc` are getting
the data request query. We need to remove this toggle to prevent them
from 500'ing.

### Why?

The invariant triggered was:


https://github.com/vercel/next.js/blob/212553958c671ea1f71d96fbc97ea4b9e5019bf3/packages/next/src/server/base-server.ts#L2838-L2842

Crawling up the code, the conditional:


https://github.com/vercel/next.js/blob/212553958c671ea1f71d96fbc97ea4b9e5019bf3/packages/next/src/server/base-server.ts#L2815

must be `true`.

The variable `isDataReq` is set here:


https://github.com/vercel/next.js/blob/212553958c671ea1f71d96fbc97ea4b9e5019bf3/packages/next/src/server/base-server.ts#L1833-L1839

This conditional expression is a bit complex, but it simplifies down to:
- `isDataReq` is `true` when (TODO)
- `isDataReq` is `false` when (TODO)

### How?

Closes NEXT-2341
Fixes #61377

Tested manually by:
- Building and packaging this branch locally
- Deploying tarball and then depending on it as the Next.js version for
an example app similar to the one reported by #61377
- Inspecting console for 500 errors.

---------

Co-authored-by: JJ Kasper <jj@jjsweb.site>
Co-authored-by: Zack Tanner <zacktanner@gmail.com>
Copy link
Contributor

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 14, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template. locked Navigation Related to Next.js linking (e.g., <Link>) and navigation.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants