[gatsby-plugin-offline][React 18 RC] Hydration error on reload

[mwskwong]

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

Hydration errors are observed in the PROD build when using React 18 RC and gatsby-plugin-offline.

Reproduction Link

https://github.com/mwskwong/react-18-rc-2-repo

Steps to Reproduce

1. Create a Gatsby project with any template.
2. Install gatsby-plugin-offline
3. Upgrade
   1. Gatsby to next
   2. gatsby-plugin-offline to next
   3. React to rc
4. Build and serve the website.
5. Open the browser console and load the website once. Note that there will be NO errors at this moment.
6. Refresh the website once (not force refresh, i.e. F5 instead of Ctrl + F5). And observe the errors in the console.

PROD build of the reproduction: https://react-18-rc-2-repo.pages.dev/

Expected Result

Hydration works correctly with no errors prompted no matter how the webpage is refreshed.

Actual Result

Hydration failed and prompted errors in certain cases.

Environment

System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
  Binaries:
    Node: 17.7.2 - C:\Program Files\nodejs\node.EXE
    npm: 8.5.2 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.10.3
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (99.0.1150.46)
  npmPackages:
    gatsby: next => 4.11.0-next.3 
    gatsby-plugin-offline: next => 5.11.0-next.3

Config Flags

No response

[AbdallahAbis]

This actually happened on our site even though we don't use gatsby-plugin-offline

[madfcat]

I don't use gatsby-plugin-offline and still get this error after deploying in production.