StaticImage fails extraction when imports don't match file name casing exactly

[K20shores]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

The StaticImage src attribute can only handle up to two directory redirections. For example ../../images/icon.png will show an image, but ../../../images/icon.png will not show an image and gatsby will report that the image cannot be found.

Reproduction Link

https://github.com/K20shores/gatsby-mwe

Steps to Reproduce

Create a new site npm init gatsby. I named this one mwe.

Then install the image plugins npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem gatsby-transformer-sharp.

Change gatsby-config.js to look like this.

/**
 * @type {import('gatsby').GatsbyConfig}
 */
module.exports = {
  siteMetadata: {
    title: `mwe`,
    siteUrl: `https://www.yourdomain.tld`,
  },
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`
  ],
}

Inside of src, Create this directory structure.

.
├── components
│   ├── Layout
│   │   ├── Header
│   │   │   ├── header.js
│   │   │   └── index.js
│   │   ├── index.js
│   │   └── layout.js
│   └── index.js
├── images
│   └── icon.png
└── pages
    ├── 404.js
    └── index.js

components/index.js

export { default as Layout } from './Layout';

components/Layout/index.js

export { default } from "./layout"
export { default as Header } from "./header"

components/Layout/layout.js

import React from 'react';
import { StaticImage } from "gatsby-plugin-image"

import { Header } from "."

const Layout = () => {
  return (
    <>
    <Header/>
    <StaticImage src="../../images/icon.png"></StaticImage>
    </>
  )
}

export default Layout;

components/Layout/Header/index.js

export { default } from "./header"

componenets/Layout/Header/header.js

import React from 'react';
import { StaticImage } from "gatsby-plugin-image"

const Header = () => {
  return (
    <>
    <h1>hi</h1>
    <StaticImage src="../../../images/icon.png"></StaticImage>
    </>
  )
}

export default Header;

change pages/index.js to look like this

import * as React from "react"

import { Layout } from "../components"

const IndexPage = () => {
  return (
    <main>
      <Layout></Layout>
    </main>
  )
}

export default IndexPage

export const Head = () => <title>Home Page</title>

Expected Result

Two images will be displayed.

Actual Result

You will only see one image displayed. That image will be the one from src/componenets/Layout. The one from src/componenets/Layout/Header cannot be found.

This is the output from the gatsby log.

warn [gatsby-plugin-image] Could not read image data file "/Users/kyle/Downloads/mwe/.cache/caches/gatsby-plugin-image/1281827495.json".
This may mean that the images in "/Users/kyle/Downloads/mwe/src/components/Layout/header/header.js" were not processed.
Please ensure that your gatsby version is at least 2.24.78.
warn [gatsby-plugin-image] No data found for image "../../../images/icon.png"

Environment

System:
    OS: macOS 12.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.4.0 - /usr/local/bin/node
    npm: 9.4.0 - /usr/local/bin/npm
  Languages:
    Python: 3.9.7 - /usr/local/Caskroom/miniconda/base/bin/python
  Browsers:
    Chrome: 109.0.5414.119
    Firefox: 102.0.1
    Safari: 16.0
  npmGlobalPackages:
    gatsby-cli: 5.5.0

Config Flags

No response

[K20shores]

Changing the header component to look like this:

import React from 'react';
import { StaticImage } from "gatsby-plugin-image"

import icon from "../../../images/icon.png"

const Header = () => {
  return (
    <>
    <h1>hi</h1>
    <p>Using static image</p>
    <StaticImage src="../../../images/icon.png"></StaticImage>
    <p>Using `img`</p>
    <img src={icon} alt="#" />
    <p>End of header</p>
    <hr/>
    </>
  )
}

export default Header;

Shows that the image can be shown with the img tag. Somehow, static image does not like a valid path.

[K20shores]

Note that with the above change, which was pushed to the repository to recreate this problem, there should now be 3 images displayed when in reality only two are displayed

[pieh]

@K20shores

When I tried running provided reproduction I did get an error related to file casing - I'm on linux so it's case sensitive filesystem - I did have to change https://github.com/K20shores/gatsby-mwe/blob/df7f50ac03361280efd95ad1479e53385157d829/src/components/Layout/index.js#L2 to import from "./Header" and not "./header" - doing that fixed my build and I did see all expected images:

Can you try making similar change and let me know if that fixes it for you? If it does, then I think we should rename to issue description from "two directories up" to file name mismatches (just to narrow things down more to what exactly the issue is)

[pieh]

I tried on Windows machine with case insenstive filesystem and could reproduce the problem. Making the change I mentioned in previous comment does solve the problem, so it in fact seems related to file name / path casing

[pieh]

I digged a little and here are initial findings:

I think this was regression that was introduced in #37087. There was already one regression fixed for that in #37262 but that one only cared about slashes.

Current behaviour I see:

gatsby/packages/gatsby-plugin-image/src/babel-plugin-parse-static-images.ts

Line 54 in 0189625

props.filename = slash(state.filename)

this calculates to C:/Users/misiek/test/i37622/src/components/Layout/header/header.js on my Windows machine

gatsby/packages/gatsby-plugin-image/src/node-apis/parser.ts

Line 101 in 0189625

image.filename = slash(filename)

this however results in C:/Users/misiek/test/i37622/src/components/Layout/Header/header.js

So there is casing difference in both which cause things not to resolve properly and results in warn [gatsby-plugin-image] Could not read image data file errors because the calculated hash is not the same in both places.

I will try to dig more and figure out how and where to fix that

[K20shores]

@pieh Thanks for looking into this. It seems you have already verified the issue, but I will try to verify the same thing as well and report back. I'm not familiar with the internals of gatsby, but, if I can figure out what needs to be changed based on your comments above, I'll submit a PR.

[LekoArts]

We looked a bit more into this and decided that it's not something we can fix. The error here was that on a case insensitive filesystem your typo/error works, but not on a case sensitive one. We e.g. can't just lowercase the whole path as then otherwise a Header and header folder would be the same.

So you'll need to correct your typo and moving forward make sure that you use the correct file casing. I'd highly recommend using lowercase/kebab-case, then you won't run into that problem.