TypeScript Types Don't Allow `enableBlurUp` to be False

[mutewinter]

Versions

• next-sanity-image@3.1.5
• typescript@4.3.5

The Error

const imageProps = useNextSanityImage(
  sanityClient,
  image,
  {
    enableBlurUp: false,
  },
);

error TS2769: No overload matches this call.
  Overload 1 of 2, '(sanityClient: SanityClientLike, image: SanityImageSource | null, options?: (UseNextSanityImageOptions & { enableBlurUp?: true | undefined; }) | undefined): (Required<...> & { ...; }) | null', gave the following error.
    Argument of type '{ blurUpImageWidth: number; blurUpImageQuality: number; blurUpAmount: number; } | { enableBlurUp: false; }' is not assignable to parameter of type '(UseNextSanityImageOptions & { enableBlurUp?: true | undefined; }) | undefined'.
      Type '{ enableBlurUp: false; }' is not assignable to type 'UseNextSanityImageOptions & { enableBlurUp?: true | undefined; }'.
        Type '{ enableBlurUp: false; }' is not assignable to type '{ enableBlurUp?: true | undefined; }'.
          Types of property 'enableBlurUp' are incompatible.
            Type 'false' is not assignable to type 'true | undefined'.
  Overload 2 of 2, '(sanityClient: SanityClientLike, image: SanityImageSource | null, options?: (UseNextSanityImageOptions & { enableBlurUp: false; }) | undefined): (Omit<...> & { ...; }) | null', gave the following error.
    Argument of type '{ blurUpImageWidth: number; blurUpImageQuality: number; blurUpAmount: number; } | { enableBlurUp: false; }' is not assignable to parameter of type '(UseNextSanityImageOptions & { enableBlurUp: false; }) | undefined'.
      Type '{ blurUpImageWidth: number; blurUpImageQuality: number; blurUpAmount: number; }' is not assignable to type 'UseNextSanityImageOptions & { enableBlurUp: false; }'.
        Property 'enableBlurUp' is missing in type '{ blurUpImageWidth: number; blurUpImageQuality: number; blurUpAmount: number; }' but required in type '{ enableBlurUp: false; }'.

The Source

Here are the types in the current version of the NPM package:

import { SanityClientLike, SanityImageSource } from '@sanity/image-url/lib/types/types';
import { UseNextSanityImageDimensions, UseNextSanityImageOptions, UseNextSanityImageProps } from './types';
export declare const DEFAULT_BLUR_UP_IMAGE_WIDTH = 64;
export declare const DEFAULT_BLUR_UP_IMAGE_QUALITY = 30;
export declare const DEFAULT_BLUR_UP_AMOUNT = 50;
export declare const DEFAULT_FALLBACK_IMAGE_WIDTH = 1920;
export declare const DEFAULT_FALLBACK_IMAGE_QUALITY = 75;
export declare function getImageDimensions(image: SanityImageSource): UseNextSanityImageDimensions;
export declare function useNextSanityImage(sanityClient: SanityClientLike, image: SanityImageSource | null, options?: UseNextSanityImageOptions & {
    enableBlurUp?: true;
}): (Required<UseNextSanityImageProps> & {
    placeholder: 'blur';
}) | null;
export declare function useNextSanityImage(sanityClient: SanityClientLike, image: SanityImageSource | null, options?: UseNextSanityImageOptions & {
    enableBlurUp: false;
}): (Omit<UseNextSanityImageProps, 'blurDataURL'> & {
    placeholder: 'empty';
}) | null;

The Possible Fix

I believe the issue is that enableBlurUp: false should be enableBlurUp?: false.

[lorenzodejong]

I don't receive the same error as you. The typing may be a bit confusing, however enableBlurUp is defaulted to true when not specified. The function overload specifies that if enableBlurUp is explicitly set to true or not specified at all, the return value should contain placeholder: 'blur'. If enableBlurUp is explicitly set to false, the return value should contain placeholder: 'empty'.

Would you mind sharing your tsconfig.json with me? Perhaps this is the result of a specific Typescript setting.

[mutewinter]

Sure, here's my TypeScript config:

{
  "exclude": ["node_modules", "../node_modules"],
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "lib": ["dom", "dom.iterable", "esnext"],
    "target": "es6",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noImplicitAny": true,
    "noUncheckedIndexedAccess": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true
  }
}

[lorenzodejong]

I've just pushed the provided fix, check out release 3.1.6 to see if this has fixed your issue!

[mutewinter]

Confirmed fixed!

[lorenzodejong]

Good to hear!