{"record":{"id":"2fd91868ffe00124","repo":"gatsbyjs/gatsby","slug":"the-prop-fluid-or-fixed-is-marked-as-required","errorCode":null,"errorMessage":"The prop `fluid` or `fixed` is marked as required in `${componentName}`, but their values are both `undefined`.","messagePattern":"The prop `fluid` or `fixed` is marked as required in `(.+?)`, but their values are both `undefined`\\.","errorType":"validation","errorClass":null,"httpStatus":null,"severity":"error","filePath":"deprecated-packages/gatsby-image/src/index.js","lineNumber":747,"sourceCode":"\nconst fluidObject = PropTypes.shape({\n  aspectRatio: PropTypes.number.isRequired,\n  src: PropTypes.string.isRequired,\n  srcSet: PropTypes.string.isRequired,\n  sizes: PropTypes.string.isRequired,\n  base64: PropTypes.string,\n  tracedSVG: PropTypes.string,\n  srcWebp: PropTypes.string,\n  srcSetWebp: PropTypes.string,\n  media: PropTypes.string,\n  maxWidth: PropTypes.number,\n  maxHeight: PropTypes.number,\n})\n\nfunction requireFixedOrFluid(originalPropTypes) {\n  return (props, propName, componentName) => {\n    if (!props.fixed && !props.fluid) {\n      throw new Error(\n        `The prop \\`fluid\\` or \\`fixed\\` is marked as required in \\`${componentName}\\`, but their values are both \\`undefined\\`.`\n      )\n    }\n\n    PropTypes.checkPropTypes(\n      { [propName]: originalPropTypes },\n      props,\n      `prop`,\n      componentName\n    )\n  }\n}\n\n// If you modify these propTypes, please don't forget to update following files as well:\n// https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-image/index.d.ts\n// https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-image/README.md#gatsby-image-props\n// https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/gatsby-image.md#gatsby-image-props\nImage.propTypes = {","sourceCodeStart":729,"sourceCodeEnd":765,"githubUrl":"https://github.com/gatsbyjs/gatsby/blob/8b06340921ffdf23125a365b9c9923690cb62ce6/deprecated-packages/gatsby-image/src/index.js#L729-L765","documentation":"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.","triggerScenarios":"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`.","commonSituations":"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.","solutions":["Pass a `fixed` or `fluid` prop sourced from a `childImageSharp.fixed` / `childImageSharp.fluid` GraphQL fragment.","Inspect the GraphQL response in the browser/devtools to confirm `childImageSharp` is non-null before rendering <Image />.","Guard the render: `{data?.file?.childImageSharp?.fluid && <Image fluid={...} />}`.","Migrate to gatsby-plugin-image (this package is deprecated)."],"exampleFix":"// before\n<Image />\n<Image fluid={data.file.maybeWrongField} />\n\n// after\n<Image fluid={data.file.childImageSharp.fluid} />\n// or guard:\n{data.file?.childImageSharp?.fluid && <Image fluid={data.file.childImageSharp.fluid} />}","handlingStrategy":"type-guard","validationCode":"function hasImageData(props) {\n  return Boolean(props.fixed) || Boolean(props.fluid)\n}\n// before render:\nif (!hasImageData(this.props)) return null","typeGuard":"import PropTypes from 'prop-types'\n\nfunction isImageDescriptor(d) {\n  return d != null && typeof d === 'object' && 'src' in d\n}\nfunction hasImageProp(props) {\n  return isImageDescriptor(props.fixed) || isImageDescriptor(props.fluid)\n}","tryCatchPattern":null,"preventionTips":["Always pass childImageSharp.fixed or childImageSharp.fluid from a GraphQL query.","Conditionally render <Image/> only when the image data is present.","Migrate to gatsby-plugin-image which has stricter, clearer contracts."],"tags":["react","props","gatsby-image","validation","deprecated"],"backgroundTag":null,"analyzedSha":"8b06340921ffdf23125a365b9c9923690cb62ce6","analyzedAt":"2026-08-13T02:36:21.405Z","schemaVersion":2},"datasetVersion":"2026-08-13T04:17:16.726Z"}