error with color-picker #36
Description
When the background-color field is loaded or rendering, I get an error:
i.e., I added the bg-color field in the block; when I opened the page to change the color, an error occurred.
My package.json
{
"name": "payload-website",
"version": "1.0.0",
"description": "Website template for Payload",
"license": "MIT",
"type": "module",
"scripts": {
"build": "cross-env NODE_OPTIONS=--no-deprecation next build",
"postbuild": "next-sitemap --config next-sitemap.config.cjs",
"dev": "cross-env NODE_OPTIONS=--no-deprecation next dev",
"dev:prod": "cross-env NODE_OPTIONS=--no-deprecation rm -rf .next && pnpm build && pnpm start",
"generate:importmap": "cross-env NODE_OPTIONS=--no-deprecation payload generate:importmap",
"generate:types": "cross-env NODE_OPTIONS=--no-deprecation payload generate:types",
"ii": "cross-env NODE_OPTIONS=--no-deprecation pnpm --ignore-workspace install",
"lint": "cross-env NODE_OPTIONS=--no-deprecation next lint",
"lint:fix": "cross-env NODE_OPTIONS=--no-deprecation next lint --fix",
"payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
"reinstall": "cross-env NODE_OPTIONS=--no-deprecation rm -rf node_modules && rm pnpm-lock.yaml && pnpm --ignore-workspace install",
"start": "cross-env NODE_OPTIONS=--no-deprecation next start"
},
"dependencies": {
"@nouance/payload-dashboard-analytics": "^0.3.0",
"@payloadcms/db-mongodb": "latest",
"@payloadcms/email-resend": "^3.34.0",
"@payloadcms/live-preview-react": "latest",
"@payloadcms/next": "^3.34.0",
"@payloadcms/payload-cloud": "latest",
"@payloadcms/plugin-form-builder": "latest",
"@payloadcms/plugin-nested-docs": "latest",
"@payloadcms/plugin-redirects": "latest",
"@payloadcms/plugin-search": "latest",
"@payloadcms/plugin-seo": "latest",
"@payloadcms/richtext-lexical": "latest",
"@payloadcms/ui": "latest",
"@radix-ui/react-checkbox": "^1.1.5",
"@radix-ui/react-dialog": "^1.1.7",
"@radix-ui/react-label": "^2.1.3",
"@radix-ui/react-select": "^2.1.7",
"@radix-ui/react-slot": "^1.2.0",
"@shefing/color-picker": "^1.0.2",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"cross-env": "^7.0.3",
"geist": "^1.3.1",
"graphql": "^16.10.0",
"lucide-react": "^0.483.0",
"mini-svg-data-uri": "^1.4.4",
"motion": "^12.6.5",
"next": "^15.3.0",
"next-sitemap": "^4.2.3",
"payload": "^3.34.0",
"payload-admin-bar": "^1.0.7",
"prism-react-renderer": "^2.4.1",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-hook-form": "7.45.4",
"sharp": "0.32.6",
"tailwind-merge": "^2.6.0",
"tailwindcss-animate": "^1.0.7"
},
"devDependencies": {
"@eslint/eslintrc": "^3.3.1",
"@tailwindcss/typography": "^0.5.16",
"@types/escape-html": "^1.0.4",
"@types/node": "22.5.4",
"@types/react": "19.0.7",
"@types/react-dom": "19.0.3",
"autoprefixer": "^10.4.21",
"copyfiles": "^2.4.1",
"eslint": "^9.24.0",
"eslint-config-next": "15.1.5",
"postcss": "^8.5.3",
"prettier": "^3.5.3",
"tailwindcss": "^3.4.17",
"typescript": "5.7.3"
},
"engines": {
"node": "^18.20.2 || >=20.9.0",
"pnpm": "^9"
},
"pnpm": {
"onlyBuiltDependencies": [
"sharp"
]
}
}