Get help on Discord

Troubleshooting a 404 error in Sanity/Remix tutorial

7 replies
Last updated: Dec 21, 2021
I'm running through
user T
Sanity/Remix tutorial (https://www.sanity.io/guides/remix-run-live-preview ) but have run into an error that I cannot figure out. It says,
Error: HTTP 404 Not Found: <https://undefined.api.sanity.io/v2021-03-25/data/query/production?query=*%5B_type%20%3D%3D%20%22post%22%5D%7B%20_id%2C%20title%2C%20slug%20%7D>
    at getError (/home/h/Documents/webdev/io-remix/frontend/node_modules/picosanity/lib/client.js:91:10)
    at /home/h/Documents/webdev/io-remix/frontend/node_modules/picosanity/lib/client.js:78:11
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async loader (/home/h/Documents/webdev/io-remix/frontend/build/index.js:474:17)
    at async Object.callRouteLoader (/home/h/Documents/webdev/io-remix/frontend/node_modules/@remix-run/server-runtime/data.js:73:14)

AI Update

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!

Looks like your project ID isn’t pulling through, take a look at:

 <https://undefined.api.sanity>...
This should have the project ID.

Can you log-out your environment variables to see if they’re being read?
Let me try that. Thanks.
Ok. I started to console.log the environment variables (although I wasn't sure where) but when I opened getClient, it was giving me the following Typescript error under config in the line 
export const sanityClient = new PicoSanity(config);


Argument of type '{ apiVersion: string; dataset: string; projectID: string; useCdn: boolean; }' is not assignable to parameter of type 'ClientConfig'.
  Property 'projectId' is missing in type '{ apiVersion: string; dataset: string; projectID: string; useCdn: boolean; }' but required in type 'ClientConfig'.ts(2345)
client.d.ts(5, 3): 'projectId' is declared here.
(alias) const config: {
    apiVersion: string;
    dataset: string;
    projectID: string;
    useCdn: boolean;
}
import config
View Problem
No quick fixes available

I am only just learning TS so maybe I'll redo this without it in Remix and learn it later.
Ok. Its fixed. Not sure what I did wrong but I copy/pasted your config file from the repo into mine and changed ONLY the ProjectID (and commented out my entire config). The TS error disappeared from getClient and the page works. No more error. I cannot see any typos in mine (but will re-re-read to find what I did wrong).
Thanks!
AAARRRGGH! I found my error:
I wrote 
projectID
instead of 
projectId
in my config!
I'm horribly ashamed since I've spent 25+ years as a professional writer and copyeditor watching for those kinds of errors!
😂 easily done! Been there!

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?