search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
125.44k stars 26.79k forks source link

Link prefetch error when draft mode enabled #61155

Open chalosalvador opened 8 months ago

chalosalvador commented 8 months ago

Link to the code that reproduces this issue

https://github.com/monogram-labs/nextjs-prefetch-draft-mode

To Reproduce

  1. Deploy the application to Vercel. Here's a demo already deployed.
  2. Click the "Enable draft mode" link
  3. The devtools console will show the 500 error when trying to prefetch the link.
image
  1. The error also appears in the Vercel logs: 
    ⨯ 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-NOEMJORR.js:1:8898) {
page: '/about'
}
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-NOEMJORR.js:1:8898) {
page: '/about'
}
Error: Runtime exited with error: exit status 1
Runtime.ExitError
    image

Current vs. Expected behavior

Link prefetch should not happen when in draft mode.

Provide environment information

This happens when the app is deployed in Vercel. It does not happen in localhost.
Tested in Chrome and Safari.

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

This happens only when deployed to Vercel not in localhost.

everettglovier commented 4 months ago

Experiencing the same bug. It only happens with draftMode. I was unable to pinpoint the exact cause until I found this thread! It is definitely draftMode related.