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

There is a bug somewhere in the complex chain when processing markdown that contains images with gatsby-transformer-remark and friends. This happens when adding and setting up rehype-react following the official Gatsby guide on using custom components.

The generated AST from gatsby-transformer-remark and other plugins is generated with srcSet props that are arrays of strings. When this AST is passed into rehype-react, the array is not properly turned into a valid srcset string - it is missing commas. This results in the srcset not being processed by my browser (Chrome) and the fallback image src being loaded instead. I do not know if the bug is in a downstream library (rehype-react, hyperscript, or something else) or if the srcSet array being generated by Gatsby is actually correct.

The reproduction link below is simply the gatsby-starter-blog with a very tiny commit added on top to enable rehype-react, following the official guide.

Reproduction Link

https://github.com/Ameobea/gatsby-srcset-bug-repro

Steps to Reproduce

1. npx gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blog
2. Apply commit from the repo repository (Ameobea/gatsby-srcset-bug-repro@834e2d9)
3. yarn build or yarn start at http://localhost:8000/hello-world/ and view generated HTML on the "Hello World" blog post. Note the lack of commas in the srcset for the image and errors in the console:

Expected Result

Expect that the srcset attribute is valid with commas between the items rather than just spaces. Should look like this:

<img class="gatsby-resp-image-image" alt="Chinese Salty Egg" title="" src="/static/8058f3f26913fea3b6a89a73344fe94a/828fb/salty_egg.jpg" srcset="/static/8058f3f26913fea3b6a89a73344fe94a/ff44c/salty_egg.jpg 158w, /static/8058f3f26913fea3b6a89a73344fe94a/a6688/salty_egg.jpg 315w, /static/8058f3f26913fea3b6a89a73344fe94a/828fb/salty_egg.jpg 630w, /static/8058f3f26913fea3b6a89a73344fe94a/0ede0/salty_egg.jpg 945w, /static/8058f3f26913fea3b6a89a73344fe94a/3ac88/salty_egg.jpg 1260w, /static/8058f3f26913fea3b6a89a73344fe94a/e1596/salty_egg.jpg 2048w" sizes="(max-width: 630px) 100vw, 630px" loading="lazy" decoding="async" style="width: 100%; height: 100%; margin: 0px; vertical-align: middle; position: absolute; top: 0px; left: 0px; opacity: 1; transition: opacity 0.5s ease 0s; color: inherit; box-shadow: white 0px 0px 0px 400px inset;">

Actual Result

<img class="gatsby-resp-image-image" alt="Chinese Salty Egg" title="" src="/static/8058f3f26913fea3b6a89a73344fe94a/828fb/salty_egg.jpg" srcset="/static/8058f3f26913fea3b6a89a73344fe94a/ff44c/salty_egg.jpg 158w /static/8058f3f26913fea3b6a89a73344fe94a/a6688/salty_egg.jpg 315w /static/8058f3f26913fea3b6a89a73344fe94a/828fb/salty_egg.jpg 630w /static/8058f3f26913fea3b6a89a73344fe94a/0ede0/salty_egg.jpg 945w /static/8058f3f26913fea3b6a89a73344fe94a/3ac88/salty_egg.jpg 1260w /static/8058f3f26913fea3b6a89a73344fe94a/e1596/salty_egg.jpg 2048w" sizes="(max-width: 630px) 100vw, 630px" loading="lazy" decoding="async" style="width: 100%; height: 100%; margin: 0px; vertical-align: middle; position: absolute; top: 0px; left: 0px; opacity: 1; transition: opacity 0.5s ease 0s; color: inherit; box-shadow: white 0px 0px 0px 400px inset;">

Environment

All default from `gatsby-starter-blog` but with `rehype-react` added:

  System:
    OS: macOS 12.1
    CPU: (10) arm64 Apple M1 Max
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.0/bin/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
  Languages:
    Python: 2.7.18 - /usr/bin/python
  Browsers:
    Chrome: 96.0.4664.110
    Safari: 15.2
  npmPackages:
    gatsby: ^4.4.0 => 4.4.0
    gatsby-plugin-feed: ^4.4.0 => 4.4.0
    gatsby-plugin-gatsby-cloud: ^4.4.0 => 4.4.0
    gatsby-plugin-google-analytics: ^4.4.0 => 4.4.0
    gatsby-plugin-image: ^2.4.0 => 2.4.0
    gatsby-plugin-manifest: ^4.4.0 => 4.4.0
    gatsby-plugin-offline: ^5.4.0 => 5.4.0
    gatsby-plugin-react-helmet: ^5.4.0 => 5.4.0
    gatsby-plugin-sharp: ^4.4.0 => 4.4.0
    gatsby-remark-copy-linked-files: ^5.4.0 => 5.4.0
    gatsby-remark-images: ^6.4.0 => 6.4.0
    gatsby-remark-prismjs: ^6.4.0 => 6.4.0
    gatsby-remark-responsive-iframe: ^5.4.0 => 5.4.0
    gatsby-remark-smartypants: ^5.4.0 => 5.4.0
    gatsby-source-filesystem: ^4.4.0 => 4.4.0
    gatsby-transformer-remark: ^5.4.0 => 5.4.0
    gatsby-transformer-sharp: ^4.4.0 => 4.4.0

Config Flags

No response