TypeScript error tells me “Property 'fluid' does not exist on type 'GatsbyImage'”

[adstr123]

#24336
I have searched existing issues and posted on StackOverflow with the gatsby tag, to no avail.

However, I am well aware this could be just me being a total beginner - whilst I have a couple of years experience with Gatsby, I am brand new to TypeScript.

Essentially, the issue is that I am typing props on a component. One of these properties: image: GatsbyImage accepts fluid image data, pulled in via GraphQL from my CMS (Contentful). The data itself is coming in fine; the image is displaying as expected.

But instead of accepting a fluid prop when I render the component with JSX, it displays the error in the title/described below.

I have tried swapping out type GatsbyImage for all the other types in the declaration file, but none of them seem to prevent this error.

Since I don't have the knowledge to conclusively state that the typings for gatsby-image are correct, I have opened this as a potential bug report, but please do correct me.

Steps to reproduce

I can create a reproduction repo if this is really required but I will hold off on investing that effort until I am sure I am not just making a phenomenally stupid mistake. Here is the relevant code:

The Gatsby Page I am querying for data on, and including the component on:

// some imports & styled components definitions....
class Donate extends React.Component<{ location: WindowLocation }, {}> {
  render() {
    const heroImage = get(this, "props.data.heroImage");

    <HeroImage image={heroImage} heroposition="left" />

    // ...other unrelated components further down the page
  }
}

export const PageQuery = graphql`
  query MyQuery {
    heroImage: contentfulAsset(title: { eq: "Page Hero" }) {
      fluid(resizingBehavior: FILL) {
        ...GatsbyContentfulFluid
      }
    }
  }
`;

The component itself:

import React from "react";
import Img from "gatsby-image";
import styled from "styled-components";
import GatsbyImage from "gatsby-image";

interface HeroImageProps {
  className?: string;
  image: GatsbyImage;
  heroposition: "left" | "right";
}

const FullWidthImage = styled(Img)<{
  fluid: GatsbyImage;
  heroposition: "left" | "right";
}>`
  width: 100%;
  height: 100%;

  filter: brightness(0.6);

  img {
    object-position: ${(props) =>
      props.heroposition === "right"
        ? "center left !important;"
        : "center right !important;"};
  }
`;

const HeroImage: React.FC<HeroImageProps> = ({
  className,
  heroposition,
  image,
}) => {
  return (
    <FullWidthImage
      className={className}
      fluid={image.fluid}
      heroposition={heroposition}
    />
  );
};

export default HeroImage;

It is right at the end, inside the FullWidthImage fluid prop where the error appears.

Expected result

When declaring the GatsbyImage type on an interface prop that expects a fluid object input, TypeScript verifies that property fluid exists on type GatsbyImage.

Actual result

Error: TypeScript error tells me “Property 'fluid' does not exist on type 'GatsbyImage'”

Environment

  System:
    OS: Windows 10 10.0.19041
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor              
  Binaries:
    Node: 14.5.0 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.8.3 - /c/Python38/python
  Browsers:
    Chrome: 87.0.4280.66
    Edge: Spartan (44.19041.423.0), Chromium (86.0.622.69)
  npmPackages:
    gatsby: ^2.26.1 => 2.26.1 
    gatsby-image: ^2.5.0 => 2.5.0 
    gatsby-plugin-facebook-sdk: ^1.0.6 => 1.0.6 
    gatsby-plugin-firebase: ^0.2.0-beta.4 => 0.2.0-beta.4 
    gatsby-plugin-google-tagmanager: ^2.5.0 => 2.5.0 
    gatsby-plugin-manifest: ^2.6.0 => 2.6.0 
    gatsby-plugin-react-helmet: ^3.4.0 => 3.4.0 
    gatsby-plugin-styled-components: ^3.4.0 => 3.4.0 
    gatsby-plugin-typescript: ^2.6.0 => 2.6.0 
    gatsby-source-contentful: ^2.3.30 => 2.3.35 
    gatsby-transformer-remark: ^2.10.0 => 2.10.0 
    gatsby-transformer-sharp: ^2.6.0 => 2.6.0 
  npmGlobalPackages:
    gatsby-cli: 2.14.0

[ascorbic]

Hi. You're importing the default from "gatsby-image", which is the component itself, not the type for the props. You want the named export GatsbyImageProps. You probably want something like:

