Array field unusable in Sanity - package or preview config issue?
Here’s my preview config:
preview: {
select: {
media: 'asset',
caption: 'caption',
},
prepare({ media, caption }) {
const title = caption ? toPlainText(caption) : 'Image'
return {
title,
media,
}
}
},{
"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"
}
}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
sanitythan your main dependency - You have both
sanityand@sanity/baseinstalled (legacy issue) - Your lock file has gotten out of sync
Here's what to try:
- Check for duplicate sanity packages:
npm ls sanityIf you see multiple versions listed, that's your problem.
- Clean install everything:
rm -rf node_modules package-lock.json
npm install- 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 withsanity@3.65.0. You might need to update it:
npm update sanity-plugin-mux-input- Update Sanity itself - you're on 3.65.0, but there have been many bug fixes since then:
npm install sanity@latestAbout 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 thread24 replies
Was this answer helpful?
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.
