Issues with `@sanity/ui` in v3 plugin resolved by switching from Yarn to NPM

This is a known TypeScript issue that happens when there's a version mismatch between @types/react and @sanity/ui. The onResize and onResizeCapture props were added to React's type definitions in @types/react version 18.3.0+, and when styled-components-based libraries like Sanity UI don't explicitly include these props in their component types, TypeScript throws errors.

Here are a few solutions, from quickest to most thorough:

Option 1: Downgrade @types/react (quickest fix)

The easiest solution is to pin @types/react to version 18.2.x:

npm install --save-dev @types/react@18.2.79 @types/react-dom@18.2.25

This avoids the new resize props that are causing the issue.

Option 2: Upgrade @sanity/ui

Make sure you're on the latest version of @sanity/ui, as newer versions may have better compatibility:

npm install @sanity/ui@latest

Option 3: Create a type augmentation file

If you need to keep your current versions, instead of adding those props to every component manually, create a sanity-ui.d.ts file in your project root:

import 'react'

declare module 'react' {
  interface DOMAttributes<T> {
    onResize?: ReactEventHandler<T> | undefined
    onResizeCapture?: ReactEventHandler<T> | undefined
  }
}

export {}

This tells TypeScript that these props are optional across all React components, which is effectively what they should be.

Option 4: Check your dependency versions

For Sanity Studio v3 plugins, ensure your peer dependencies are aligned. Your package.json should have compatible versions of:

• react and react-dom (typically ^18)
• styled-components (^6.1 for Studio v3)
• Their corresponding @types/* packages

This is fundamentally a TypeScript ecosystem compatibility issue between React types and styled-components, not a bug in Sanity UI itself. The downgrade to @types/react@18.2.x is usually the fastest path forward while the ecosystem catches up.