Issue with custom input field schema in Sanity, resolved by importing custom type in schema.js

3 replies
Last updated: Dec 14, 2020
hey, I’m having problems when building custom input field schema. I’m getting
Unknown type: commercejsProducts. Valid types are: post, author, category, blockContent, array, block, boolean, datetime, date, document, email, file, geopoint, image, number, object, reference, slug, string, telephone, text and url
even though I have this custom
commercejsProducts
field defined in
schemas/commerceProducts.js

import CommercejsProducts from "../components/CommercejsProducts";

export default {
  name: "commercejsProducts",
  title: "Commercejs Products",
  type: "array",
  of: [
    {
      type: "object",
      fields: [
        {
          name: "price",
          type: "object",
          fields: [
            {
              name: "raw",
              type: "number",
            },
          ],
        },
        {
          name: "quantity",
          type: "number",
        },
        {
          name: "media",
          type: "object",
          fields: [
            {
              name: "type",
              type: "string",
            },
          ],
        },
        {
          name: "categories",
          type: "array",
          of: [
            {
              type: "object",
              fields: [
                {
                  name: "id",
                  type: "string",
                },
              ],
            },
          ],
        },
      ],
    },
  ],
  inputComponent: CommercejsProducts,
};
I’m a bit unclear, what exactly doesn’t work? Can Sanity not see
commercejsProducts
at all or is it the fact that I have more nested objects in it?
To clarify, I’m trying to use default
post.js
schema to enter my products there
export default {
...default post.js...
  fields: [
    {
      title: "Related products",
      name: "commercejsProducts",
      type: "commercejsProducts",
    },
  ],
  ...default post.js...
};
any thoughts? ideas?
AI Update

The error message "Unknown type: commercejsProducts" means Sanity Studio can't find your custom schema type because it hasn't been registered in your schema configuration. Having the file schemas/commerceProducts.js isn't enough – you need to explicitly add it to your schema array.

The nested objects in your schema definition are fine – Sanity handles nested objects and arrays without issues. The problem is purely about registration.

How to fix it

You need to import and register your custom schema type in your Studio configuration. The exact location depends on your Sanity version:

For Sanity Studio v3 (in sanity.config.ts or sanity.config.js):

import {defineConfig} from 'sanity'
import {structureTool} from 'sanity/structure'
import {schemaTypes} from './schemas'
import commercejsProducts from './schemas/commerceProducts' // Import your schema
import post from './schemas/post'
// ... other imports

export default defineConfig({
  // ... other config
  schema: {
    types: [
      post,
      commercejsProducts, // Add it here!
      // ... other schema types
    ],
  },
})

For Sanity Studio v2 (in schemas/schema.js):

import createSchema from 'part:@sanity/base/schema-creator'
import schemaTypes from 'all:part:@sanity/base/schema-type'
import post from './post'
import commercejsProducts from './commerceProducts' // Import it

export default createSchema({
  name: 'default',
  types: schemaTypes.concat([
    post,
    commercejsProducts, // Add it here!
    // ... other types
  ]),
})

About the inputComponent property

One more thing: in your schema, you're using inputComponent: CommercejsProducts. This syntax is from Studio v2. If you're using Studio v3, the property name has changed to use the components object:

export default {
  name: "commercejsProducts",
  title: "Commercejs Products",
  type: "array",
  components: {
    input: CommercejsProducts  // v3 syntax
  },
  // ... rest of your schema
}

You can learn more about custom input components in Studio v3 and migrating custom components from v2 to v3 in the documentation.

Once you've registered the schema type in your configuration, restart your Studio dev server and the error should disappear!

ahhhhh, never mind, found what went wrong 🤦 For the recrod, when you define custom
type
you need to import it in
/schemas/schema.js

export default createSchema({
  types: schemaTypes.concat([
    [other default types are imported here]
    commercejsProducts, // THAT
  ]),
});
Great to hear that you found the solution 😄

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?