gatsby logo

graphql logo react logo

This relates to a previous post Updated To Gatsby v3

Migrating to gatsby-plugin-image seemed pretty easy but there was a bug with the way global is implemented in the plugin which caused other components to break.

📝 Gatsby Image Plugin on Gatsby Documentation

Migrating to Image Plugin #

There are a few steps to migrating an existing site to use the plugin.

Fix bug introduced by gatsby-plugin-image

Gatsby Image Plugin pull request on github

GraphQL Queries #

Changes to the graphql image queries were pretty easy.

image {
  childImageSharp {
-    fluid(maxWidth: 1200) {
-      ...GatsbyImageSharpFluid
-    }
+    gatsbyImageData(layout: FULL_WIDTH)

Replacing Img with GatsbyImage #

Replace import from gatsby-image with gatsby-plugin-image

-import Img from 'gatsby-image'
+import { GatsbyImage } from 'gatsby-plugin-image'

Replace Img elements with GatsbyImage elements referencing new GraphQL query data.

-<Img fluid={image.childImageSharp.fluid} />
+<GatsbyImage image={image.childImageSharp.gatsbyImageData} />

Fix Bug #

After doing all of the above everything seems ok ?
Possibly but if you check the console you may find errors with react components referencing global.

⚠️ Warning

If you use 'global' in any plugins or components they will fail with 'global is not defined' due to gatsby-plugin-image.

As a workaround define global in gatsby-browser.js. = window

Everything should now be working, including plugins & components referencing global.

📦 Update

The global bug is now fixed in gatsby-plugin-image@1.2.1
There should be no need to define in gatsby-browser.js.


The source for the site is available on github.