Sanity Client Error: HTTP 404 "undefined.api.sanity.io" in Remix Tutorial

Looking at your error, the issue is clear: https://undefined.api.sanity.io/... shows that your projectId is undefined, which means your environment variables aren't being loaded properly by Remix.

The Problem

Your Sanity client can't find the project ID, so it's trying to connect to undefined.api.sanity.io instead of something like 79w8op0f.api.sanity.io. This causes the 404 error.

How to Fix It

1. Check your .env file exists and has the correct values

The tutorial you're following creates a .env file in your Remix project root (/remix-live-preview/.env). Make sure it contains your actual project ID, not the example one:

# .env - Replace with YOUR project ID
SANITY_STUDIO_PROJECT_ID="your-actual-project-id"
SANITY_STUDIO_DATASET="production"
SANITY_STUDIO_URL="http://localhost:3333"
SANITY_STUDIO_STEGA_ENABLED="true"

2. Find your actual Project ID

You can find it in your Sanity Studio directory:

• Open /sanity-live-preview/sanity.config.ts and look for the projectId value
• Or visit sanity.io/manage and copy it from your project

It should look like "79w8op0f" (8 random characters).

3. Restart your Remix dev server

This is critical! Environment variables only load when the server starts:

# Stop your server (Ctrl+C), then restart:
npm run dev

4. Verify the fix

Add this temporarily to your route to confirm it's working:

export const loader = async () => {
  console.log('Project ID:', process.env.SANITY_STUDIO_PROJECT_ID)
  // ... rest of your loader code
}

Check your terminal - it should print your actual project ID, not undefined.

Still Not Working?

If you're still seeing undefined:

• Make sure your .env file is at the root of your Remix project (same folder as package.json)
• Check that you don't have typos in the environment variable names
• Make sure you're using the modern @sanity/client package (not picosanity which your error mentions - the tutorial uses the newer client)

Once your project ID is correctly loaded, the 404 error will disappear and you'll be able to query your Sanity content!