Plugin using loadPageDataSync breaks dev environment in projects using it #36675

openscript · 2022-09-23T07:02:02Z

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

Clone project
Install dependencies
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

The text was updated successfully, but these errors were encountered:

openscript · 2022-09-30T05:54:42Z

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

openscript · 2022-10-02T10:30:43Z

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, 
        
           })

gatsbyjs/gatsby#36675

openscript · 2022-11-12T07:44:04Z

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 · 2023-01-25T08:03:27Z

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.

openscript added the type: bug label Sep 23, 2022

gatsbot bot added the status: triage needed label Sep 23, 2022

imjoshin added status: confirmed and removed status: triage needed labels Sep 23, 2022

openscript mentioned this issue Oct 1, 2022

Error loading a result for the page query in "/" in development after successful built #27644

Closed

openscript added a commit to openscript-ch/gatsby-plugin-i18n-l10n that referenced this issue Oct 2, 2022

fix: plugin breaks gatsby development

b5afcdf

gatsbyjs/gatsby#36675

marvinjude closed this as completed Jan 25, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Plugin using loadPageDataSync breaks dev environment in projects using it #36675

Plugin using loadPageDataSync breaks dev environment in projects using it #36675

openscript commented Sep 23, 2022 •

edited

Loading

openscript commented Sep 30, 2022

openscript commented Oct 2, 2022

openscript commented Nov 12, 2022

marvinjude commented Jan 25, 2023

Plugin using loadPageDataSync breaks dev environment in projects using it #36675

Plugin using loadPageDataSync breaks dev environment in projects using it #36675

Comments

openscript commented Sep 23, 2022 • edited Loading

Preliminary Checks

Description

Reproduction Link

Steps to Reproduce

Expected Result

Actual Result

Environment

Config Flags

openscript commented Sep 30, 2022

openscript commented Oct 2, 2022

openscript commented Nov 12, 2022

marvinjude commented Jan 25, 2023

openscript commented Sep 23, 2022 •

edited

Loading