The inclusion of a custom list preview with prepare in the sanity schema results in errors during the construction

I recently started working with next.js, TypeScript, and Sanity, and everything has been going smoothly so far. I have multiple schemas defined in my project and it works fine in development. The linting checks also do not show any errors. However, when I try to deploy to Vercel, the build fails with the following error:

\`Failed to compile.
./src/pages/admin/\[\[...index\]\].tsx:12:19
Type error: Type '...' is not assignable to type 'Config'.
...
Error: Command "npm run build" exited with 1
Deployment completed
BUILD_UTILS_SPAWN_1: Command "npm run build" exited with 1\`

I have identified that the issue lies within the preview section of the schema:

    `preview: {
        select: {
          title: "name",
          index: "visibility.index",
          inSlides: "visibility.inSlides",
          inRestaurants: "visibility.inRestaurants",
          img: "logo",
        },
        prepare(selection: {
          title: string;
          index: number;
          inSlides: boolean;
          inRestaurants: boolean;
          img: string;
        }) {
          return {
            title: selection.title,
            media: selection.img,
            subtitle: `POS:${selection.index}, Slide:${
              selection.inSlides ? "🟢" : "🔴"
            }, List:${selection.inRestaurants ? "🟢" : "🔴"}`,
          };
        },
      },

Without the preview code, the deployment process proceeds as expected. The project works well in development and runs fine with the above code included, and custom schema previews work without any issues.

I am using integrated Sanity Studio in a Next.js page: https://i.sstatic.net/RmMUw.png

config: https://i.sstatic.net/j3wkE.png

While I understand that there are some incompatible types, I am unsure how to adjust them or make them compatible, especially since my code follows the manuals I found and works in the development environment. Any assistance on this matter would be greatly appreciated.

Answer â„–1

I encountered the exact same issue in a similar stack/context.

The type errors originated from this specific section of the code:

prepare(selection: {
      title: string;
          index: number;
          inSlides: boolean;
          inRestaurants: boolean;
          img: string;
    })

To rectify the issue, I modified it to:

prepare(value: Record<string, any>)

This adjustment was made to prevent type errors during build time.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

TS1057: It is required that an async function or method has a return type that can be awaited

There was a recent Github issue reported on March 28th regarding async arrow functions generating faulty code when targeting ES5, resulting in the error message: TS1057: An async function or method must have a valid awaitable return type You can find t ...

Change a nested for-loop into an Observable that has been transformed using RxJS

Currently, the following function is operational, but I consider it a temporary solution as I'm extracting .value from a BehaviorSubject instead of maintaining it as an observable. Existing Code Snippet get ActiveBikeFilters(): any { const upd ...

Using Angular to make an API call within a JavaScript function

I am facing an issue when trying to call an API in a JavaScript function as shown below. The injected services (subService) and defined variables (formData) are not recognized in the JavaScript function, resulting in an error of undefined addSub. How can I ...

How can we use tsyringe (a dependency injection library) to resolve classes with dependencies?

I seem to be struggling with understanding how TSyringe handles classes with dependencies. To illustrate my issue, I have created a simple example. In my index.tsx file, following the documentation, I import reflect-metadata. When injecting a singleton cl ...

Issue with CSS/JS resolved: figured out a way to create a page/menu that overlaps with their individual scrollbars

I am encountering an issue with a scrollbar that is related to a fullscreen menu appearing on a page and causing the page scrollbar to reset due to a display: none property. The images below provide a visual representation of the problem: Below is the Ty ...

I've been working on setting up a navbar in React/typescript that links to various routes, but I've hit a snag - every time I try to create a link

import React from 'react' import { Link } from 'react-router-dom' export default function NavBar() { return ( <div className='NavContainer'> <link to='/home'>Home</link> <l ...

I have attempted to pass the source to the Image tag using an array of objects, but instead of displaying the images, the page is coming up blank. Could I have made

import React from 'react' import Image from 'next/image' import "./work.scss" function Work() { const workObject = [ { path: "/work/1.webp", desc:"Maccabi Tzair" ...

Discover the power of catching Custom DOM Events in Angular

When working with an Angular library, I encountered a situation where a component within the library dispatches CustomEvents using code like the following: const domEvent = new CustomEvent('unselect', { bubbles: true }); this.elementRef.nati ...

Issues arise in Angular 4 when the "Subscribe" function is repeatedly invoked within a for/switch loop

My array of strings always changes, for example: ["consumables", "spells", "spells", "consumables", "spells", "consumables", "spells", "characters", "characters", "consumables"] I iterate through this array and based on the index, I execute different .su ...

The ID provided does not match the format of a Function Type

Click here for the image import {MongoClient, ObjectId} from "mongodb"; async function handler(req, res){ if(req.method === "POST"){ const data = req.body; const client = await MongoClient.connect("mongoDB URL&q ...

What is the process of TypeScript module resolution within the Play framework?

In my Play project, I am interested in incorporating Angular 2 with TypeScript. Utilizing the sbt-typescript plugin and the angular2 WebJAR, I have encountered a situation where Play places the extracted WebJAR in target/web/public/main/lib/angular2. Ideal ...

Failure in Dependency Injection in Angular with Typescript

My mobile application utilizes AngularJS for its structure and functionality. Below is the code snippet: /// <reference path="../Scripts/angular.d.ts" /> /// <reference path="testCtrl.ts" /> /// <reference path="testSvc.ts" /> angular.mo ...

A powerful trio: Axios, Typescript, and Promises

I am facing a TypeScript dilemma. I have a REST method that is being called within my http library by Vue action. I want the resolve() method to return the typed array, but if I do not convert it within the action.ts "then" method, I get a '.length do ...

How can esbuild be used to load .wglsl files in Typescript files?

I'm currently utilizing esbuild to bundle my Typescript code, but I'm facing a challenge with configuring a loader for ".wgsl" files. Here is my app.ts file: import shader from './shader.wgsl'; //webgpu logic This is my shader.d.ts fi ...

The issue with launching a Node.js server in a production environment

I'm currently facing an issue when trying to start my TypeScript app after transpiling it to JavaScript. Here is my tsconfig: { "compilerOptions": { "module": "NodeNext", "moduleResolution": "NodeNext", "baseUrl": "src", "target": " ...

Permission Error: Client has been denied access to the requested data in the Firebase Database

I have a database named users set up on Firebase. I've configured the following rule to allow read and write access: rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { allow read, write: if true; ...

What is the reason for the lang parameter not being inherited by getStaticProps from getStaticPaths?

getStaticPaths method: const fetchEvents = async () => { let eventData = await fetch(`${baseURL}getEvents2`, { method: "post", }); let events = await eventData.json(); const paths = ["hu", "en"].flatMap((lang) = ...

Adding existing tags to Select2 in Angular2 can be accomplished by following these steps:

HTML: <select data-placeholder="Skill List" style="width:100%;" class="chzn-select form-control" multiple="multiple"> <option *ngFor="#skill of allSkills" [ngValue]="skill">{{skill}} </option> </select> TS: allSkills = [& ...

Troubleshooting problem with Material-UI and Next.JS in Webpack

I have encountered an error while trying to add the code from this file: https://github.com/mui-org/material-ui/blob/master/examples/nextjs-with-styled-components-typescript/next.config.js When I include the next.config.js code provided below, I receive ...

Develop a query builder in TypeORM where the source table (FROM) is a join table

I am currently working on translating this SQL query into TypeORM using the QueryBuilder: SELECT user_places.user_id, place.mpath FROM public.user_root_places_place user_places INNER JOIN public.place place ON place.id = user_places.place_id The ...