Sanity LocaleContext value missing error on publish/delete

I understand you're encountering the "Sanity LocaleContext value missing" error when publishing or deleting content. This is a common issue that typically occurs when custom components or plugins aren't properly wrapped in the Sanity UI context providers.

The LocaleContext is part of @sanity/ui, Sanity's design system library. When you create custom input components, they need to be rendered within the proper context providers that Sanity Studio normally provides automatically. This error usually appears when:

Most Common Causes:

1. Custom input components missing context - If you've created a custom input component and you're rendering Sanity UI components (like Button, Card, TextInput, etc.) outside of Studio's normal rendering tree, they won't have access to the LocaleContext.

2. Plugin rendering issues - If you're building a custom plugin that renders Sanity UI components in unusual places (like custom document actions, tool panels, or form components), they might not be wrapped properly.

3. Multiple React instances - Sometimes this happens when your project has multiple versions of React or @sanity/ui installed, causing context to break.

Solutions to try:

1. Wrap your custom components with ThemeProvider - If you're rendering Sanity UI components in a custom input component or plugin, ensure they're wrapped:

import {ThemeProvider, studioTheme} from '@sanity/ui'

function MyCustomComponent(props) {
  return (
    <ThemeProvider theme={studioTheme}>
      {/* Your Sanity UI components here */}
    </ThemeProvider>
  )
}

1. Check your package versions - Make sure you don't have conflicting versions:

npm ls @sanity/ui
npm ls react

All instances should resolve to the same version. If you see duplicates, try deleting node_modules and your lock file, then reinstalling.

1. Use renderDefault when possible - If you're customizing form components, consider using the renderDefault prop to render the default component within your wrapper, which preserves all context:

export function MyCustomInput(props) {
  return (
    <div>
      <div>My custom UI</div>
      {props.renderDefault(props)}
    </div>
  )
}

1. Check for proper component structure - Make sure your custom input components include all the required elements like FormField wrapper and proper change handlers as described in the documentation.

Without seeing your specific code, it's hard to pinpoint the exact issue, but these are the most common solutions. If you can share your custom component code or plugin configuration, the community can provide more specific guidance!