Type error: Object literal may only specify known properties, and 'preview' does not exist in type 'DocumentComponents'.

[marcinincreo]

Type error: Object literal may only specify known properties, and 'preview' does not exist in type 'DocumentComponents'. occurs when using custom preview component in defineType method:

components: { preview: ExamplePreviewComponent, },

Which versions of Sanity are you using?

• sanity 3.40.0
• typescript 5.4.5

What operating system are you using?

Which versions of Node.js / npm are you running?

• node 20.12.2
• npm 8.15.1

[juice49]

Hey @marcinincreo. Please can you share your full defineType code?

[marcinincreo]

Hi @juice49

defineType code:

import { defineField, defineType } from "sanity";
import LayoutItem from "sanity/components/LayoutItem";
import { StackCompactIcon } from "@sanity/icons";

export default defineType({
  title: "Accordion",
  name: "accordion",
  type: "document",
  icon: StackCompactIcon,
  fields: [
    defineField({
      title: "Tittel",
      name: "title",
      type: "string",
      validation: (Rule) => Rule.required(),
    }),
  ],
  components: {
    preview: LayoutItem,
  },
});

Custom component code:

import { Flex } from "@sanity/ui";

const LayoutItem = (props) => {
  return <Flex>{props.renderDefault(props)}</Flex>;
};

export default LayoutItem;

[juice49]

Thank you! Do you see the error when you run a type check directly (tsc), and if so, please can you share the full output?

[marcinincreo]

@juice49

tsc
accordion.ts:26:5 - error TS2353: Object literal may only specify known properties, and 'preview' does not exist in type 'DocumentComponents'.

26     preview: LayoutItem,
       ~~~~~~~

  node_modules/.pnpm/sanity@3.40.0_@types+node@20.12.10_@types+react@18.3.1_react-dom@18.3.1_react@18.3.1_styled-components@6.1.9/node_modules/sanity/lib/_singletons.d.ts:8540:5
    8540     components?: DocumentComponents
             ~~~~~~~~~~
    The expected type comes from property 'components' which is declared here on type '{ type: "document"; name: "accordion"; } & Omit<DocumentDefinition, "preview"> & { preview?: PreviewConfig<{ title: string; items: string; }, Record<"title" | "items", any>>; }'

[pixel-toys-chris-evans]

Hey 😄

We also receive the same issue, via typescript language server and when attempting to build in strict mode.

Type error: Object literal may only specify known properties, and 'input' does not exist in type 'DocumentComponents'.

  166 |   },
  167 |   components: {
> 168 |     input: (props) => {
      |     ^
  169 |       if (Array.isArray(props.groups) && props.groups.length > 0) {
  170 |         if (props.groups[0].name === "all-fields") {
  171 |           props.groups.shift();

We have ts-ignored the type issue for now as we didn't see any breaking changes in the latest changelogs.

[pixel-toys-chris-evans]

As an FYI, this issue also affects the official plugin sanity-plugin-hotspot-array.

[ricokahler]

Hi I'm now investigating this issue. I think it has something to do with how typescript handles declaration merging. To avoid cyclical dependencies in our code, we leverage declaration merging here…

sanity/packages/sanity/src/core/form/types/definitionExtensions.ts

Lines 306 to 307 in bec0ff3

	/* To avoid cyclic dependencies on Props, we extend all type definitions here, to add the correct component props */
	declare module '@sanity/types' {

where the components? property is augmented to the type here:

sanity/packages/sanity/src/core/form/types/definitionExtensions.ts

Lines 448 to 455 in bec0ff3

	export interface DocumentDefinition {
	/**
	*
	* @hidden
	* @beta
	*/
	components?: DocumentComponents
	}

I'm not sure why this is occuring. Might be due to a mismatch in versions? Can you provide your package.json and lockfiles if possible? Alternatively if you could put up a reproduction in a repo somewhere, that would definitely help us get to the bottom of this.

As cliche as this sounds, I would recommend ensuring that all versions of sanity in your package.jsons are the same and then nuking your lockfiles and reinstalling.

[marcinincreo]

@ricokahler

Followed up with the advice but outcome remains the same. To make sure this is not related to the project I worked on I created a new sanity installation with pnpm create sanity@latest. Error remains the same as in #6542 (comment).

package.json:

{
  "name": "sanity-test",
  "private": true,
  "version": "1.0.0",
  "main": "package.json",
  "license": "UNLICENSED",
  "scripts": {
    "dev": "sanity dev",
    "start": "sanity start",
    "build": "sanity build",
    "deploy": "sanity deploy",
    "deploy-graphql": "sanity graphql deploy"
  },
  "keywords": [
    "sanity"
  ],
  "dependencies": {
    "@sanity/vision": "^3.42.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sanity": "^3.42.1",
    "styled-components": "^6.1.8"
  },
  "devDependencies": {
    "@sanity/eslint-config-studio": "^4.0.0",
    "@types/react": "^18.0.25",
    "eslint": "^8.6.0",
    "prettier": "^3.0.2",
    "typescript": "^5.1.6"
  },
  "prettier": {
    "semi": false,
    "printWidth": 100,
    "bracketSpacing": false,
    "singleQuote": true
  }
}