Gatsby build issues with Sanity blog starter project

12 replies
Last updated: Apr 28, 2020
Hey all! Has anyone had any build issues when trying to run a gatsby build on the Sanity blog starter project? I am getting this…
AI Update

Hey! Gatsby build issues with Sanity starters can definitely be frustrating. Based on what you're experiencing, there are a few common culprits to check:

Most Common Build Errors

1. Missing or Invalid Token for overlayDrafts

If you're seeing overlayDrafts is set to true, but no token is given, you need to add an API token to your gatsby-source-sanity configuration. Create a read token from the API tab in your Sanity project and add it to your gatsby-config.js:

{
  resolve: 'gatsby-source-sanity',
  options: {
    projectId: 'your-project-id',
    dataset: 'production',
    token: 'your-read-token-here',
    overlayDrafts: true,
    watchMode: true
  }
}

2. GraphQL API Not Deployed

The ERROR #gatsby-source-sanity_drafts.10001 error means your GraphQL API hasn't been deployed yet. Run this from your Sanity Studio directory:

sanity graphql deploy

3. Plugin Compatibility Issues

If you're getting window.URL.createObjectURL errors, this is typically caused by outdated plugins. The sanity-plugin-mapbox-input plugin has a known issue with newer versions of mapbox-gl. This plugin is no longer maintained, so you'll need to either:

  • Pin mapbox-gl to a compatible version in your package.json
  • Find an alternative plugin for map functionality
  • Remove the plugin if you're not using it

4. Outdated Packages

The Sanity blog starter might be using older versions. Check your package versions:

npm ls gatsby-source-sanity

The latest gatsby-source-sanity version should be compatible with recent Gatsby versions. Consider updating:

npm update gatsby-source-sanity

Quick Troubleshooting Steps

  1. Make sure your GraphQL API is deployed: sanity graphql deploy
  2. Add a read token to your gatsby-source-sanity config
  3. Check for outdated or unmaintained plugins (especially mapbox-related ones)
  4. Clear Gatsby cache: gatsby clean
  5. Rebuild: gatsby build

If you're still having issues, sharing the specific error message would help diagnose further. The Sanity Discord community is also super helpful for real-time troubleshooting!

Show original thread
12 replies
Thanks for the heads up, User! There should be a line at the top of that file:
const {format} = require('date-fns')
It should also check for empty
publishedAt
fields in the GraphQL query. I’ll check if I can reproduce the issue 👍
Thanks User. Yes I see it. I do have a draft that’s not been published and without a date. That’s been the only change on the project so far..
The graphql does filter them…

filter: { slug: { current: { ne: null } }, publishedAt: { ne: null } }
I had the same kind of problem with date in Gatsby before: that was a matter of date format. Here I see
YYYY/MM
and Gatsby only accept
YYYY-MM
or may be complete
YYYY-MM-DD
. I am not sure though.
Here is a data dump of the data it’s looping through.
Hi again User, I just tried to replicate the issue by starting from scratch at https://www.sanity.io/create with the Gatsby blog template. However, it successfully runs
gatsby develop
and
gatsby build && gatsby serve
in /web, as well as
npm run build
in root. So it looks like we need to dive in deeper to figure out what the issue is.
You created your project via
sanity.io/create , correct? And you get the error when running your build locally? Have you tried re-creating the blog from scratch?
That’s correct yeah. Haven’t tried re-creating it from scratch… i’ll give it a try tomorrow and see how I get on and let you know. Thanks for looking into it User 👍
Ok, so I can confirm that the problem was upgrading the projects dependencies. (forgot that I did that, sorry). So it appears to be a problem with 1 or more of the following deps. (Not including latest gatsby as it still builds on the below version)
Might be worth trying to replicate with that and see if you have the same build problem. I’m unable to go through each dependancie at the moment to see which ones are causing the problems, but if you’d like me to when i’m able, please let me know 🙂
There does seem to be a particular issue around using the latest date-fns, for which
user S
gave a possible work around. with the below

import { format, parseISO } from 'date-fns'
...
const dateSegment = format(parseISO(publishedAt), 'yyyy/MM')
Hi again User, thanks for confirming and for sharing all these extra details 👍 Looks like we have to do some maintenance to bring the template up to the latest version of
date-fns
without breaking it 🙂 Hope you can move forward for now, but I’ll ping you when we release an update.
Thanks User, that would be great. Thanks for your help on this 👍

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.

Was this answer helpful?