gatsbyjs/gatsby · error

[gatsby-plugin-image] You're missing out on some cool perfor

Error message

[gatsby-plugin-image] You're missing out on some cool performance features. Please add "gatsby-plugin-image" to your gatsby-config.js

What it means

Development-time guard in GatsbyImage: the browser component renders even though gatsby-plugin-image is not registered in gatsby-config.js (gatsbyImageIsInstalled() is false), so hydration-optimized features (placeholder/blur-up wiring, main image metadata) are missing. Only fires in development via console.warn.

Source

Thrown at packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx:249

    className: `${wClass}${className ? ` ${className}` : ``}`,
    ref: root,
    dangerouslySetInnerHTML,
    suppressHydrationWarning: true,
  })
}

export const GatsbyImage: FunctionComponent<GatsbyImageProps> = memo(
  function GatsbyImage(props) {
    if (!props.image) {
      if (process.env.NODE_ENV === `development`) {
        console.warn(`[gatsby-plugin-image] Missing image prop`)
      }

      return null
    }

    if (!gatsbyImageIsInstalled() && process.env.NODE_ENV === `development`) {
      console.warn(
        `[gatsby-plugin-image] You're missing out on some cool performance features. Please add "gatsby-plugin-image" to your gatsby-config.js`
      )
    }

    return createElement(GatsbyImageHydrator, props)
  }
)

GatsbyImage.propTypes = propTypes
GatsbyImage.displayName = `GatsbyImage`

View on GitHub (pinned to e85d62f177)

Solutions

1. Add "gatsby-plugin-image" to the plugins array in gatsby-config.js
2. Upgrade gatsby to a version compatible with gatsby-plugin-image

When it happens

Trigger: Thrown at packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx:249 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/7e320fc8bdbbcd4d. Report an issue: GitHub.