Remote MDX Frontmatter Image urls not working on Gatsby Cloud - Gatsby 4

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

Hi team. I tried to upgrade my theme to Gatsby 4 by when deploying to Gatsby Cloud i’ve noticed the remote images that are sourced from MDX Frontmatter and converted into File nodes to be processed with childImageSharpe using createRemoteFileNode aren’t displaying

Reproduction Link

https://build-0b068efd-2e1c-4bfb-8211-96bfbf9c1c92.gtsb.io/posts/2021/remote-image-post/

The PR for this can be found here: https://github.com/PaulieScanlon/gatsby-theme-terminal/pull/52/files

The MDX page containing the Fontmatter field can be found here: https://github.com/PaulieScanlon/gatsby-theme-terminal/blob/feat/upgrade-to-gatsby-4/demo/src/posts/2021/remote-image-post.mdx

And all of the createSchemaCustomization code can be found here: https://github.com/PaulieScanlon/gatsby-theme-terminal/blob/feat/upgrade-to-gatsby-4/%40pauliescanlon/gatsby-theme-terminal/gatsby-node.js#L78

Steps to Reproduce

1. Add remote image url to MDX Frontmatter
2. Use createRemoteFileNode from inside onCreateNode to source the remote image and store it in a new frontmatter field

    if (node.frontmatter.featuredImageUrl) {
      node.featuredImageUrl = await createRemoteFileNode({
        url: node.frontmatter.featuredImageUrl,
        parentNodeId: node.id,
        createNode,
        createNodeId,
        cache,
        store,
      }).catch((error) => {
        console.error(error)
      })
    }

1. Re-Type the new frontmatter type as File

exports.createSchemaCustomization = async ({ actions }) => {
  const { createTypes } = actions

  createTypes(`
    type Mdx implements Node {
      frontmatter: Frontmatter
      featuredImageUrl: FeaturedImageUrl
    }

    type Frontmatter @dontInfer {
        featuredImage: File @fileByRelativePath
        featuredImageUrl: String
    }

    type FeaturedImageUrl  {
      url: File @link(by: "url")
    }
  `)

}

4 . Query it in Jsx

Expected Result

1. There should be a thumbnail on the post pate for “Remote Image Post” : https://build-0b068efd-2e1c-4bfb-8211-96bfbf9c1c92.gtsb.io/posts/
2. There should be a featured image in the “Remote Image Post”: https://build-0b068efd-2e1c-4bfb-8211-96bfbf9c1c92.gtsb.io/posts/2021/remote-image-post/

Actual Result

When deploying to Gatsby Cloud and Netlify neither of the remote images display

Environment

System:
    OS: macOS 11.5.2
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.17.3 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.24.2 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 95.0.4638.54
    Firefox: 93.0
    Safari: 15.0
  npmGlobalPackages:
    gatsby-cli: 2.15.1

Config Flags

No response

[LekoArts]

I’ll close this one as resolved as it’s not a bug we need to fix. We’re still looking into putting up a warning but the current tests show that checking everything increases build times more than we want. So might take a bit longer to ship that feature.

[tariknz]

Nice @PaulieScanlon, that was a stab in the dark there but happy it’s worked out! 😂