import Img, { GatsbyImageProps } from "gatsby-image"

import React from "react";
import Img from "gatsby-image";
import styled from "styled-components";
import GatsbyImage from "gatsby-image";

interface HeroImageProps {
  className?: string;
  image: GatsbyImageProps;
  heroposition: "left" | "right";
}

//etc

[adstr123]

Hi, thanks for moving this to Discussions and for responding, appreciate it!

I thought this might be the case, and it's something I tried whilst trying to resolve my original errors. It gives me more errors, so when I tried it, I simply marked it as a non-solution and reverted it....

The new error now is error TS2339: Property 'fluid' does not exist on type 'GatsbyImageProps'. Property 'fluid' does not exist on type 'GatsbyImageFixedProps'.

That really doesn't make sense to me, because why is TS talking about GatsbyImageFixedProps when it should be picking GatsbyImageFluidProps, if anything?

My HeroImage component now reads:

import React from "react";
import Img, { GatsbyImageProps, FluidObject } from "gatsby-image";
import styled from "styled-components";

interface HeroImageProps {
  className?: string;
  image: GatsbyImageProps;
  heroposition: "left" | "right";
}

const FullWidthImage = styled(Img)<{
  fluid: FluidObject | FluidObject[];
  heroposition: "left" | "right";
}>`
  width: 100%;
  height: 100%;

  filter: brightness(0.6);

  img {
    object-position: ${(props) =>
      props.heroposition === "right"
        ? "center left !important;"
        : "center right !important;"};
  }
`;

const HeroImage: React.FC<HeroImageProps> = ({
  className,
  heroposition,
  image,
}) => {
  return (
    <FullWidthImage
      className={className}
      fluid={image.fluid}
      heroposition={heroposition}
    />
  );
};

export default HeroImage;

[chesterhow]

I'm having the same issue as well

[awesomenkj]

I have the same issue. Here is my code.

import Img, { GatsbyImageProps } from "gatsby-image";

interface InternalProps {
  image: GatsbyImageProps;
}

[ascorbic]

Hi @rabpeter . Could you share a reproduction? The property is certainly defined in the index.d.ts. I'm not sure you're using it correctly there though. GatsbyImageProps is a definition of the props for the component, not for the data from GraphQL.

[vladar]

I think this is expected behavior for non-discriminated unions:

If we have a value that is a union type, we can only access members that are common to all types in the union.

We probably need to add a discriminator field for proper handling in this case. A pull request is welcome!

In the meantime, you can use guards as a hacky workaround:

type ObjectWithFluid = { fluid: FluidObject | FluidObject[] }

function isFluid(x: GatsbyImageProps): x is ObjectWithFluid {
  return x.hasOwnProperty(`fluid`)
}

const HeroImage: React.FC<HeroImageProps> = ({
  className,
  heroposition,
  image,
}) => {
  if (!isFluid(image)) {
    throw new Error(`Not fluid`)
  }
  return (
    <FullWidthImage
      className={className}
      fluid={image.fluid}
      heroposition={heroposition}
    />
  );
};

[natapg]

Hi @vladar , it is possible to do something similar with gatsby-plugin-image? I'm migrating to it, and I have something like

import Img, { GatsbyImageFluidProps, GatsbyImageFixedProps, GatsbyImageProps } from 'gatsby-image'

export type ImageInfo = GatsbyImageProps & {
  childImageSharp?: GatsbyImageProps
  image?: string | { childImageSharp: GatsbyImageProps }
  extension?: string
  publicURL?: string
}

  if (childImageSharp && isFluid(childImageSharp)) {
    return (
      <Img
        className={className}
        style={style}
        fluid={childImageSharp.fluid}
        alt={alt}
        title={title}
        imgStyle={{
          objectFit: 'contain',
        }}
      />
    )
  }

function isFluid(imageInfo: ImageInfo): imageInfo is GatsbyImageFluidProps {
  return (imageInfo as GatsbyImageFluidProps).fluid !== undefined
}

and now I want to do the same with gatsby-plugin-image, but I don't know how to do that

  if (!!image && typeof image != 'string') {
    return (
      <GatsbyImage
        image={image.childImageSharp.gatsbyImageData}
        className={className}
        style={style}
        alt={alt} />
    );
  }

Property 'gatsbyImageData' does not exist on type 'GatsbyImageProp'