类型错误：类型为“{ projectId: string | 不明确的; }' 不可分配给 'SCL| 类型的参数防雷器 | 不明确的'

Question

I'm trying to deploy my project to Vercel but it seems to be giving me this error saying the following:

Type error: Argument of type '{ dataset: string; projectId: string | undefined; apiVersion: string; useCdn: boolean; }' is not assignable to parameter of type 'SanityClientLike | SanityProjectDetails | undefined'. Type '{ dataset: string; projectId: string | undefined; apiVersion: string; useCdn: boolean; }' is not assignable to type 'SanityProjectDetails'. Types of property 'projectId' are incompatible. Type 'string | undefined' is not assignable to type 'string'.
Type 'undefined' is not assignable to type 'string'.

import { createClient } from "next-sanity";
import createImageUrlBuilder from '@sanity/image-url';

export const config = {
    dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || 'production',
    projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
    apiVersion: '2021-03-25',
    useCdn: process.env.NODE_ENV === 'production',
};

export const sanityClient = createClient(config);

export const urlFor = (source: any) => createImageUrlBuilder(config).image(source);

It's saying the error lies within the line createImageUrlBuilder(config). I'm not sure on what is wrong with this line. If anyone knows how to fix this, I will appreaciate it so much.

Answer 1

In your config add an OR condition with empty string value for projectId

export const config = {
    dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || 'production',
    projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID || '',
    apiVersion: '2021-03-25',
    useCdn: process.env.NODE_ENV === 'production',
};

Answer 2

You must put OR condition after projectId

import { createClient } from "next-sanity";

import createImageUrlBuilder from "@sanity/image-url";

export const config = {
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || "production",
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID || "",
  apiVersion: "2021-03-25",
  useCdn: process.env.NODE_ENV === "production",
};

export const sanityClient = createClient(config);

export const urlFor = (source: any) => {
  createImageUrlBuilder(config).image(source);
};