Troubleshooting installation of a color input plugin in Sanity 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

Jan 29, 2022, 12:42 AM

Additionally, how can one group fields like in this screenshot? I.e. Level 2, Level 3

Jan 29, 2022, 12:57 AM

oh I’m going to give this a shot myself now

Jan 29, 2022, 3:25 AM

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"]
      }
    },
  ]
}

Jan 29, 2022, 3:31 AM

and here’s a pic of my current from-scratch play project structure:

Jan 29, 2022, 3:32 AM

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.

Jan 29, 2022, 3:34 AM

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"
  }

Jan 29, 2022, 3:38 AM

Yup, I have them as part of the my dependencies

Jan 29, 2022, 3:39 AM

Calling it in my schema like so:

Jan 29, 2022, 3:41 AM

And here in my

schema.js

Jan 29, 2022, 3:41 AM

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"
  ],

Jan 29, 2022, 3:43 AM

Ahhhhhh that worked thank youuuu

Jan 29, 2022, 3:45 AM

Dear lord

npm

is gonna be the bane of my existence

Jan 29, 2022, 3:45 AM

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

Jan 29, 2022, 3:46 AM

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

Jan 29, 2022, 3:50 AM

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.

Jan 29, 2022, 3:53 AM

All i get from

brew doctor

is this

Jan 29, 2022, 3:55 AM

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"

Jan 29, 2022, 3:56 AM

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?

Jan 29, 2022, 4:00 AM

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.

Jan 29, 2022, 4:05 AM

((but I’d bet we found the culprit!))

Jan 29, 2022, 4:05 AM

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)

Jan 29, 2022, 4:09 AM

Sounds good, any reason to install yarn?

Jan 29, 2022, 4:13 AM

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

Jan 29, 2022, 4:13 AM

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

Jan 29, 2022, 4:14 AM

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! 🙌

Jan 29, 2022, 4:14 AM

no you’re great. My partner was busy watching college sports and tinkering with code is my favorite video game these days!

Jan 29, 2022, 4:15 AM

I come from a systems engineer background, and it’s nice to be able to use that to help here!

Jan 29, 2022, 4:16 AM

Well it’s very much appreciated. Enjoy the snowy weekend!

Jan 29, 2022, 4:28 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for free Explore the demo

Platform

Features

Use cases

Integrations

Learn

Build and share

Frameworks

Discover

Customer stories

Popular guides

Troubleshooting installation of a color input plugin in Sanity Studio

Sanity– build remarkable experiences at scale

Was this answer helpful?