Get help on Discord

Array field unusable in Sanity - package or preview config issue?

24 replies
Last updated: Dec 1, 2025
Can anyone help with this? I’m not sure what has caused this to happen, but the Array field is unusable for me and my client. Seems to be something with one of the packages rather than my preview config.
Here’s my preview config:


          preview: {
            select: {
              media: 'asset',
              caption: 'caption',
            },
            prepare({ media, caption }) {
              const title = caption ? toPlainText(caption) : 'Image'
              return {
                title,
                media,
              }
            }
          },
And here’s `package.json`:


{
  "name": "sanity-template-template-nextjs-personal-website",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next",
    "format": "npx prettier --write . --ignore-path .gitignore",
    "lint": "next lint -- --ignore-path .gitignore",
    "lint:fix": "npm run format && npm run lint -- --fix",
    "start": "next start",
    "type-check": "tsc --noEmit",
    "update-sanity-doc": "node updateSanityDocument.js"
  },
  "prettier": {
    "semi": false,
    "singleQuote": true
  },
  "dependencies": {
    "@hookform/resolvers": "^3.3.4",
    "@mux/mux-video-react": "^0.12.0",
    "@portabletext/react": "3.0.4",
    "@sanity/image-url": "1.0.2",
    "@sanity/preview-url-secret": "1.5.2",
    "@sanity/react-loader": "^1.7.4",
    "@sanity/vision": "3.25.0",
    "@tailwindcss/typography": "0.5.10",
    "@types/gtag.js": "^0.0.18",
    "a11y-react-emoji": "^1.2.0",
    "axios": "^1.6.5",
    "classnames": "2.3.2",
    "cookies-next": "^4.1.0",
    "date-fns": "2.30.0",
    "framer-motion": "^11.0.3",
    "lazysizes": "^5.3.2",
    "lottie-react": "^2.4.0",
    "next": "^14.0.4-canary.26",
    "next-sanity": "8.1.3",
    "react": "^18.3.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.49.2",
    "react-intersection-observer": "^9.13.1",
    "react-portable-text": "^0.6.0",
    "react-transition-group": "^4.4.5",
    "react-type-animation": "^3.2.0",
    "sanity": "^3.65.0",
    "sanity-plugin-mux-input": "^2.4.0",
    "server-only": "0.0.1",
    "smartquotes": "^2.3.2",
    "styled-components": "6.1.8",
    "yup": "^1.3.3"
  },
  "devDependencies": {
    "@next/bundle-analyzer": "^14.1.0",
    "@svgr/webpack": "^8.1.0",
    "@types/react": "18.2.48",
    "autoprefixer": "10.4.16",
    "eslint": "8.55.0",
    "eslint-config-next": "14.0.3",
    "eslint-plugin-simple-import-sort": "10.0.0",
    "postcss": "8.4.32",
    "prettier": "3.1.0",
    "prettier-plugin-packagejson": "2.4.7",
    "prettier-plugin-tailwindcss": "0.5.9",
    "sass": "^1.69.5",
    "tailwindcss": "3.3.6",
    "typescript": "5.3.3"
  }
}
AI Update

I can see you're experiencing issues with array fields in Sanity Studio. While your preview config looks fine, this type of problem is typically caused by duplicate installations of the sanity package in your dependency tree rather than issues with your code.

Looking at your package.json, I notice you have "react": "^18.3.0" and "react-dom": "18.2.0". While these are on different minor versions, this shouldn't be the root cause - the caret (^) in "^18.3.0" means npm will accept any 18.x version, so both will resolve to compatible React 18 versions. Sanity requires React and React DOM to be on the same major version, which yours are.

The real culprit is usually multiple sanity package versions. This commonly happens when:

  • A plugin depends on a different version of sanity than your main dependency
  • You have both sanity and @sanity/base installed (legacy issue)
  • Your lock file has gotten out of sync

Here's what to try:

  1. Check for duplicate sanity packages:
npm ls sanity

If you see multiple versions listed, that's your problem.

  1. Clean install everything:
rm -rf node_modules package-lock.json
npm install
  1. If that doesn't work, check your plugins. I see you're using sanity-plugin-mux-input@2.4.0 - make sure it's compatible with sanity@3.65.0. You might need to update it:
npm update sanity-plugin-mux-input
  1. Update Sanity itself - you're on 3.65.0, but there have been many bug fixes since then:
npm install sanity@latest

About those React versions: While not the main issue, you could standardize them to avoid any potential edge cases:

"react": "^18.2.0",
"react-dom": "^18.2.0"

One more thing: I notice you're using styled-components@6.1.8, but Sanity Studio v3 uses styled-components v5 internally. This shouldn't cause the array field issue specifically, but could cause other styling conflicts if you're building custom Studio components.

Try the clean install first - that resolves most "unusable field" issues. If it persists, check the browser console for specific error messages that might point to which package is causing the conflict.

Show original thread
24 replies

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?