Get help on Discord

Error with Sanity configuration and environment variables

11 replies
Last updated: Aug 31, 2022
Error: Configuration must contain `projectId`
    at exports.initConfig (/studio/static/js/app.bundle.js:188293:11)
    at SanityClient.config (/studio/static/js/app.bundle.js:183556:25)
    at new SanityClient (/studio/static/js/app.bundle.js:183524:8)
    at SanityClient (/studio/static/js/app.bundle.js:183521:12)
    at createClient (/studio/static/js/app.bundle.js:183266:64)
    at Object. (/studio/static/js/app.bundle.js:183216:43)
    at __webpack_require__ (/studio/static/js/vendor.bundle.js:713:30)
    at fn (/studio/static/js/vendor.bundle.js:118:20)
    at Object. (/studio/static/js/app.bundle.js:183064:39)
    at __webpack_require__ (/studio/static/js/vendor.bundle.js:713:30)
Getting this error out in my development instance of sanity. I’m loading an 
.env.development
file into sanity to define projectId and dataset which looks like this:

# For Next
NEXT_PUBLIC_SANITY_PROJECT_ID="#######"
NEXT_PUBLIC_SANITY_DATASET="production"

# For Studio
SANITY_STUDIO_API_PROJECT_ID="#######"
SANITY_STUDIO_API_DATASET="production"
AI Update

The issue is with your environment variable naming! Sanity Studio v3 uses a specific naming convention for environment variables, and you've got a slight mismatch.

Your environment variables should be named SANITY_STUDIO_PROJECT_ID and SANITY_STUDIO_DATASET (not SANITY_STUDIO_API_PROJECT_ID and SANITY_STUDIO_API_DATASET).

Here's how your .env.development file should look:

# For Next.js
NEXT_PUBLIC_SANITY_PROJECT_ID="#######"
NEXT_PUBLIC_SANITY_DATASET="production"

# For Studio
SANITY_STUDIO_PROJECT_ID="#######"
SANITY_STUDIO_DATASET="production"

Then in your sanity.config.js or sanity.config.ts, you can reference them in your defineConfig like this:

import { defineConfig } from 'sanity'

export default defineConfig({
  projectId: process.env.SANITY_STUDIO_PROJECT_ID,
  dataset: process.env.SANITY_STUDIO_DATASET,
  // ... rest of your config
})

Important notes:

  1. All Sanity Studio environment variables must be prefixed with SANITY_STUDIO_ to be accessible in your Studio code
  2. The environment file is determined automatically: .env.development loads when running sanity start, and .env.production loads during sanity build or sanity deploy
  3. After changing your .env file, restart your dev server for the changes to take effect
  4. Project IDs and dataset names aren't secret - they'll be exposed in your built application, so it's safe to use them in environment variables

If you want to use different variable names (like SANITY_STUDIO_API_PROJECT_ID), you'll need to explicitly map them in your config file, but the standard convention as documented in the Sanity environment variables docs is SANITY_STUDIO_PROJECT_ID and SANITY_STUDIO_DATASET.

Do you pass that variable to your client?
Can you post the snippet where these variables are consumed?
This is my 
sanity.json

{
  "root": true,
  "api": {
    "projectId": "######",
    "dataset": "production"
  },
  "project": {
    "name": "Sanity Studio",
    "basePath": "/studio"
  },
  "plugins": [
    "@sanity/base",
    "@sanity/components",
    "@sanity/default-layout",
    "@sanity/default-login",
    "@sanity/desk-tool"
  ],
  "env": {
    "development": {
      "plugins": [
        "@sanity/vision"
      ]
    }
  },
  "parts": [
    {
      "name": "part:@sanity/base/schema",
      "path": "./schemas/schema"
    }
  ]
}
You don’t have to hide your project ID, it’s not sensitive. 🙂
Is this a new project or did an existing project break?
i read somewhere that if you include 
.env.development
in your 
/studio
directory sanity will incorporate those values, but now even just setting it in my 
sanity.json
file it’s not woring
it’s basically a new project — running the next.js starter blog repo
what i’ve attempted so far to fix this:
removed 
.env.development
set projectId manually
build sanity
rebuilt sanity

still getting the error
🤔
also wondering if my production build errors might have something to do with it:

...
[4/4] Building fresh packages...
$ lerna bootstrap
lerna notice cli v4.0.0
lerna info ci enabled
lerna info Bootstrapping 1 package
lerna info Installing external dependencies
lerna ERR! npm ci exited 1 in 'queer-thoughts-sanity'
lerna ERR! npm ci stderr:
npm ERR! `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.
npm ERR! 
npm ERR! Missing: react-icons@4.4.0 from lock file
npm ERR! Missing: sass@1.54.7 from lock file
npm ERR! Missing: immutable@4.1.0 from lock file
npm ERR! 
npm ERR! A complete log of this run can be found in:
npm ERR!     /vercel/.npm/_logs/2022-08-31T15_59_10_014Z-debug-0.log
lerna ERR! npm ci exited 1 in 'queer-thoughts-sanity'
error Command failed with exit code 1.
info Visit <https://yarnpkg.com/en/docs/cli/install> for documentation about this command.
Error! Command "yarn install" exited with 1
...
decided to just re-clone this and copy my code over and it seems to be working 🙂
Great! Thanks for following up. 😀

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?