Upgrading Gatsby Project to V3 - Attempted import error: 'getFluidGatsbyImage' is not exported

Hey! This is a known breaking change with Gatsby v3 and the gatsby-source-sanity plugin. The getFluidGatsbyImage and getFixedGatsbyImage helper functions were removed because Gatsby v3 deprecated the old gatsby-image package in favor of the new gatsby-plugin-image.

Here's how to fix your code:

1. Install the new image plugin:

npm install gatsby-plugin-image

2. Update your imports and code:

import React from "react"
import { GatsbyImage } from "gatsby-plugin-image"
import { getGatsbyImageData } from "gatsby-source-sanity"
import * as css from "./figure.module.css"

const Figure = ({ node }) => {
  const imageData = getGatsbyImageData(
    node.image.asset._ref,
    { maxWidth: 1024 },
    {
      projectId: process.env.SANITY_PROJECT_ID || "bjzgdow4",
      dataset: process.env.SANITY_DATASET || "production",
    }
  )

  return (
    <figure className={`css.root my-6`}>
      <GatsbyImage image={imageData} alt={node.alt} />
      {node.caption && (
        <figcaption className={css.figcaption}>{node.caption}</figcaption>
      )}
    </figure>
  )
}

export default Figure

Key changes:

• getFluidGatsbyImage → getGatsbyImageData
• gatsby-image → gatsby-plugin-image
• Img component → GatsbyImage component
• fluid prop → image prop

The new getGatsbyImageData helper works similarly but returns data compatible with the modern GatsbyImage component. The gatsby-source-sanity plugin documentation should have more details on the image helper functions available.

This migration is part of Gatsby's move to a more performant image handling system with better lazy loading and modern image formats support. Your images should work even better after this change! 🎉