framework-[contenthash].js includes react-dom-server when using gatsby-plugin-image

[danilobuerger]

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

When using GatsbyImage from gatsby-plugin-image, the framework-[contenthash].js is getting bloated by including react-dom/server:

This comes from a change at #35226 from @wardpeet by using renderToStaticMarkup from react-dom/server:

https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-image/src/components/lazy-hydrate.tsx#L202

Reproduction Link

https://github.com/danilobuerger/gatsby-repro

Steps to Reproduce

1. Get the reproduction
2. build & serve, notice the framework-[contenthash].js size (ca 46.2 kb)
3. Uncomment GatsbyImage in src/pages/index.tsx
4. build & serve, notice the framework-[contenthash].js size (ca 67.4 kb)

The size between step 2 and 4 will be different

Expected Result

framework-[contenthash].js should not include react-dom/server.

Actual Result

framework-[contenthash].js includes react-dom/server.

Environment

System:
    OS: macOS 12.6.2
    CPU: (8) arm64 Apple M1
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Safari: 16.2
  npmPackages:
    gatsby: ^5.3.2 => 5.3.2
    gatsby-plugin-image: ^3.3.2 => 3.3.2
    gatsby-plugin-sharp: ^5.3.2 => 5.3.2
    gatsby-source-filesystem: ^5.3.1 => 5.3.1
    gatsby-transformer-sharp: ^5.3.1 => 5.3.1

### Config Flags

_No response_

[LekoArts]

Thanks for the issue!

Analyzing it with Statoscope can give one some more details:

I'll play with our webpack configuration. It shouldn't be in the framework bundle, it should be it's own.

[BojanHribernik]

I can confirm this. Found out about it through Lighthouse report

[danilobuerger]

Thanks @LekoArts !

[danilobuerger]

@LekoArts this seems to not be working on the newest 5.6 release. I am seeing the app-[contenthash].js exploding in size. And the framework-[contenthash].js is not being created.

[LekoArts]

Please provide a reproduction, I haven't seen this in my local testing when authoring the PR

[danilobuerger]

@LekoArts I narrowed down the issue. It seems to only come up when using pnpm (with the gatsby-plugin-pnpm). Most likely related to the code here:
https://github.com/Js-Brecht/gatsby-plugin-pnpm/blob/master/src/fixes.ts#L6-L10

[LekoArts]

The split chunking won't happen in gatsby develop anyways

[danilobuerger]

@LekoArts I am seeing this with gatsby build.

[LekoArts]

I was referring to the plugin's comment:

Fix missing framework in development.

But yeah, I'm afraid if this is caused through this plugin you'll need to send in a PR fixing it

[danilobuerger]

@LekoArts Yeah, but it's really a shame that gatsby doesn't just support pnpm out of the box. There are lots of issues related to pnpm in this repository, it might be worth considering adding pnpm support here if people are using it?