Why are Sanity environment variables (SANITY_STUDIO_API_DATASET) undefined?

I understand your frustration! The good news is that SANITY_STUDIO_API_DATASET and other SANITY_STUDIO_* environment variables should work in Sanity Studio. Let me help you troubleshoot why they're showing as undefined.

Common Reasons Why SANITY_STUDIO_* Variables Are Undefined

1. Missing or Incorrectly Named .env Files

Studio looks for environment-specific files:

• .env.development - loaded during sanity start (default)
• .env.production - loaded during sanity build and sanity deploy

Create a .env.development file in your Studio root (same directory as sanity.config.ts):

SANITY_STUDIO_API_DATASET=development
SANITY_STUDIO_API_PROJECT_ID=your-project-id

2. Missing SANITY_STUDIO_ Prefix

All environment variables that need to be accessible in your Studio code must be prefixed with SANITY_STUDIO_. Without this prefix, the variables won't be passed through to the frontend build.

# ❌ Won't work
API_DATASET=development

# ✅ Will work
SANITY_STUDIO_API_DATASET=development

3. Need to Restart the Dev Server

Environment variables are loaded at build time. If you added or changed .env files while the dev server was running, you must stop and restart sanity start.

4. Using process.env Correctly

Access the variables using process.env:

const dataset = process.env.SANITY_STUDIO_API_DATASET
console.log('Dataset:', dataset) // Debug to see if it's loading

Better Solution: Use Built-in Hooks (Recommended)

For your specific use case of setting a logo based on the current dataset, you don't actually need environment variables. You can access the dataset directly from your Studio configuration using the useClient() hook:

import { useClient } from 'sanity'

export function MyLogo() {
  const client = useClient({ apiVersion: '2023-05-24' })
  const dataset = client.config().dataset
  
  // Use dataset to determine which logo to show
  return dataset === 'production' 
    ? <img src="/logo-prod.svg" alt="Production" />
    : <img src="/logo-dev.svg" alt="Development" />
}

Why the Hook Approach Is Better

Using useClient() is more reliable because:

• It reads from your actual sanity.config.ts configuration
• No risk of environment variables being undefined or misconfigured
• Works consistently across all environments without managing .env files
• The dataset value is guaranteed to match what Studio is actually using

If You Still Need Environment Variables

If you have other use cases requiring environment variables, make sure to:

1. Create .env.development in your Studio root folder (same directory as sanity.config.ts)
2. Prefix all variables with SANITY_STUDIO_
3. Restart your dev server after creating/modifying .env files
4. Access them using process.env.SANITY_STUDIO_YOUR_VAR_NAME

Debugging Steps

If environment variables still aren't working:

1. Verify the .env file is in the correct location (Studio root, not project root if they're different)
2. Check that there are no typos in variable names
3. Try logging all environment variables to see what's available:

   console.log('All env vars:', Object.keys(process.env).filter(key => key.startsWith('SANITY_')))

4. Make sure you're not accidentally using a different environment (check process.env.SANITY_ACTIVE_ENV)

The official environment variables documentation confirms that the SANITY_STUDIO_ prefix is the correct approach for Sanity Studio v3, and variables are accessed via process.env.