Color Input Plugin Throwing Unnamed Type Error in Studio

28 replies
Last updated: Jan 29, 2022
Hello again! Trying to get the Color input plugin to work in studio. It’s throwing an unnamed type error though I’ve followed the instructions as presented in the docs and am using
all:part:@sanity/base/schema-type
and concatenating my own schema like so:
types: schemaTypes.concat([…])
Note that I couldn’t install it via
sanity install
but instead
npm install
but it still shows up as a dependency when I run
sanity versions
AI Update

The issue you're encountering is likely because you're using Studio v2 patterns (all:part:@sanity/base/schema-type, sanity install) in what might be a Studio v3+ environment. The color input plugin and schema registration work quite differently between these versions.

The Problem

In Studio v2, plugins were installed with sanity install and schema types were registered using the parts system with all:part:@sanity/base/schema-type. However, Studio v3 (and v4, the current version) completely removed the parts system and changed how plugins and schemas work.

The "unnamed type" error typically occurs when a schema type isn't properly registered or when there's a mismatch between how the plugin exports its type and how your schema imports it.

The Solution

For Studio v3+, you need to:

  1. Install the color input plugin via npm (which you've already done):

    npm install @sanity/color-input
  2. Import and register the plugin in your schema configuration directly in your sanity.config.ts (or sanity.config.js):

    import {defineConfig} from 'sanity'
    import {colorInput} from '@sanity/color-input'
    import {schemaTypes} from './schemas'
    
    export default defineConfig({
      // ... other config
      plugins: [
        colorInput(), // Register the plugin here
        // ... other plugins
      ],
      schema: {
        types: schemaTypes, // Just your schema types, no concat needed
      },
    })
  3. Use the color type in your schema:

    {
      name: 'favoriteColor',
      title: 'Favorite Color',
      type: 'color', // The type is now available
    }

Key Differences from v2

  • No more schemaTypes.concat() with parts - you just pass your schema types directly
  • Plugins are registered in the plugins array in your config file, not concatenated into schema types
  • sanity install is deprecated - use npm install (which you correctly did)
  • The plugin itself registers its types automatically when you add it to the plugins array

If you're still seeing the error after this, make sure you've:

  • Restarted your dev server after installing the plugin
  • Added colorInput() to your plugins array in sanity.config.ts
  • Are using the correct type name ('color') in your schema definitions

The fact that sanity versions shows it as a dependency is fine - that command just reads from your package.json, which is correct since you installed it via npm. The key is making sure the plugin is registered in your config file's plugins array, not in the schema types.

Show original thread
28 replies
Additionally, how can one group fields like in this screenshot? I.e. Level 2, Level 3
oh I’m going to give this a shot myself now
first pass - seems to work as intended. I have a
tag
document already defined, intended for many-many relations later. I already added an icon to my tags for fun, just using react-icons.
• the
all:part...schema-type
and
schematypes.concat...
are already defined in my
/schemas/schema.js
file, per the advised config• after adding the plugin to my node modules, I simply added the color selector directly to the tag document:

js
import { GiLinkedRings } from 'react-icons/gi'

export default {
  name: 'tag',
  title: 'Tag',
  type: 'document',
  icon: GiLinkedRings,
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string',
    },
    {
      name: 'tagColor',
      title: 'Tag Color',
      type: 'color'
    },
    {
      title: "Icon",
      name: "icon",
      type: "iconPicker",
      options: {
        providers: ["f7", "fa", "mdi", "sa", "hi", "fi"]
      }
    },
  ]
}
and here’s a pic of my current from-scratch play project structure:
and ideally, I’d prefer to go back and add a color document where I can pre-select from a pre-defined list of favorites, but this works for now to add colors to tag pills in my front end if I’d like as-is.
since you’re having some problems with your node/npm tools on your pc, make sure that your node plugin module installs are being added as dependancies instead of devDependancies. If you mess this up, you can manually tweak where these go in package.json, but you may need to refactor by deleting the lock file and node_modules if you do this:
"dependencies": {
    "@sanity/base": "^2.25.4",
    "@sanity/color-input": "^2.25.4",
    "@sanity/core": "^2.25.0",
    "@sanity/dashboard": "^2.25.4",
    "@sanity/default-layout": "^2.25.4",
    "@sanity/default-login": "^2.24.1",
    "@sanity/desk-tool": "^2.25.4",
    "@sanity/eslint-config-studio": "^2.0.0",
    "@sanity/vision": "^2.25.4",
    "eslint": "^8.6.0",
    "prop-types": "^15.7",
    "react": "^17.0",
    "react-dom": "^17.0",
    "react-icons": "^4.3.1",
    "sanity-plugin-content-calendar": "^1.2.5",
    "sanity-plugin-dashboard-widget-vercel": "^1.1.1",
    "sanity-plugin-icon-picker": "^2.0.1",
    "sanity-plugin-media": "^1.4.4",
    "styled-components": "^5.2.0"
  },
  "devDependencies": {
    "@sanity/cli": "^2.25.0"
  }
