[gatsby-plugin-image] mobile vs. desktop logo conflicting with gatsby-image-wrapper

My site’s desktop logo/mobile logo differing sizes are stepping on each other. At first I thought this was an issue with my code so I opened a discussion question for help but after further research I believe it is a bug.

Description

I found two similar issues #30096 and #30841 and a patch was pushed in version 1.4 to address. However, I am running v1.6.0 and I am still having a similar issue.

Here is my code:

import React from "react"
import { Link, useStaticQuery, graphql } from "gatsby"

import Navigation from "../components/navigation"
import Slider from "../components/slider"
import { GatsbyImage, getImage, withArtDirection } from "gatsby-plugin-image";
import Footer from "../components/footer"
import Pagination from "../templates/blog-pagination"

const Layout = ({ location, children }) => {
  const rootPath = `${__PATH_PREFIX__}/`
  let header

  const data = useStaticQuery(graphql`{
  desktopLogo: file(absolutePath: {regex: "/FfT_Logo_Desktop.png/"}) {
    childImageSharp {
      gatsbyImageData(
        width: 500
        quality: 100
        placeholder: TRACED_SVG
        formats: [AUTO, WEBP, AVIF]
        layout: FULL_WIDTH
      )
    }
  }
  mobileLogo: file(absolutePath: {regex: "/FfT_Logo_Mobile.png/"}) {
    childImageSharp {
      gatsbyImageData(
        quality: 100
        placeholder: BLURRED
        formats: [AUTO, WEBP, AVIF]
        layout: CONSTRAINED
      )
    }
  }
}
`)

const logos = withArtDirection(getImage(data.mobileLogo), [
  {
    media: "(min-width: 768px)",
    image: getImage(data.desktopLogo),
  },
])

  if (location.pathname === rootPath) {
    header = (
      <div class="px-4 mb-6 md:ml-20">
        <GatsbyImage image={logos} alt="Fallfish Tenkara" />
      </div>
    )
  } else {
    header = (
      <div class="px-4 mb-6 md:ml-20">
        <Link to={`/`}>
          <GatsbyImage image={logos} alt="Fallfish Tenkara" />
        </Link>
      </div>
        
    )
  }
  return (
    <div class="flex flex-col">
      <Navigation />
      <header class="pr-2">{header}</header>  
        <div class="hidden md:block w-2/3 mx-auto">
          <Slider />
        </div>
      <div class="bg-gray-200 mb-4 w-full lg:w-2/3 mx-auto overflow-hidden rounded-lg shadow-xl">
        <main>{children}</main>
        <Pagination />
      </div>
        <Footer />
    </div>
  )
}

export default Layout

If I open dev tools within localhost and edit the gatsby-image-wrapper from constrained to full_width then the logo is rendered “correctly”. However, if I update within my code constrained to full_width then I get a slew of error messages in the console and local host (see screenshot below).

Also, I get Uncaught (in promise) ChunkLoadError: Loading hot update chunk node_modules_gatsby-plugin-image_dist_lazy-hydrate-4711f4b0_js failed. (missing: http://localhost:8000/node_modules_gatsby-plugin-image_dist_lazy-hydrate-4711f4b0_js.e64bd67ae4a8e3135120.hot-update.js) in the console which may be related to #18866 (???) After clearing the error messages the logo is still rendering incorrectly (both the live site and localhost currently have this issue)…

Here are two screen shots of the before and after edits of gatsby-image-wrapper from the dev tools.

So, it would seem that the edits I am making in the query with useStaticQuery are not being pushed to gatsby-image-wrapper for some reason…

Steps to reproduce

You should see the issue on the home page of my minimum repo here make sure to switch from mobile to desktop view in dev tools to see the logo switch…

Expected result

I should be able to seamlessly switch from my desktop logo and mobile logo and have the appropriate sizes of the png files rendered on the screen.

Actual result

The logo is only partially showing, or zoomed all the way in and when I attempt to edit the code in layout.js I get multiple runtime errors (that are often cleared by refreshing the browser but sometimes have to be cleared with gatsby clean and restart of localhost) and ChunkLoadErrors (as mentioned above in Description

Environment

System: OS: macOS 11.4 CPU: (8) x64 Intel® Core™ i7-1068NG7 CPU @ 2.30GHz Shell: 5.8 - /bin/zsh Binaries: Node: 16.2.0 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 7.15.1 - /usr/local/bin/npm Languages: Python: 2.7.16 - /usr/bin/python Browsers: Firefox: 88.0.1 Safari: 14.1.1 npmPackages: gatsby: ^3.6.1 => 3.6.1 gatsby-awesome-pagination: ^0.3.8 => 0.3.8 gatsby-plugin-disqus: ^1.2.2 => 1.2.2 gatsby-plugin-feed: ^3.5.0 => 3.5.0 gatsby-plugin-gatsby-cloud: ^2.5.0 => 2.5.0 gatsby-plugin-google-analytics: ^3.5.0 => 3.5.0 gatsby-plugin-image: ^1.6.0 => 1.6.0 gatsby-plugin-manifest: ^3.5.0 => 3.5.0 gatsby-plugin-offline: ^4.5.1 => 4.5.1 gatsby-plugin-postcss: ^4.5.0 => 4.5.0 gatsby-plugin-react-helmet: ^4.5.0 => 4.5.0 gatsby-plugin-sharp: ^3.6.0 => 3.6.0 gatsby-remark-copy-linked-files: ^4.2.1 => 4.2.1 gatsby-remark-images: ^5.2.1 => 5.2.1 gatsby-remark-prismjs: ^5.2.1 => 5.2.1 gatsby-remark-responsive-iframe: ^4.2.1 => 4.2.1 gatsby-remark-smartypants: ^4.2.0 => 4.2.0 gatsby-source-filesystem: ^3.6.0 => 3.6.0 gatsby-transformer-remark: ^4.2.0 => 4.2.0 gatsby-transformer-sharp: ^3.6.0 => 3.6.0 npmGlobalPackages: gatsby-cli: 2.12.111

[Isaac-Tait]

Not stale - the issues is still persisting

[adam993]

Still having this issue, on Gatsby ^4.0.0