Error in Studio on Sanity 3.61.0: 'Cannot read properties of undefined (reading 'canvas')'

[aplatformdev]

Describe the bug

I have been using the color-input plugin successfully in many projects. But since updating to Sanity 3.61.0 I cannot use it. When opening a color-input in sanity studio, the following error occurs: Error: Cannot read properties of undefined (reading 'canvas') (Please see screenshot below)

sanity.config.ts:

export default defineConfig({ basePath: '/studio', title: 'Website', projectId, dataset, plugins: [..., colorInput(), ...(isDev ? devOnlyPlugins : []), schema: { types: schemaTypes, }, document: { newDocumentOptions: (prev, {creationContext}) => { if (creationContext.type === 'global') { return prev.filter((templateItem) => !singletons.includes(templateItem.templateId)); } return prev; }, actions: (prev, {schemaType}) => { if (singletons.includes(schemaType)) { //@ts-ignore return prev.filter(({action}) => !['unpublish', 'delete', 'duplicate'].includes(action)); } return prev; }, },

Usage: defineField({ name: 'bgColor', title: 'Background Color', type: 'color', group: 'editorial', }),

package.json

{ "name": "website", "private": true, "version": "1.0.0", "main": "package.json", "license": "UNLICENSED", "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" }, "keywords": [ "sanity" ], "dependencies": { "@gsap/react": "^2.1.1", "@headlessui/react": "^2.1.2", "@hookform/resolvers": "^2.9.10", "@marsidev/react-turnstile": "^0.2.3", "@n8tb1t/use-scroll-position": "^2.0.3", "@portabletext/react": "^2.0.0", "@sanity/color-input": "^4.0.1", "@sanity/dashboard": "^3.1.3", "@sanity/image-url": "^1.0.2", "@sanity/orderable-document-list": "^1.0.4", "@sanity/vision": "^3.0.0", "@sentry/nextjs": "^7.77.0", "@tailwindcss/typography": "^0.5.9", "@vercel/analytics": "^1.0.2", "axios": "^1.4.0", "capitalize": "^2.0.4", "clsx": "^2.1.1", "date-fns": "^2.29.3", "embla-carousel-auto-height": "^8.0.0-rc22", "embla-carousel-autoplay": "^8.0.0-rc22", "embla-carousel-class-names": "^8.0.0-rc22", "embla-carousel-react": "^8.0.0-rc22", "framer-motion": "7.0.0", "graphql": "^16.9.0", "graphql-request": "^7.1.0", "gsap": "^3.11.3", "lenis": "^1.1.13", "lodash.get": "^4.4.2", "next": "15.0.0-canary.113", "next-sanity": "^9.4.7", "next-sanity-image": "^6.1.1", "next-seo": "^6.6.0", "node-constantcontact": "^2.0.0", "phosphor-react": "^1.4.1", "react": "19.0.0-rc-3208e73e-20240730", "react-dom": "19.0.0-rc-3208e73e-20240730", "react-hook-form": "^7.45.4", "react-paginate": "^8.2.0", "react-player": "^2.12.0", "react-portable-text": "^0.6.0", "react-portal": "^4.2.2", "react-query": "^3.39.3", "react-select": "^5.7.4", "react-share": "^4.4.1", "react-use": "^17.4.0", "sanity": "^3.61.0", "sanity-plugin-dashboard-widget-document-list": "^1.0.1", "sanity-plugin-documents-pane": "^2.0.1", "sanity-plugin-iframe-pane": "^2.3.0", "sanity-plugin-media": "^2.0.5", "sanity-plugin-note-field": "^2.0.2", "server-only": "^0.0.1", "shave": "^5.0.2", "split-human-name": "^2.0.13", "styled-components": "^6", "tailwind-merge": "^1.8.0", "tailwindcss-fluid-type": "^2.0.3", "use-debounce": "^9.0.3", "yup": "^0.32.11" }, "devDependencies": { "@sanity/eslint-config-studio": "^2.0.1", "@svgr/webpack": "^6.5.1", "@types/capitalize": "^2.0.0", "@types/lodash.get": "^4.4.7", "@types/node": "20.14.12", "@types/react": "18.3.3", "@types/react-dom": "18.3.0", "@types/react-portal": "^4.0.4", "autoprefixer": "^10.4.13", "eslint": "^8.6.0", "eslint-config-next": "^13.0.1", "eslint-plugin-prettier": "^4.2.1", "prettier": "^2.8.1", "prettier-plugin-tailwindcss": "^0.2.1", "tailwindcss": "^3.3.5", "typescript": "^5.5.4" } }

To Reproduce

Steps to reproduce the behavior:

1. Open studio
2. Navigate to schema using color type
3. Try to select new color
4. See error

Expected behavior

I expect the color-input to render the inputs and to be able to select a color and for it to be saved to the document in question.

Screenshots

Which versions of Sanity are you using?

3.61.0

Which versions of Node.js / npm are you running?

10.2.4 v21.6.2

[aliameur]

Tried recreating the issue in a couple different environments. I think I narrowed it down to the following:

Seems this issue is a result of the vendored react@19 that comes with next@15. React removed support for defaultProps in v19.

This means that ideally react-color would use the new ES6 syntax, but this is highly unlikely. I'll suggest a PR here to explicitly pass in props to the Checkboard component, but I'd recommend going ahead and patching either dependency in the meantime.