Sanity Studio "mainImage is not defined" error despite schema definition

Based on the error you're seeing, this is typically caused by a schema definition issue where mainImage is being referenced before it's properly defined or imported. Here are the most likely causes and solutions:

1. Missing schema import/definition

The most common issue is that you're referencing mainImage as a schema type or object definition somewhere, but haven't properly defined or imported it. Check your schema files for:

// If you're using mainImage as a custom object type
fields: [
  {
    name: 'mainImage',
    type: 'mainImage', // ← This references a schema type that needs to be defined
  }
]

If you're using it as a custom type, make sure you've defined it as a schema type and included it in your schema array:

// schemas/mainImage.js
export default {
  name: 'mainImage',
  type: 'object',
  fields: [
    {
      name: 'image',
      type: 'image',
      options: { hotspot: true }
    },
    // ... other fields
  ]
}

// schemas/index.js
import mainImage from './mainImage'

export default [
  mainImage,
  // ... other schemas
]

2. Using the field name instead of the type

If you just need an image field, you should use the built-in image type directly:

fields: [
  {
    name: 'mainImage',
    title: 'Main Image',
    type: 'image', // ← Use the built-in image type
    options: {
      hotspot: true
    }
  }
]

3. Schema import order

If mainImage is a custom object type that's used by other schemas, make sure it's imported and added to your schema array before any schemas that reference it.

4. Check your Nuxt/Studio configuration

Since you mentioned this is a Nuxt app, make sure your Studio configuration is properly loading all schema files. Check your sanity.config.js or sanity.config.ts:

import { defineConfig } from 'sanity'
import { schemaTypes } from './schemas' // Make sure this includes mainImage

export default defineConfig({
  // ... other config
  schema: {
    types: schemaTypes,
  },
})

The error appearing in the webpack bundle suggests the Studio is trying to compile your schemas but can't resolve the mainImage reference. Double-check that all your schema files are properly exported and imported in the correct order. Since it works in your frontend, the data exists fine - this is purely a Studio schema compilation issue.