Get help on Discord

Issue with process.env variables causing configuration error in Sanity client setup.

10 replies
Last updated: Apr 22, 2022
Hi All, up until this morning, my Sanity client config was working properly reading from .env and now it isn't. I have this as the client setup:
import sanityClient from "@sanity/client"

const options = {
  dataset: process.env.SANITY_DATASET_NAME,
  projectId: process.env.SANITY_PROJECT_ID,
  useCdn: process.env.NODE_ENV === "production",
}

export default sanityClient(options)
Now it's throwing `Uncaught Error: Configuration must contain `projectId``

If I hardcode the dataset name and project ID in the options object, it works fine.

Anyone else running into this?
AI Update

This is almost certainly an environment variable loading issue rather than a Sanity-specific problem. Since hardcoding works but process.env values don't, your environment variables aren't being loaded at runtime.

Here are the most common causes and solutions:

1. Client-side vs Server-side code

If this code is running in the browser (client-side), process.env won't automatically include your .env file variables. Most frameworks require special prefixes:

  • Next.js: Use NEXT_PUBLIC_ prefix for client-side variables:

    NEXT_PUBLIC_SANITY_PROJECT_ID=your-project-id
NEXT_PUBLIC_SANITY_DATASET_NAME=production

    Then access with process.env.NEXT_PUBLIC_SANITY_PROJECT_ID

  • Vite/Svelte: Use VITE_ prefix and access via import.meta.env.VITE_SANITY_PROJECT_ID

  • Create React App: Use REACT_APP_ prefix

2. Server restart needed

If you just added/changed .env variables, you need to completely stop and restart your dev server. Hot reload doesn't pick up environment variable changes.

3. Wrong .env file location

Make sure your .env file is in the project root (same directory as package.json), not in a subdirectory.

4. .env file not being loaded

Some setups require dotenv to be configured. Add this at the very top of your entry file:

require('dotenv').config()

Quick debugging step:

Add this temporarily to see what's actually available:

console.log('Project ID:', process.env.SANITY_PROJECT_ID)
console.log('Dataset:', process.env.SANITY_DATASET_NAME)

If these log as undefined, your environment variables definitely aren't loading. The "worked this morning" aspect suggests either a dev server that needs restarting, or you recently moved this code from server-side to client-side rendering.

Show original thread
10 replies
Hardcoded, it has all the vars fine. From process.env, it doesn't even get that far. It errors on initConfig

index.js?46cb:369 Uncaught Error: Configuration must contain `projectId`
    at exports.initConfig (config.js?2e28:42:1)
I also tried pulling out those vars into consts using destructuring on process.env above 
options
and got an error saying process is undefined. This is running dev, not build + production
Got it. Since you said it had been working previously, did you change anything about your env file?
.env and the sanity client init file were unchanged. The biggest change related was moving the usage from getStaticProps (next.js) to useEffect
The fact that process was undefined with the destructuring approach leads me to believe it's probably not a sanity issue, but I thought maybe someone else here might have had the same problem.
It does seem like it isn't a Sanity issue, but there have been a ton of questions around how to use env vars lately. Definitely still helpful to debug here! Are you able to share your repo so I can take a look? You can send me a zip of it over DM if you don't want it to be public.
Also sidenote, it's not necessary to obscure your dataset name and project id. Those will be publicly visible when you perform a query. They're not considered secret in the same way an API token it.
Sorry, not allowed to share the repo or codebase. I appreciate the offer to help though! I'll try to figure it out with my teammates.
user M
I figured out the problem and thought I'd let you know in case someone else runs into it. It was an issue with env vars in next.js as explained here: https://nextjs.org/docs/api-reference/next.config.js/environment-variables
Thanks for the update Jim! Really appreciate it!

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?