🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

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).
Feb 15, 2023, 2:43 AM
First issue:
Feb 15, 2023, 2:44 AM
Second issue:
Feb 15, 2023, 2:44 AM
First issue:
Feb 15, 2023, 2:46 AM
Here is my error log:
Feb 15, 2023, 2:46 AM
I am also new at Vercel, so it could be a whole host of things, I'm sure. Thank you!
Feb 15, 2023, 2:47 AM
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
Feb 15, 2023, 2:51 AM
The code for pages/post/[slug].js
Feb 15, 2023, 2:51 AM
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):
Feb 15, 2023, 2:54 AM
Okay, those are the correct ones!
Feb 15, 2023, 2:55 AM
Could you show me the code for post/slug?
Feb 15, 2023, 2:56 AM

// [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 (
          alt={value.alt || ' '}

const Post = ({post}) => {
  const {
    title = 'Missing title',
    name = 'Missing name',
    body = []
  } = post
  return (
      <span>By {name}</span>
      {categories && (
          Posted in
          {categories.map(category => <li key={category}>{category}</li>)}
      {authorImage && (
            alt={`${name}'s picture`}

const query = groq`*[_type == "post" && slug.current == $slug][0]{
  "name": author->name,
  "categories": categories[]->title,
  "authorImage": author->image,
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: {
export default Post
Feb 15, 2023, 3:18 AM
Okay, hopefully I did that right!
Feb 15, 2023, 3:18 AM
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 .
Feb 15, 2023, 9:49 PM
Thank you, thank you
user M
! That's exactly the kind of lead that I needed! Have a wonderful day!
Feb 16, 2023, 5:45 PM
Glad it helped! Let us know if you hit any other stumbling blocks.
Feb 16, 2023, 6:02 PM

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.

Was this answer helpful?