Sanity Studio 404 error on page refresh in Astro.js setup

I understand your frustration - this is a common routing issue when embedding Sanity Studio in Astro projects. The 404 error on refresh happens because Astro needs to properly handle the Studio's client-side routing.

The Root Cause

When you embed Sanity Studio at /studio, it's a single-page application that handles its own routing client-side. When you navigate to /studio/structure, Astro initially serves the Studio correctly, but on refresh, Astro's server tries to find a file at that path and returns 404 because it doesn't exist as a static route.

The Solution

You need to configure Astro to properly serve the Studio for all /studio/* paths. Here's how:

1. Update your astro.config.mjs:

import { defineConfig } from 'astro/config';
import { sanityIntegration } from '@sanity/astro';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  integrations: [
    sanityIntegration({
      projectId: 'your-project-id',
      dataset: 'production',
      useCdn: false,
      studioBasePath: '/studio'
    })
  ],
  output: 'hybrid', // or 'server' - important for Studio routing
  adapter: vercel()
});

The key is setting output: 'hybrid' or output: 'server' rather than output: 'static'. This ensures Astro can handle the dynamic routing the Studio needs. I can see from the community discussion that this configuration works well with @sanity/astro.

2. If deploying to Vercel:

Create or update your vercel.json in the project root:

{
  "rewrites": [
    {
      "source": "/studio/:path*",
      "destination": "/studio"
    }
  ]
}

This tells Vercel to rewrite all /studio/* requests back to /studio, allowing the Studio's client-side router to take over.

3. If deploying to Netlify:

Add to your netlify.toml:

[[redirects]]
  from = "/studio/*"
  to = "/studio"
  status = 200

About the Version Error

The __vite_ssr_import_4__.default is not a function error you encountered with v2.2.1 suggests a module import issue. This is actually a sign that downgrading isn't the right solution - you want to stay on the latest version of @sanity/astro and fix the routing configuration instead.

Additional Troubleshooting

If you're still experiencing issues after these changes:

1. Clear your build cache: Delete .astro, node_modules, and reinstall
2. Verify your adapter: Make sure you have the appropriate adapter installed (e.g., @astrojs/vercel or @astrojs/netlify)
3. Check your Sanity config: Ensure your sanity.config.ts doesn't have conflicting basePath settings

The Astro quickstart documentation has more details on setting up the integration properly, and you can also check the @sanity/astro GitHub repository for issues and examples.

This should resolve your refresh 404 issues without needing to downgrade. The latest version of @sanity/astro works well with proper server-side configuration!