gatsbyjs/gatsby · error · Error

Either the "width" or "height" argument is required f

Error message

      Either the "width" or "height" argument is required for "${source.url}"

What it means

Thrown by the polyfill-remote-file gatsby-image resolver when neither `width` nor `height` is provided for an image transformation. At least one dimension is required to compute aspect-ratio-aware sizes and generate properly sized images.

Source

Thrown at packages/gatsby-plugin-utils/src/polyfill-remote-file/graphql/gatsby-image-resolver.ts:102

  store?: Store
): Promise<{
  images: IGatsbyImageData
  layout: string
  width: number
  height: number
  backgroundColor?: string
  placeholder?: { fallback: string } | undefined
} | null> {
  if (!isImage(source)) {
    return null
  }

  if (!args.layout) {
    throw new Error(`The "layout" argument is required for "${source.url}"`)
  }

  if (!args.width && !args.height) {
    throw new Error(`
      Either the "width" or "height" argument is required for "${source.url}"
    `)
  }

  if (!args.formats) {
    args.formats = [`auto`, `webp`, `avif`]
  }

  if (!args.outputPixelDensities) {
    args.outputPixelDensities = DEFAULT_PIXEL_DENSITIES
  }

  if (!args.breakpoints) {
    args.breakpoints = DEFAULT_BREAKPOINTS
  }

  if (!args.fit) {
    args.fit = `cover`

View on GitHub (pinned to 8b06340921)

Solutions

1. Provide at least one of width or height in the resolver call (the other is derived from aspect ratio when available).
2. If using layout: 'fullWidth', ensure the schema still passes a width/height or that the sourceMetadata includes dimensions.
3. Use the standard GatsbyImage component which passes dimensions from the image data object.
4. Verify the source image node has width/height metadata populated by the source plugin.

Example fix

// before
gatsbyImageResolver(source, { layout: 'fixed' })
// after
gatsbyImageResolver(source, { layout: 'fixed', width: 300 })

// Ensure at least one dimension is provided
if (!args.width && !args.height) {
  throw new Error('Either width or height is required for image generation')
}

const hasDimension = (args: unknown): args is { width?: number; height?: number } =>
  typeof args === 'object' && args !== null &&
  (typeof (args as any).width === 'number' || typeof (args as any).height === 'number')

When it happens

Trigger: args.width and args.height are both falsy when the resolver runs; the layout check passed but no dimension was supplied.

Common situations: A GraphQL query or programmatic call provides layout but omits both width and height, expecting a default that the resolver does not assume.

Related errors

• The "layout" argument is required for "${source.url}"
• The provided width of "${width}" is incorrect. Dimensions sh
• The provided height of "${height}" is incorrect. Dimensions
• No width or height is given to resize "${source.url}"
• Invalid plugin options for "gatsby-plugin-sitemap":

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