Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

Next.js blog site deployment to Vercel failing with "Cannot read properties of undefined" error

7 replies
Last updated: Nov 13, 2022
Hi I followed this tutorial to make a nextjs blog site and it works perfectly locally, i can see my blog post, but when i deploy it to vercel and deploy sanity studio and add the cors allowance for everything, i am only getting vercel build failures.

https://www.sanity.io/blog/build-your-own-blog-with-sanity-and-next-js
My code is exactly the same as in that blog post, is it because i am using a custom domain?


info  - Generating static pages (0/138)
Error occurred prerendering page "/post/[slug]". Read more: <https://nextjs.org/docs/messages/prerender-error>
TypeError: Cannot read properties of undefined (reading 'title')
    at Post (/vercel/path0/.next/server/pages/post/[slug].js:70:5)
    at d (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498)
    at bb (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
    at a.b.render (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
    at a.b.read (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
    at Object.exports.renderToString (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
    at Object.renderPage (/vercel/path0/node_modules/next/dist/server/render.js:736:46)
    at Function.getInitialProps (/vercel/path0/.next/server/chunks/859.js:618:16)
    at Object.loadGetInitialProps (/vercel/path0/node_modules/next/dist/shared/lib/utils.js:69:29)
Nov 12, 2022, 12:08 AM
my slug page
// [slug].js
import groq from 'groq'
import imageUrlBuilder from '@sanity/image-url'
import { PortableText } from '@portabletext/react'
import client from '../../utils/client'

import { Meta } from '../../layout/Meta';
import { AppConfig } from '../../utils/AppConfig';
import { NavBar } from '../../templates/NavBar';

function urlFor (source) {
  return imageUrlBuilder(client).image(source)
}

const Post = ({post}) => {
  const {
    title = 'Missing title',
    name = 'Missing name',
    categories,
    mainImage,
    authorImage,
    body = []
  } = post
  return (
    <article className='text-xl center'>
      <Meta title={AppConfig.title} description={AppConfig.description} />
      <NavBar />
    
      <h1 className='text-6xl'>{title}</h1>
      <br></br>
      {categories && (
        <ul>
          Posted in
          {categories.map(category => <li key={category}>{category}</li>)}
        </ul>
      )}
      { (
        <div>
          <img
            src={urlFor(mainImage)
              .width(500)
              .url()}
            alt={`${name}'s picture`}
          />
        </div>
      )}
      <br></br>
      {<PortableText
      className={'white-space: pre-line grid gap-14 md:gap-22 lg:gap-24 '}
        value={body}
      />}
    </article>
  )
}

const query = groq`*[_type == "post" && slug.current == $slug][0]{
  title,
  "name": author->name,
  "categories": categories[]->title,
  "authorImage": author->image,
  "mainImage": mainImage,
  body
}`
export async function getStaticPaths() {
  const paths = await client.fetch(
    groq`*[_type == "post" && defined(slug.current)][].slug.current`
  )

  return {
    paths: paths.map((slug) => ({params: {slug}})),
    fallback: true,
  }
}

export async function getStaticProps(context) {
  // It's important to default the slug so that it doesn't return "undefined"
  const { slug = "" } = context.params
  const post = await client.fetch(query, { slug })
  return {
    props: {
      post
    }
  }
}
export default Post
Nov 12, 2022, 12:09 AM
What’s the build error you are getting at vercel?
Nov 12, 2022, 12:40 AM
the build error is in the first log:
Error occurred prerendering page "/post/[slug]". Read more: <https://nextjs.org/docs/messages/prerender-error>
TypeError: Cannot read properties of undefined (reading 'title')

Nov 12, 2022, 3:42 AM
(curious about the answer, subscribing to thread) 👀
Nov 12, 2022, 9:37 AM
user C
any ideas? Not sure why title is not being found on vercel I feel like with all the CORS origins I added it probably isn't an issue with vercel not being able to connect to sanity?
Nov 12, 2022, 11:31 PM
user A
if CORS is good to go typically the next culprit are the variables at Vercel. Here’s a few more things to check:
• If you have localHost specified in your project
• If your build command isn’t correct. at Vercel
• In the event you are using variables, that they match
• That you are using the same version of NPM both locally and on Vercel
Nov 12, 2022, 11:47 PM
Wow I redeployed 3 times out of frustration and all of a sudden its working now.. my nextjs projects might be cursed lmao... Thankyou!
Nov 13, 2022, 4:04 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?