Plugin using loadPageDataSync breaks dev environment in projects using it

[openscript]

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

I've migrated a plugin I develop gatsby-plugin-i18n-l10n from React Helmet to the new Gatsby Head API.

Unfortunately there seems to be a problem with the dev environment (gatsby develop) and loadPageDataSync. When I start the project using the plugin mentioned before, which utilizes loadPageDataSync, with a clean cache the following error appears:

$ gatsby develop
success compile gatsby files - 0.664s
success load gatsby config - 0.032s
success load plugins - 0.346s
warn gatsby-plugin-react-helmet: Gatsby now has built-in support for modifying the document head. Learn more at https://gatsby.dev/gatsby-head
success onPreInit - 0.005s
success initialize cache - 0.038s
success copy gatsby files - 0.060s
success Compiling Gatsby Functions - 0.137s
success onPreBootstrap - 0.153s
success createSchemaCustomization - 0.005s
success Checking for changed pages - 0.001s
success source and transform nodes - 0.121s
warn Plugin `gatsby-plugin-i18n-l10n` has customized the built-in Gatsby GraphQL type `SitePage`. This is allowed, but could potentially cause conflicts.
success building schema - 0.210s
success createPages - 0.054s
success createPagesStatefully - 0.095s
info Total nodes: 77, SitePage nodes: 16 (use --verbose for breakdown)
success Checking for changed pages - 0.009s
success write out redirect data - 0.002s
success Build manifest and related icons - 0.582s
success onPostBootstrap - 0.587s
info bootstrap finished - 3.590s
success onPreExtractQueries - 0.001s
success extract queries from components - 1.131s
success write out requires - 0.004s
success run static queries - 0.008s - 1/1 119.86/s
success run page queries - 0.009s - 2/2 226.55/s

 ERROR 

Couldn't get query results for "/" in 15.000s.



  Error: Couldn't get query results for "/" in 15.000s.
  
  - get-page-data.ts:100 
    [gatsby-starter-dogmatism]/[gatsby]/src/utils/get-page-data.ts:100:13
  
  - build-html.ts:437 doBuildPages
    [gatsby-starter-dogmatism]/[gatsby]/src/commands/build-html.ts:437:24
  
  - start-server.ts:107 createIndexHtml
    [gatsby-starter-dogmatism]/[gatsby]/src/utils/start-server.ts:107:7
  
  - start-server.ts:142 startServer
    [gatsby-starter-dogmatism]/[gatsby]/src/utils/start-server.ts:142:5
  
  - start-webpack-server.ts:38 startWebpackServer
    [gatsby-starter-dogmatism]/[gatsby]/src/services/start-webpack-server.ts:38:5
  

not finished Building development bundle - 17.022s

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

The project can be successfully built with gatsby build and with this a cache. When I run gatsby develop after gatsby build the following error happens:

$ gatsby develop
success compile gatsby files - 0.569s
success load gatsby config - 0.039s
success load plugins - 0.339s
warn gatsby-plugin-react-helmet: Gatsby now has built-in support for modifying the document head. Learn more at https://gatsby.dev/gatsby-head
success onPreInit - 0.004s
success initialize cache - 0.018s
success copy gatsby files - 0.066s
success Compiling Gatsby Functions - 0.137s
success onPreBootstrap - 0.152s
success createSchemaCustomization - 0.006s
success Checking for changed pages - 0.001s
success source and transform nodes - 0.100s
warn Plugin `gatsby-plugin-i18n-l10n` has customized the built-in Gatsby GraphQL type `SitePage`. This is allowed, but could potentially cause conflicts.
success building schema - 0.253s
success createPages - 0.060s
warn Non-deterministic routing danger: Attempting to create page: "/404/", but page "/404" already exists
This could lead to non-deterministic routing behavior
success createPagesStatefully - 0.136s
info Total nodes: 77, SitePage nodes: 16 (use --verbose for breakdown)
success Checking for changed pages - 0.003s
success write out redirect data - 0.002s
success Build manifest and related icons - 0.596s
success onPostBootstrap - 0.601s
info bootstrap finished - 3.565s
success onPreExtractQueries - 0.001s
success extract queries from components - 1.093s
success write out requires - 0.007s
success run static queries - 0.008s - 1/1 123.26/s
success run page queries - 0.008s - 2/2 257.78/s

 ERROR 

Page data from page-data.json for the failed page "/": {
  "componentChunkName": "component---src-pages-index-tsx",
  "path": "/",
  "result": {
    "data": {
      "slogans": {
        "id": "f2e1f5f5-a3bd-55ac-8247-36448c83b78f"
      }
    },
    "pageContext": {
      "locale": "en-US",
      "translations": [
        {
          "locale": "de-CH",
          "path": "/de"
        },
        {
          "locale": "zh-CN",
          "path": "/zh"
        }
      ],
      "prefix": "en"
    }
  },
  "staticQueryHashes": [
    "953814312"
  ]
}


 ERROR 

