Get help on Discord

Sanity internalLink annotation error: "Could not resolve jsonType of undefined

4 replies
Last updated: Apr 20, 2021
Hi, I am trying to add internalLink annotation to block content, but after I create a separate type internalLink and use it in the annotation tag via: 
annotations: [{ type: 'internalLink' }]
studio trow me error:
Uncaught error
Could not resolve jsonType of undefined. No parent type found

Stack:

    at isJSONTypeOf (<http://localhost:3333/studio/static/js/app.bundle.js:231611:11>)
    at <http://localhost:3333/studio/static/js/app.bundle.js:231560:55>
    at Array.map (<anonymous>)
    at validateAnnotations (<http://localhost:3333/studio/static/js/app.bundle.js:231548:22>)
    at validateMarks (<http://localhost:3333/studio/static/js/app.bundle.js:231483:19>)
    at validateBlockType (<http://localhost:3333/studio/static/js/app.bundle.js:231440:13>)
    at visitors.reduce._objectSpread._problems (<http://localhost:3333/studio/static/js/app.bundle.js:230289:17>)
    at Array.reduce (<anonymous>)
    at <http://localhost:3333/studio/static/js/app.bundle.js:230288:21>
    at <http://localhost:3333/studio/static/js/app.bundle.js:230310:49>

(Your browsers Developer Tools may contain more info)
internalLink definitions:

import React from 'react';

const InternalLinkRender = ({ children }) => <span>{children} 🔗</span>;

export default {
  title: 'Internal link to another document',
  name: 'internalLink',
  type: 'reference',
  description: 'Locate a document you want to link to',
  to: [{ type: 'page' }, { type: 'route' }],
  blockEditor: {
    icon: () => '🔗',
    render: InternalLinkRender,
  },
};
In browser console I have this errortrace:

Uncaught Error: Could not resolve jsonType of undefined. No parent type found
    at isJSONTypeOf (isJSONTypeOf.js:16)
    at block.js:167
    at Array.map (<anonymous>)
    at validateAnnotations (block.js:155)
    at validateMarks (block.js:90)
    at validateBlockType (block.js:47)
    at visitors.reduce._objectSpread._problems (validateSchema.js:62)
    at Array.reduce (<anonymous>)
    at validateSchema.js:61
    at validateSchema.js:83
AI Update

I can see you're getting an error when trying to add an internal link annotation to block content. The error "Could not resolve jsonType of undefined" typically occurs when there's a mismatch in how you're defining and referencing your annotation type in the schema.

Looking at your code, the issue is with how you've structured your internalLink definition. You're using type: 'reference' at the top level, but annotations need to be defined as object types with fields inside them.

Based on the Sanity documentation on annotations, here's how to fix it:

Change your internalLink definition from using type: 'reference' directly to type: 'object' with a reference field inside:

import React from 'react';

export default {
  title: 'Internal link to another document',
  name: 'internalLink',
  type: 'object',  // Changed from 'reference' to 'object'
  fields: [
    {
      name: 'reference',
      type: 'reference',
      title: 'Reference',
      to: [{ type: 'page' }, { type: 'route' }],
    }
  ],
  components: {  // Changed from 'blockEditor' to 'components'
    annotation: ({ children }) => <span>{children} 🔗</span>
  }
};

Then in your block content schema, reference it like this:

marks: {
  annotations: [
    { 
      name: 'internalLink',
      type: 'internalLink' 
    }
  ]
}

Key changes explained

  1. Use type: 'object': Annotations must be object types that can contain fields, not reference types directly at the top level
  2. Add a fields array: Put your reference configuration inside a field within the object
  3. Use components instead of blockEditor: For Studio v3, the rendering customization uses the components property with an annotation key

Alternative: Define inline

If you prefer not to have a separate file, you can define the annotation directly in your block content schema:

marks: {
  annotations: [
    {
      name: 'internalLink',
      type: 'object',
      title: 'Internal link',
      icon: () => '🔗',
      fields: [
        {
          name: 'reference',
          type: 'reference',
          to: [{ type: 'page' }, { type: 'route' }]
        }
      ],
      components: {
        annotation: (props) => <span>{props.children} 🔗</span>
      }
    }
  ]
}

The error you were seeing happened because the schema validator couldn't understand the structure when reference was used as the top-level type for an annotation. Wrapping it in an object type with fields resolves this issue.

Show original thread
4 replies
Can you try replacing 
annotations: [{ type: 'internalLink' }]
with 
annotations: [internalLink]
, then making sure you’re importing 
internalLink
.
user A
ok this works, if I import internalLink direct to document where I use it. But I thought it was enough to add it to the schemas.js as a new type.
In your 
schema.js
did you both import 
internalLink
and add it to the types array?
user M
yes, like many other types. It work if I use it non as annotation but as field in this document, but in the annotation it trwos this error. If I import it directly to document and use it this way, I have problem with resolve reference in the GraphQL qeury.

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.

Get started for freeExplore the demo

Was this answer helpful?