TypeError: Cannot read properties of null (reading 'dir') when using GatsbyImage

[BlueTooth4269]

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

I had this issue upon following the Gatsby tutorial (all 7 parts), then trying to experiment with DSG by deferring the dynamically generated blog pages.

Basically, when I have a GatsbyImage in my dynamically generated page (using the Filesystem Route API) and I add the following at the bottom (above my export default etc):

export async function config() {
    return ({ params }) => {
        return {
            defer: true,
        }
    }
}

It will work fine in gatsby develop, it will successfully build using gatsby build and correctly mark the dynamically generated pages as 'D', but upon serving, as soon as I try to access one of the dynamically generated pages, the browser shows 'Internal Server error.' and in the console (where I am running the server), it throws the following error:

 ERROR 

Generating page-data for "blog/yet-another-post" / "blog/yet-another-post" failed. Cannot read properties of null (reading 'dir')

   1 | query ...($id: String) {
   2 |   mdx(id: {eq: $id}) {
   3 |     frontmatter {
   4 |       title
   5 |       date(formatString: "MMMM DD, YYYY")
   6 |       hero_image_alt
   7 |       hero_image_credit_link
   8 |       hero_image_credit_text
>  9 |       hero_image {
     |       ^
  10 |         childImageSharp {
  11 |           gatsbyImageData
  12 |         }
  13 |       }
  14 |     }
  15 |     body
  16 |   }
  17 | }
  18 |



  TypeError: Cannot read properties of null (reading 'dir')
  
  - index.js:136385 queryNodeByPath
    /Users/.../tutorial-example/.cache/query-engine/index.js:136385:84
  
  - index.js:136396 fileByPathResolver
    /Users/.../tutorial-example/.cache/query-engine/index.js:136396:14
  
  - task_queues:96 processTicksAndRejections
    node:internal/process/task_queues:96:5

I've tried downgrading, it still happened.

The only thing that STOPS this error from occuring is to completely remove the GatsbyImage from the component, from the frontmatter in the .mdx file and from the GraphQL query.

Reproduction Link

https://github.com/gatsbyjs/tutorial-example

Steps to Reproduce

1. Clone the tutorial example from the Git repo: git clone https://github.com/gatsbyjs/tutorial-example.git
2. Upgrade the npm packages to add DSG:
   • npm uninstall gatsby gatsby-plugin-image gatsby-plugin-mdx gatsby-plugin-sharp gatsby-source-filesystem gatsby-transformer-sharp
   • npm install gatsby gatsby-plugin-image gatsby-plugin-mdx gatsby-plugin-sharp gatsby-source-filesystem gatsby-transformer-sharp`
3. Build the project with gatsby build
4. Run the server with gatsby serve
5. Try to access one of the dynamically generated blog pages

Expected Result

The page should be statically generated on attempted access and display correctly with the GatsbyImage.

Actual Result

The browser shows 'Internal Server Error' and the console throws the error:

 ERROR 

Generating page-data for "blog/yet-another-post" / "blog/yet-another-post" failed. Cannot read properties of null (reading 'dir')

   1 | query ...($id: String) {
   2 |   mdx(id: {eq: $id}) {
   3 |     frontmatter {
   4 |       title
   5 |       date(formatString: "MMMM DD, YYYY")
   6 |       hero_image_alt
   7 |       hero_image_credit_link
   8 |       hero_image_credit_text
>  9 |       hero_image {
     |       ^
  10 |         childImageSharp {
  11 |           gatsbyImageData
  12 |         }
  13 |       }
  14 |     }
  15 |     body
  16 |   }
  17 | }
  18 |



  TypeError: Cannot read properties of null (reading 'dir')
  
  - index.js:136385 queryNodeByPath
    /Users/.../tutorial-example/.cache/query-engine/index.js:136385:84
  
  - index.js:136396 fileByPathResolver
    /Users/.../tutorial-example/.cache/query-engine/index.js:136396:14
  
  - task_queues:96 processTicksAndRejections
    node:internal/process/task_queues:96:5

Environment

System:
    OS: macOS 12.1
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.4.0 - /usr/local/bin/node
    npm: 8.3.1 - /usr/local/bin/npm
  Languages:
    Python: 2.7.18 - /usr/bin/python
  Browsers:
    Firefox: 96.0.3
    Safari: 15.2
  npmPackages:
    gatsby: ^4.6.1 => 4.6.1
    gatsby-plugin-image: ^2.6.0 => 2.6.0
    gatsby-plugin-mdx: ^3.6.0 => 3.6.0
    gatsby-plugin-sharp: ^4.6.0 => 4.6.0
    gatsby-source-filesystem: ^4.6.0 => 4.6.0
    gatsby-transformer-sharp: ^4.6.0 => 4.6.0
  npmGlobalPackages:
    gatsby-cli: 4.6.0

Config Flags

No response

[LekoArts]

Hi, thanks for the report. This seems like a reproduction of things that people describe in #34605, appreciate it. We'll look into it!

[BlueTooth4269]

Just want to note that this only happened with Deferred Static Generation for me - everything was fine with SSG.

[LekoArts]

Thanks for that hint!

@denisgoryaynov @MiKatre @timurrustamov Are you also using DSG?

[LekoArts]

We were able to reproduce it locally and found the culprit + fix: #34699

[LekoArts]

Fixed in gatsby@4.6.2

[joelwmale]

Thanks @LekoArts! Can confirmed it's fixed 🎉