Yup, I have them as part of the my dependencies
Calling it in my schema like so:
And here in my
schema.js
oh I got you - with your npm issues, be sure you’re adding your plugins to sanity.json in root:here’s mine for reference:

"plugins": [
    "@sanity/dashboard",
    "dashboard-widget-vercel",
    "@sanity/base",
    "@sanity/default-layout",
    "@sanity/default-login",
    "@sanity/desk-tool",
    "media",
    "icon-picker",
    "content-calendar",
    "@sanity/color-input"
  ],
Ahhhhhh that worked thank youuuu
Dear lord
npm
is gonna be the bane of my existence
here’s a ref to the sanity.json file formatting - my ability to help fix your node install issues is a bit limited, but I would personally try hard to get that working, as this could definitely cause a variety of issues when building all of your javascript web projects:
https://www.sanity.io/docs/sanity-json
I’m gonna have to look into it again I guess. I just don’t know what I’m doing wrong here — I used nvm to install node LTS and that hopefully should’ve done the trick
best guess: it’s some leftover junk in your previous install via homebrew. Take a closer look at
~/.zshrc
, run
brew doctor
, and dig around in both your home dir for lib/Homebrew files and potentially system root for other misc node or homebrew/node files that don’t need to be there.
All i get from
brew doctor
is this
And this the contents of my `.zshrc`:

alias laptop='bash <(curl -s <https://raw.githubusercontent.com/monfresh/laptop/master/laptop)>'

local brew_path="/opt/homebrew/bin"
local brew_opt_path="/opt/homebrew/opt"
local nvm_path="$HOME/.nvm"

export PATH="$HOME/.bin:$PATH"
export NVM_DIR="$HOME/.nvm"

[ -s "${brew_opt_path}/nvm/nvm.sh" ] && \. "${brew_opt_path}/nvm/nvm.sh"  # This loads nvm
[ -s "${brew_opt_path}/nvm/etc/bash_completion.d/nvm" ] && \. "${brew_opt_path}/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

source /opt/homebrew/opt/chruby/share/chruby/chruby.sh

source /opt/homebrew/opt/chruby/share/chruby/auto.sh

chruby ruby-3.0.3

chruby ruby-2.7.4

eval "$(nodenv init -)"

export NVM_DIR="$HOME/.nvm"
Hm, seems like there were some node files in my home folder, just deleted those. Node is still working. Anyway to confirm if it’s fixed?
if you’re unsure, you can #hash comment out the lines with brew npm
This is your discresion, but they should be safe to comment out. I would at a minimum reload any terminal sessions running and node/npm -v to test. You may want to try to reinstall any global tools (like sanity cli) as well. And then likely shut down and restart your computer.
((but I’d bet we found the culprit!))
also take a moment to reinstall yarn - and while you’re playing with node package managers, take a look at pnpm if you’re feeling adventurous - as it can save a good bit of bandwidth with your frontend projects (but know that to my knowledge studio installs only support npm and yarn at this time)
Sounds good, any reason to install yarn?
I’ve tried switching to it in the past but so many projects are bootstrapped with npm and it seldom made sense to take the effort to use yarn
just have it around if you need it, it’s a nice tool to have in your kit and it is popular with a lot of projects
Also thank you thank you thank you for all you help with this — if there’s anything I can do for you, please let me know! 🙌
no you’re great. My partner was busy watching college sports and tinkering with code is my favorite video game these days!
I come from a systems engineer background, and it’s nice to be able to use that to help here!
Well it’s very much appreciated. Enjoy the snowy weekend!

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.

Was this answer helpful?