gatsbyjs/gatsby · error

The prop `fluid` or `fixed` is marked as required in `${comp

Error message

The prop `fluid` or `fixed` is marked as required in `${componentName}`, but their values are both `undefined`.

What it means

Thrown by gatsby-image's custom PropType validator `requireFixedOrFluid` (deprecated-packages/gatsby-image/src/index.js:744). The <Image> component requires exactly one of the `fixed` or `fluid` props to supply image data; if both are undefined at render time, this validator throws synchronously during React's prop-checking phase. It exists because gatsby-image cannot render anything useful without a source image descriptor.

Source

Thrown at deprecated-packages/gatsby-image/src/index.js:747

const fluidObject = PropTypes.shape({
  aspectRatio: PropTypes.number.isRequired,
  src: PropTypes.string.isRequired,
  srcSet: PropTypes.string.isRequired,
  sizes: PropTypes.string.isRequired,
  base64: PropTypes.string,
  tracedSVG: PropTypes.string,
  srcWebp: PropTypes.string,
  srcSetWebp: PropTypes.string,
  media: PropTypes.string,
  maxWidth: PropTypes.number,
  maxHeight: PropTypes.number,
})

function requireFixedOrFluid(originalPropTypes) {
  return (props, propName, componentName) => {
    if (!props.fixed && !props.fluid) {
      throw new Error(
        `The prop \`fluid\` or \`fixed\` is marked as required in \`${componentName}\`, but their values are both \`undefined\`.`
      )
    }

    PropTypes.checkPropTypes(
      { [propName]: originalPropTypes },
      props,
      `prop`,
      componentName
    )
  }
}

// If you modify these propTypes, please don't forget to update following files as well:
// https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-image/index.d.ts
// https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-image/README.md#gatsby-image-props
// https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/gatsby-image.md#gatsby-image-props
Image.propTypes = {

View on GitHub (pinned to 8b06340921)

Solutions

1. Pass a `fixed` or `fluid` prop sourced from a `childImageSharp.fixed` / `childImageSharp.fluid` GraphQL fragment.
2. Inspect the GraphQL response in the browser/devtools to confirm `childImageSharp` is non-null before rendering <Image />.
3. Guard the render: `{data?.file?.childImageSharp?.fluid && <Image fluid={...} />}`.
4. Migrate to gatsby-plugin-image (this package is deprecated).

Example fix

// before
<Image />
<Image fluid={data.file.maybeWrongField} />

// after
<Image fluid={data.file.childImageSharp.fluid} />
// or guard:
{data.file?.childImageSharp?.fluid && <Image fluid={data.file.childImageSharp.fluid} />}

function hasImageData(props) {
  return Boolean(props.fixed) || Boolean(props.fluid)
}
// before render:
if (!hasImageData(this.props)) return null

import PropTypes from 'prop-types'

function isImageDescriptor(d) {
  return d != null && typeof d === 'object' && 'src' in d
}
function hasImageProp(props) {
  return isImageDescriptor(props.fixed) || isImageDescriptor(props.fluid)
}

When it happens

Trigger: Rendering <Image /> with neither `fixed` nor `fluid`; rendering <Image fixed={undefined} fluid={undefined} />; passing image data under a misspelled prop name (e.g. `image={data}`); destructuring a GraphQL query result whose field is undefined and passing it as `fluid`/`fixed`.

Common situations: Migrating from gatsby-image to gatsby-plugin-image and forgetting the props differ; querying the wrong GraphQL field shape so `childImageSharp.fixed`/`.fluid` is undefined; conditional rendering where the data has not loaded yet; upgrading sharp/gatsby-transformer-sharp and the queried fragment name changed.

Related errors

• ${JSON.stringify(result)}
• Expected "Head" export to be a function got "${typeof head}"
• Slice "${sliceName}" was passed props that are not serializa
• MissingInfoError
• Your gatsby-config.js format is currently not supported by G

AI-assisted analysis of gatsbyjs/gatsby@8b06340921 (2026-08-13). Data as JSON: /api/errors/2fd91868ffe00124. Report an issue: GitHub.