Gatsby SSR - wrapPageElement - WebpackError: The result of this StaticQuery could not be fetched when using react-dom/server.

[that1matt]

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 react-dom/server in gatsby-ssr.js within wrapPageElement, it causes the build to break with an error. Only happens when using react-dom/server.

Reproduction Link

https://github.com/that1matt/ssr-wrap-page-element-error

Steps to Reproduce

1. Add wrapPageElement to gatsby-ssr.js
2. Import renderToString from react-dom/server
3. Call the element from wrapPageElement in renderToString
4. Run gatsby build
5. See error.
   ...

Expected Result

To not error, and allow for converting react component to string result.

Actual Result

yarn build                                                                                                                                    10:36:18
yarn run v1.22.10
$ gatsby build
success open and validate gatsby-configs, load plugins - 0.731s
success onPreInit - 0.042s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's no stale data.
success initialize cache - 0.093s
success copy gatsby files - 0.103s
success Compiling Gatsby Functions - 0.216s
success onPreBootstrap - 0.231s
success createSchemaCustomization - 0.007s
success Checking for changed pages - 0.002s
success source and transform nodes - 0.091s
success building schema - 0.579s
success createPages - 0.005s
success createPagesStatefully - 0.101s
info Total nodes: 43, SitePage nodes: 5 (use --verbose for breakdown)
success Checking for changed pages - 0.003s
success Cleaning up stale page-data - 0.002s
success update schema - 0.109s
success onPreExtractQueries - 0.001s
success extract queries from components - 2.217s
success write out redirect data - 0.002s
success Build manifest and related icons - 0.088s
success onPostBootstrap - 0.095s
info bootstrap finished - 7.242s
success run static queries - 0.015s - 2/2 129.80/s
success run page queries - 0.013s - 5/5 373.52/s
success write out requires - 0.007s
success Building production JavaScript and CSS bundles - 6.216s
success Writing page-data.json files to public directory - 0.015s - 5/5 333.98/s
success Building HTML renderer - 0.889s

 ERROR

Page data from page-data.json for the failed page "/404/": {
  "componentChunkName": "component---src-pages-404-js",
  "path": "/404/",
  "result": {
    "pageContext": {}
  },
  "staticQueryHashes": [
    "3649515864",
    "63159454"
  ]
}

failed Building static HTML for pages - 0.211s

 ERROR #95313

Building static HTML failed for path "/404/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  75 |     return context[query].data
  76 |   } else {
> 77 |     throw new Error(
     |           ^
  78 |       `The result of this StaticQuery could not be fetched.\n\n` +
  79 |         `This is likely a bug in Gatsby and if refreshing the page does not fix it, ` +
  80 |         `please open an issue in https://github.com/gatsbyjs/gatsby/issues`


  WebpackError: The result of this StaticQuery could not be fetched.

  - gatsby-browser-entry.js:77
    gatsby-starter-default/.cache/gatsby-browser-entry.js:77:11

  - layout.js:16
    gatsby-starter-default/src/components/layout.js:16:30

  - assertThisInitialized.js:2
    [gatsby-starter-default]/[@babel]/runtime/helpers/assertThisInitialized.js:2:1

  - extends.js:2
    [gatsby-starter-default]/[@babel]/runtime/helpers/extends.js:2:1

  - gatsby-ssr.js:11
    gatsby-starter-default/gatsby-ssr.js:11:41

  - api-runner-ssr.js:56
    gatsby-starter-default/.cache/api-runner-ssr.js:56:22

  - api-runner-ssr.js:49
    gatsby-starter-default/.cache/api-runner-ssr.js:49:11

  - static-entry.js:215
    gatsby-starter-default/.cache/static-entry.js:215:29

  - assertThisInitialized.js:4
    [gatsby-starter-default]/[@babel]/runtime/helpers/assertThisInitialized.js:4:1


not finished Caching JavaScript and CSS webpack compilation - 1.302s
not finished Caching HTML renderer compilation - 0.274s

error Command failed with exit code 1.

Environment

System:
    OS: macOS 11.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.22.1 - ~/.asdf/installs/nodejs/12.22.1/bin/node
    Yarn: 1.22.10 - ~/.asdf/installs/nodejs/12.22.1/.npm/bin/yarn
    npm: 7.16.0 - ~/.asdf/installs/nodejs/12.22.1/.npm/bin/npm
  Languages:
    Python: 3.9.6 - /usr/local/opt/python/libexec/bin/python
  Browsers:
    Chrome: 91.0.4472.164
    Firefox: 89.0.1
    Safari: 14.1.1
  npmPackages:
    gatsby: ^3.10.1 => 3.10.1
    gatsby-plugin-gatsby-cloud: ^2.10.0 => 2.10.0
    gatsby-plugin-image: ^1.10.1 => 1.10.1
    gatsby-plugin-manifest: ^3.10.0 => 3.10.0
    gatsby-plugin-offline: ^4.10.0 => 4.10.0
    gatsby-plugin-react-helmet: ^4.10.0 => 4.10.0
    gatsby-plugin-sharp: ^3.10.2 => 3.10.2
    gatsby-source-filesystem: ^3.10.0 => 3.10.0
    gatsby-transformer-sharp: ^3.10.0 => 3.10.0

Config Flags

No

[LekoArts]

Hi!

Is there a reason why you're trying to do this? It breaks e.g. the extraction of the Static Query you're using

[that1matt]

Hi LekoArts,

We have been utilizing this solution (before v3) to be able to view the page data, to validate any links that are created by our content/i18n translators do not result in a 404 link being added to the page. We will get the string component, and check against the list of pages gatsby creates, and returns any that do not match. We are not trying to manipulate the result, just validate if there are any invalid urls getting added to any page.

This is useful as we have roughly 10,000 pages, in 9 different languages.

If you know of an alternate way of accomplishing this, that would be helpful as well. Based on my reading, I am not sure of another way to compare the links from gatsby.

[that1matt]

@LekoArts any thoughts on this, or a better more appropriate way of solving our needs?