Live Preview: Vercel 404 & 500 Error in Logs

Hello Prismic People!

I pushed a small code change today (BingSiteAuth.xml) and after the build completed, I noticed the following (probably been the for a while):

When I navigate to two of my routes (/blog or /projects), I receive a not found (404). I decided to build the project in Netlify to see if might be an issue related to Vercel as I don't get the 404 when building locally. Netlify built the project and all the routes work.

I then checked the Vercel logs. Thats when I noticed the following 500 that occurs when using Live Preview set to my production domain/slice-simulator:

⨯ Error: Invariant: expected pageData to be a string, got undefined
    at r3.renderToResponseWithComponentsImpl (/var/task/node_modules/next/dist/compiled/next-server/
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async r3.renderPageComponent (/var/task/node_modules/next/dist/compiled/next-server/
    at async r3.renderToResponseImpl (/var/task/node_modules/next/dist/compiled/next-server/
    at async r3.pipeImpl (/var/task/node_modules/next/dist/compiled/next-server/
    at async r3.handleCatchallRenderRequest (/var/task/node_modules/next/dist/compiled/next-server/
    at async r3.runImpl (/var/task/node_modules/next/dist/compiled/next-server/
    at async r3.handleRequestImpl (/var/task/node_modules/next/dist/compiled/next-server/
    at async Server.<anonymous> (/var/task/___next_launcher.cjs:30:5)
    at async Server.<anonymous> (/opt/node-bridge/bridge-server-BGIDXK2J.js:1:9443) {
  page: '/'

This kind of error is not helping keep my hair in place. Any thoughts? I've tried clearing every cookie I could find. I've purged Vercel caches and redeployed. Nada, zip, zilch seems to work.


  • I have created a new Vercel project to see if that might serve the projects and blog page properly. Still no success.

  • I created a branch and switched from bun to yarn to see if that might be the cause. Still no success.

  • I was able to get the /blog and /projects to stop 404-ing by removing the content index slice. This brought a new error once I replaced the slice (see below)

⨯ Page changed from static to dynamic at runtime /blog, reason:
see more here
    at u (/var/task/.next/server/chunks/439.js:1:4143)
    at Object.get (/var/task/.next/server/chunks/264.js:52:3098)
    at f (/var/task/.next/server/chunks/18.js:1:482)
    at em (/var/task/node_modules/next/dist/compiled/next-server/
    at em (/var/task/node_modules/next/dist/compiled/next-server/
    at eR (/var/task/node_modules/next/dist/compiled/next-server/
    at eP (/var/task/node_modules/next/dist/compiled/next-server/
    at Timeout._onTimeout (/var/task/node_modules/next/dist/compiled/next-server/
    at listOnTimeout (node:internal/timers:569:17)
    at process.processTimers (node:internal/timers:512:7) {
  page: '/blog'

In case anyone else experiences a strange day like me related to the Page changed from static to dynamic at runtime error. Here's what I was able to determine.

In my src/app/[uid]/page.tsx (page/server component), I am using searchParams. I was passing searchParams to the <SliceZone /> component. I'm not sure why it was a problem today and not the weeks before, but it gave me the above static to dynamic error. I was able to "fix" it by passing a pageNumber object rather than the entire searchParams.

type Params = { uid: string }
type SearchParams = {
  [key: string]: string | string[] | undefined

export default async function Page({
}: {
  params: Params
  searchParams: SearchParams
}) {
  const client = createClient()
  const page = await client.getByUID('page', params.uid).catch(() => notFound())
  const pageNumber = { page: }
  return (

I now have my blog and projects back. This is done so I can handle pagination. I hope this saves someone someday.

I did not solve or address the page builder issues however.