Bug when using compnent in adocument

[hasan03450]

Dear Sanity member,

I am encountering a technical issue when using the buttonComponent in a custom schema (Faq.ts). An error occurs while typing text in the button text field. Below are the buttonComponent, faq and the error provided:

The Faq.ts Schema:

import { BlockContentIcon } from '@sanity/icons';
import { defineField } from 'sanity';

export default {
    name: 'Faq',
    type: 'document',
    title: 'FAQ',
    icon: BlockContentIcon,
    groups: [
        {
            name: 'faq',
            title: 'FAQ'
        },
        {
            name: 'styling',
            title: 'Styling'
        }
    ],
    fields: [
        defineField({
            name: 'tabs',
            title: 'Tabs',
            type: 'array',
            of: [
                {
                    type: 'object',
                    fields: [
                        {
                            name: 'title',
                            title: 'Tab Title',
                            type: 'string'
                        },
                        {
                            name: 'faqs',
                            title: 'FAQs',
                            type: 'array',
                            of: [
                                {
                                    type: 'object',
                                    fields: [
                                        {
                                            name: 'question',
                                            title: 'Question',
                                            type: 'string'
                                        },
                                        {
                                            name: 'answer',
                                            title: 'Answer',
                                            type: 'string'
                                        }
                                    ]
                                }
                            ],
                        },
                        {
                            name: 'button',
                            title: 'Button',
                            type: 'button',
                        },
                    ]
                }
            ],
        })
    ],
    preview: {
        select: {
            title: 'tabs.0.title',
            subtitle: 'tabs.0.faqs.0.question',
            media: 'tabs.0.button.text'
        },
    }
}

The buttonComponent.ts:

import { defineField, defineType } from 'sanity';
import { DashboardIcon } from '@sanity/icons';

export default {
    groups: [
        {
            name: 'content',
            title: 'Content',
        },
        {
            name: 'styling',
            title: 'Styling',
        },
    ],
    name: 'button',
    type: 'object',
    title: 'Button',
    icon: DashboardIcon,
    fields: [
        defineField({
            name: 'text',
            type: 'string',
        }),
        defineField({
            name: 'type',
            type: 'string',
            options: {
                list: [
                    { title: 'Primary', value: 'primary' },
                    { title: 'Secondary', value: 'secondary' },
                    { title: 'Underline', value: 'underline' },
                ],
            },
            initialValue: 'secondary',
        }),
        {
            title: "Button Type",
            name: 'buttonType',
            type: 'string',
            options: {
                list: [
                    { title: 'External', value: 'external' },
                    { title: 'Internal', value: 'internal' },
                ]
            },
            initialValue: 'internal',
        },
        {
            title: 'Internal link',
            name: 'internalLink',
            type: 'reference',
            to: [{ type: 'page' }],
            hidden: ({ parent }) => parent?.buttonType === 'external' || !parent?.buttonType,
        },
        {
            title: 'External link',
            name: 'externalUrl',
            type: 'url',
            hidden: ({ parent }) => parent?.buttonType === 'internal' || !parent?.buttonType,
        },
    ],
    preview: {
        select: {
            title: 'text',
            type: 'type',
        },
        prepare(selection) {
            const { title, type } = selection;
            return {
                title: title,
                subtitle: "Button",
            };
        },
    },
};

Error in Sanity:

Unhandled Runtime Error
Error: Failed to execute 'createElement' on 'Document': The tag name provided ('test ') is not a valid name.

Call Stack:
Error: Failed to execute 'createElement' on 'Document': The tag name provided ('test ') is not a valid name.
    at createElement (http://localhost:3333/node_modules/.sanity/vite/deps/chunk-XKOCUJC3.js?v=cc15446d:11336:42)
    at createInstance (http://localhost:3333/node_modules/.sanity/vite/deps/chunk-XKOCUJC3.js?v=cc15446d:12172:28)
    at completeWork (http://localhost:3333/node_modules/.sanity/vite/deps/chunk-XKOCUJC3.js?v=cc15446d:20136:34)
    at completeUnitOfWork (http://localhost:3333/node_modules/.sanity/vite/deps/chunk-XKOCUJC3.js?v=cc15446d:23077:25)
    at performUnitOfWork (http://localhost:3333/node_modules/.sanity/vite/deps/chunk-XKOCUJC3.js?v=cc15446d:23059:13)
    at workLoopSync (http://localhost:3333/node_modules/.sanity/vite/deps/chunk-XKOCUJC3.js?v=cc15446d:22990:13)
    at renderRootSync (http://localhost:3333/node_modules/.sanity/vite/deps/chunk-XKOCUJC3.js?v=cc15446d:22969:15)
    at recoverFromConcurrentError (http://localhost:3333/node_modules/.sanity/vite/deps/chunk-XKOCUJC3.js?v=cc15446d:22589:28)
    at performSyncWorkOnRoot (http://localhost:3333/node_modules/.sanity/vite/deps/chunk-XKOCUJC3.js?v=cc15446d:22732:28)
    at flushSyncCallbacks (http://localhost:3333/node_modules/.sanity/vite/deps/chunk-XKOCUJC3.js?v=cc15446d:12960:30)

Does anyone has had this issue before?

Any help will be greatly appreciated!

[jordanl17]

Hello, I see that you are trying to set the media preview for each document to media: 'tabs.0.button.text'. Is this intentional, as it is trying to access the text string as the media value which is causing your issue