Live Preview: Vercel 404 & 500 Error in Logs

Developing with Prismic
1

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/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: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.

Updates:

  • 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: searchParams.page
see more here https://nextjs.org/docs/messages/app-static-to-dynamic-error
    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/app-page.runtime.prod.js:12:131226)
    at em (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:131805)
    at eR (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:134623)
    at eP (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:135332)
    at Timeout._onTimeout (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:132112)
    at listOnTimeout (node:internal/timers:569:17)
    at process.processTimers (node:internal/timers:512:7) {
  page: '/blog'
}
2

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,
  searchParams,
}: {
  params: Params
  searchParams: SearchParams
}) {
  const client = createClient()
  const page = await client.getByUID('page', params.uid).catch(() => notFound())
  const pageNumber = { page: searchParams.page }
  return (
    <SliceZone
      slices={page.data.slices}
      components={components}
      context={pageNumber}
    />
  )
}

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.