There was an error compiling the html.js component for the development server.
See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html TypeError: loadPageDataSync is not a function (from plugin: gatsby-plugin-i18n-l10n)


   5 | const onRenderBody = ({ loadPageDataSync, pathname, setHtmlAttributes, setHeadComponents }, options) => {
   6 |     var _a;
>  7 |     const { result: { pageContext }, } = loadPageDataSync(pathname);
     |                                          ^
   8 |     const locale = (_a = pageContext.locale) !== null && _a !== void 0 ? _a : options.defaultLocale;
   9 |     const siteUrl = new URL(options.siteUrl);
  10 |     const translations = pageContext.translations || [];


  WebpackError: TypeError: loadPageDataSync is not a function (from plugin: gatsby-plugin-i18n-l10n)
  
  - onRenderBody.js:7 
    [gatsby-starter-dogmatism]/[gatsby-plugin-i18n-l10n]/src/onRenderBody.js:7:42
  
  - api-runner-ssr.js:64 
    gatsby-starter-dogmatism/.cache/api-runner-ssr.js:64:22
  
  - api-runner-ssr.js:57 
    gatsby-starter-dogmatism/.cache/api-runner-ssr.js:57:11
  
  - develop-static-entry.js:85 
    gatsby-starter-dogmatism/.cache/develop-static-entry.js:85:12
  
  - dev-404-page.js:100 
    gatsby-starter-dogmatism/.cache/dev-404-page.js:100:33
  
  - index.js:3 
    [gatsby-starter-dogmatism]/[gatsby-plugin-i18n-l10n]/index.js:3:57
  
  - LanguageSwitcher.js:8 
    [gatsby-starter-dogmatism]/[gatsby-plugin-i18n-l10n]/src/components/LanguageSwitcher.js:8:25
  
  - LocalizedLink.js:9 
    [gatsby-starter-dogmatism]/[gatsby-plugin-i18n-l10n]/src/components/LocalizedLink.js:9:24
  
  - LanguageSwitcher.js:9 
    [gatsby-starter-dogmatism]/[gatsby-plugin-i18n-l10n]/src/components/LanguageSwitcher.js:9:375
  
  - index.js:12 
    [gatsby-starter-dogmatism]/[gatsby-plugin-i18n-l10n]/index.js:12:79
  
  - index.js:86 
    [gatsby-starter-dogmatism]/[decode-uri-component]/index.js:86:1
  
  - index.js:75 
    [gatsby-starter-dogmatism]/[decode-uri-component]/index.js:75:1
  
  - index.js:91 
    [gatsby-starter-dogmatism]/[decode-uri-component]/index.js:91:1
  
  - index.js:4 
    [gatsby-starter-dogmatism]/[decode-uri-component]/index.js:4:1
  
  - index.js:136 
    [gatsby-starter-dogmatism]/[query-string]/index.js:136:1
  

not finished Building development bundle - 0.820s

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Reproduction Link

https://github.com/openscript-ch/gatsby-starter-dogmatism (uses a fixed version of the gatsby-plugin-i18n-l10n)

User this for reproduction:
https://github.com/openscript-ch/gatsby-starter-dogmatism/tree/demo/loadPageDataSync-problem

Steps to Reproduce

1. Clone project
2. Install dependencies
3. Run yarn start

Expected Result

The project is successfully built in the development environment, like it is for production.

Actual Result

The development environment is unusable.

Environment

System:
    OS: Linux 5.19 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 18.0.0 - /tmp/yarn--1663916468167-0.9887952677786742/node
    Yarn: 1.22.18 - /tmp/yarn--1663916468167-0.9887952677786742/yarn
    npm: 8.6.0 - /usr/local/bin/npm
  Languages:
    Python: 3.9.2 - /usr/bin/python
  npmPackages:
    gatsby: 4.23.1 => 4.23.1
    gatsby-plugin-catch-links: 4.23.0 => 4.23.0
    gatsby-plugin-emotion: 7.23.0 => 7.23.0
    gatsby-plugin-i18n-l10n: 4.19.0 => 4.19.0
    gatsby-plugin-image: 2.23.1 => 2.23.1
    gatsby-plugin-manifest: 4.23.1 => 4.23.1
    gatsby-plugin-mdx: 4.2.1 => 4.2.1
    gatsby-plugin-offline: 5.23.1 => 5.23.1
    gatsby-plugin-react-helmet: 5.23.0 => 5.23.0
    gatsby-plugin-sharp: 4.23.1 => 4.23.1
    gatsby-remark-autolink-headers: 5.23.1 => 5.23.1
    gatsby-remark-copy-linked-files: 5.23.0 => 5.23.0
    gatsby-remark-images: 6.23.1 => 6.23.1
    gatsby-source-filesystem: 4.23.0 => 4.23.0
    gatsby-transformer-sharp: 4.23.1 => 4.23.1

Config Flags

No response

[openscript]

I'm happy to contribute a PR for this. Can someone give me a head start and tell me how to tackle this?

[openscript]

It seems like loadPageDataSync is not implemented for the development environment:

gatsby/packages/gatsby/cache-dir/develop-static-entry.js

Lines 85 to 93 in c073bbe

	apiRunner(`onRenderBody`, {
	setHeadComponents,
	setHtmlAttributes,
	setBodyAttributes,
	setPreBodyComponents,
	setPostBodyComponents,
	setBodyProps,
	pathname: pagePath,
	})

[openscript]

I'm happy to contribute a PR for this. Can someone give me a head start and tell me how to tackle this?

I'm still happy to contribute a PR for this.

[marvinjude]

Hi @openscript,

We have implemented a new feature in Gatsby 5.5 that allows setting html and body attributes, as seen in #37449. This eliminates the need for a previous workaround using loadPageDataSync.