gatsbyjs/gatsby · error

We've found ${without.length} sources without a media proper

Error message

We've found ${without.length} sources without a media property. They might be ignored by the browser, see: https://www.gatsbyjs.com/plugins/gatsby-image/#art-directing-multiple-images

What it means

Error "We've found ${without.length} sources without a media property. They might be ignored by the browser, see: https://www.gatsbyjs.com/plugins/gatsby-image/#art-directing-multiple-images" thrown in gatsbyjs/gatsby.

Source

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

          sizes={sizes}
        />
      )}
      {srcSet && <source media={media} srcSet={srcSet} sizes={sizes} />}
    </React.Fragment>
  ))
}

// Return an array ordered by elements having a media prop, does not use
// native sort, as a stable sort is not guaranteed by all browsers/versions
function groupByMedia(imageVariants) {
  const withMedia = []
  const without = []
  imageVariants.forEach(variant =>
    (variant.media ? withMedia : without).push(variant)
  )

  if (without.length > 1 && process.env.NODE_ENV !== `production`) {
    console.warn(
      `We've found ${without.length} sources without a media property. They might be ignored by the browser, see: https://www.gatsbyjs.com/plugins/gatsby-image/#art-directing-multiple-images`
    )
  }

  return [...withMedia, ...without]
}

function generateTracedSVGSources(imageVariants) {
  return imageVariants.map(({ src, media, tracedSVG }) => (
    <source key={src} media={media} srcSet={tracedSVG} />
  ))
}

function generateBase64Sources(imageVariants) {
  return imageVariants.map(({ src, media, base64 }) => (
    <source key={src} media={media} srcSet={base64} />
  ))
}

View on GitHub (pinned to e85d62f177)

Solutions

1. Add a `media` prop (CSS media query) to every source passed via artDirect
2. Group fixed-size variants so only one source lacks media

When it happens

Trigger: Thrown at deprecated-packages/gatsby-image/src/index.js:194 when the library encounters an invalid state.

Common situations: See trigger scenarios.

AI-assisted analysis of gatsbyjs/gatsby@e85d62f177 (2026-08-26). Data as JSON: /api/errors/09af66d0a0a8e030. Report an issue: GitHub.