Get help on Discord

Troubleshooting deployment issues with Sanity and Vercel

15 replies
Last updated: Feb 16, 2023
Hallo folks! I am just getting started on Sanity and I REALLY like it so far! And it's working great in my local environment, but when I'm trying to deploy to Vercel I'm running into a whole heap of issues. I'm trying to follow along this tutorial (which may well be the issue) with some deviations (bc of course): https://www.sanity.io/blog/build-your-own-blog-with-sanity-and-next-js . Anyways, when I try to deploy to Vercel I'm getting a ton of errors and it's gotten to be a bit frustrating! Help would be SUPER appreciated (errors in a reply).
AI Update

Hey there! Congrats on getting started with Sanity – glad you're enjoying it so far! 🎉

I totally understand the frustration with Vercel deployment errors. The tutorial you're following is a solid one, but it was written back in 2023, and there have been some important updates to both Next.js and Sanity since then that could be causing issues.

Without seeing your specific errors, here are the most common issues people run into when deploying that tutorial to Vercel:

Most Common Issues:

1. Environment Variables Missing Vercel needs your Sanity project configuration. Make sure you've added these environment variables in your Vercel project settings:

  • NEXT_PUBLIC_SANITY_PROJECT_ID
  • NEXT_PUBLIC_SANITY_DATASET

You can find these values in your studio/sanity.config.ts file. In Vercel, go to your project → Settings → Environment Variables and add them there.

2. Node.js Version The tutorial uses older versions of Next.js and dependencies. Sanity Studio v3+ requires Node.js 20+, so make sure your Vercel deployment is using Node 20 or higher. You can set this in your package.json:

"engines": {
  "node": ">=20.0.0"
}

3. Build Command Issues Make sure your Vercel project is pointing to the correct directory. If you followed the tutorial's monorepo structure, Vercel needs to know to build from the frontend folder. In your Vercel project settings, set the Root Directory to frontend.

4. CORS Configuration Once you get the build working, you'll need to add your Vercel deployment URL to Sanity's CORS settings. The tutorial mentions this for localhost, but you'll need to add your production URL too (like https://your-project.vercel.app).

5. Outdated Dependencies The tutorial uses @sanity/client which has been updated. Consider using next-sanity instead – it's the official all-in-one toolkit that handles a lot of the configuration automatically and works better with modern Next.js features.

6. TypeScript Configuration If you're using TypeScript (which the tutorial does), make sure your tsconfig.json is properly configured and all type dependencies are installed.

What to do next:

  1. Share your errors! Reply with the specific error messages from your Vercel build logs – that'll help us pinpoint exactly what's going wrong
  2. Check your package versions – compare what you have vs what the tutorial shows
  3. Consider the modern approach – If you're just getting started, you might want to check out the official Sanity + Next.js learning course which uses more up-to-date patterns with the next-sanity toolkit

Drop those error messages here and we'll get you sorted! 💪

First issue:
Second issue:
First issue:
Here is my error log:
I am also new at Vercel, so it could be a whole host of things, I'm sure. Thank you!
The error literally says it there? Import and Export cannot be outside of module code
Show me the code and i will fix it for you
The code for pages/post/[slug].js
Oh no, my apologies. I got confused between my tabs! I DID manage to fix the import/export issues, so sorry. These are the CURRENT issues (it's been a very long day):
Okay, those are the correct ones!
Could you show me the code for post/slug?
Yeah!!!

// [slug].tsx

import groq from 'groq'
import imageUrlBuilder from '@sanity/image-url'
import {PortableText} from '@portabletext/react'
import client from '../../client'

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

const ptComponents = {
  types: {
    image: ({ value }) => {
      if (!value?.asset?._ref) {
        return null
      }
      return (
        <img
          alt={value.alt || ' '}
          loading="lazy"
          src={urlFor(value).width(320).height(240).fit('max').auto('format')}
        />
      )
    }
  }
}

const Post = ({post}) => {
  const {
    title = 'Missing title',
    name = 'Missing name',
    categories,
    authorImage,
    body = []
  } = post
  return (
    <article>
      <h1>{title}</h1>
      <span>By {name}</span>
      {categories && (
        <ul>
          Posted in
          {categories.map(category => <li key={category}>{category}</li>)}
        </ul>
      )}
      {authorImage && (
        <div>
          <img
            src={urlFor(authorImage)
              .width(50)
              .url()}
            alt={`${name}'s picture`}
          />
        </div>
      )}
      <PortableText
        value={body}
        components={ptComponents}
      />
    </article>
  )
}

const query = groq`*[_type == "post" && slug.current == $slug][0]{
  title,
  "name": author->name,
  "categories": categories[]->title,
  "authorImage": author->image,
  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
Okay, hopefully I did that right!
I’m not sure on the babel error, but the others look like they’re caused by your code relying on data that’s undefined. If this is something you’re fetching from Sanity, check that your client is properly configured and that you’ve added Vercel to your CORS origins in sanity.io/manage .
Thank you, thank you
user M
! That's exactly the kind of lead that I needed! Have a wonderful day!
Glad it helped! Let us know if you hit any other stumbling blocks.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?