[gatsby-plugin-offline] ServiceWorker registration causes a quick blank page on website loading/refresh

[WhippetsAintDogs]

Description

In a project using the gatsby-offline-plugin, in production (gatsby build), when you access or refresh a page, you'll get a quick blank page instead of the styled HTML from the React's render. Disabling the ServiceWorker from Chrome's DevTools (bypass for network) fixes this.

Steps to reproduce

1. Install gatsby-offline-plugin with vanilla options in a project with a home page that has a colored background.
2. Build.
3. Serve your build and access the root url of the website.

Expected result

Not having any blank page rendering as it is when you disable the ServiceWorker.

Actual result

A blank page appears before the page starts rendering.

My thoughts on the problem

I think that the registration of the ServiceWorker is blocking the React's render and that delaying it after everything is loaded should fix this. Related: https://stackoverflow.com/questions/47637126/why-my-service-worker-block-the-render

Environment

System: OS: Linux 4.20 Arch Linux undefined CPU: (4) x64 Intel(R) Core(TM) i5-6200U CPU @ 2.30GHz Shell: 4.4.23 - /bin/bash Binaries: Node: 11.6.0 - /usr/bin/node Yarn: 1.10.1 - ~/.yarn/bin/yarn npm: 6.5.0 - /usr/bin/npm Languages: Python: 3.7.2 - /usr/bin/python Browsers: Firefox: 64.0 npmGlobalPackages: gatsby-cli: 2.4.8

[sidharthachatterjee]

Love the incremental editing on this one 😛

Jokes apart, hi @WhippetsAintDogs! Waiting on the rest of the details but based on the title, this looks like it could be potentially related to https://github.com/gatsbyjs/gatsby/issues/10998

Check out the README at the https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-offline#notes

cc @LekoArts

[WhippetsAintDogs]

Haha sorry for that, I missclicked on submit before even completing the title xD. And yes, #10998, it might be the same root cause of the problem but not the same symptom.

[ghost]

Sounds like #9346, too. I don't know if the PR of @pieh fixed the blank page issue.

@WhippetsAintDogs Are there some JS errors in console during blank page?

[WhippetsAintDogs]

@cardiv No, not at all. I think it's just the registration process of the SW that blocks the normal render. Delaying it could fix that, I suppose.

[ghost]

Thanks @WhippetsAintDogs! You may have the latest version which fixes the errors.

But the blank pages appeared very randomly on my end. I didn't check it again. If the Service Worker is blocking rendering, blank pages should appear consistently, shouldn't they?

[WhippetsAintDogs]

All right, I'll try the latest version, stay posted. On the other hand, on my end, the blank pages are appearing consistently. Currently I have gatsby 2.0.55 and gatsby-plugin-offline 2.0.17.

[WhippetsAintDogs]

@cardiv I've tried with gatsby 2.0.91 and gatsby-plugin-offline 2.0.21 and I still get consistent blank pages appearing in production when the ServiceWorker in on.

[DSchau]

@WhippetsAintDogs first thing to rule out is to make sure you're using the latest version of gatsby-plugin-offline if you're able (2.0.21).

We've actually seen this issue on gatsbyjs.com intermittently, and we haven't noticed it for quite a while running the latest version of the offline plugin.

[WhippetsAintDogs]

Hi @DSchau, like I said in my previous post, I still have the issue with gatsby 2.0.91 and gatsby-plugin-offline 2.0.21.

Edit: Something else must be different (than gatsbyjs.com). Does gatsbyjs.com runs a vanilla ServiceWorker configuration ?

[DSchau]

Whoops - I saw the 2.0.17 and didn't catch your edit/latest, sorry about that!

Do you have somewhere where we can reproduce? Could you share which page (in particular) and browser version(s) as well? Also the console logs will probably have an error, so a screenshot/paste of those would be super helpful too!

[WhippetsAintDogs]

Yes, this is the page I was talking about: Fika Productions. I use Chromium 71.0.3578.98 (Official Build) Arch Linux (64-bit). There's no errors at all in the console.

[ghost]

After a few tests, i can confirm that this still happens on gatsbyjs.org. Blank page and after a second, the page renders. But, I haven't noticed blank pages that require a reload to get rid of.

The site you linked behaves the same (blank page for a sec). But that doesn't occur every time on my end.

[hackhat]

I'm also getting this. I try to refresh, no matter how many times I see a blank screen. Many users reported they can't access the website because they get a white page. It's so annoying as it seems to affect many people. :(

All reports were on mobile. iOS and Android. Chrome and opera I think. Maybe more, but these for sure were affected at least once.

Sometimes deploying it again fixes the issue.

[lightstrike]

I've been hitting this issue too (or same symptom with a different cause) on a new Gatsby site deployment. I just removed the worker but would like to debug this and get offline support back. Here's an example console with errors and warnings:

[zidoshare]

I'm also getting this like this website.When loading for the first time, the content area will flash。 。

This problem no longer occurs when I remove the gatsby-plugin-offline plugin。like this 。

I guess the gatsby-plugin-offline plugin will re-render my page.

any help?thanks.

[zidoshare]

Oh,sorry,I forgot to show my codes.Although I think there shouldn't be too many problems in my code, I still show you the code that has problems online.

this my respository,only master.thanks.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[Pong420]

@gatsbybot not stale

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[dja]

This isn’t stale.

[ambethia]

I've removed the offline plugin, added the "remove-serviceworker" plugin, but it still happens occasionally on pages I haven't visited in a while.

/sigh

[gfsd3v]

Anyone have some news on this ? Having exatcly the same problem.

[fredmontet]

Same problem...

[kimbaudi]

I'm also facing a similar problem when testing my website on a mobile browser (Chrome 76.0.3809.89). After refreshing the web page, the screen would sometimes become blank for 2~3 seconds before the page reloads. Other times, the screen would remain blank and I would have to close and reopen the browser. Also, my page sometimes freezes after the screen is blank for 2-3 seconds and the page loads.

Here is a link to my site: https://clever-kepler-aac0d1.netlify.com (currently using gatsby 2.13.41 and gatsy-plugin-offline 2.2.4)

Update

I've managed to reproduce the issue and provide some screenshots and video. BTW, this issue happens intermittently/randomly and is difficult to reproduce.

Here is a screenshot of the network activity when I manually refresh the webpage. Notice that the request for page-data.json is pending.

Here is another screenshot of the network activity once the page finally loads. Notice how it took approximately 50 seconds for the white screen to go away and the page to refresh.

Here is a link to the video reproducing the blank white screen while waiting approximately 22 seconds for page-data.json to load. Please pay attention start at 00:19 seconds of the video. The video is about 49 seconds long.

https://imgur.com/a/d7OPKCx

[LeonardoCesca]

This issue is alive? I'm with this problem

[andyfangaf]

Same issue here. Except the blank page only happens on mobile (dev tools + actual iOS device)

[romainbessugesmeusy]

Same here

[darokrk]

Same here, still saw blank site when reload :(

did anyone solve this problem?

[hammund0]

This bug only came after I had done another release to production, after the update, white screen. Before, it was working.

No option but to remove the service worker plugin.

[hayatae]

Seeing this problem still exists with the latest version of Gatsby and plugin-offline, even using all official code with no tweaks.

Steps to reproduce:

1. Create a gatsby site with plugin-offline npm init gatsby Output:

   Thanks! Here's what we'll now do:
   
   🛠  Create a new Gatsby site in the folder gatsby-site
   🔌 Install gatsby-plugin-offline

2. Build and serve npm run build && npm run serve

3. Open the page in Chrome. Initial load is perfectly normal. Reload the page several times. You'll see a blank screen flash briefly before the page content is actually filled in. This only happens when the serviceWorker/gatsby-plugin-offline is installed/used.

[jdesherlia]

I am also seeing this in our project now (https://www.8x8.com). Using the latest. Here are the relevant details:

package.json:

{
  "name": "8x8-site-redesign-gatsby",
  /* ... */
  "dependencies": {
    "@artsy/fresnel": "^1.3.1",
    "@sendgrid/mail": "^7.4.0",
    "algoliasearch": "^4.8.3",
    "axios": "^0.19.2",
    "axios-jsonp": "^1.0.4",
    "axios-rate-limit": "^1.2.1",
    "axios-retry": "^3.1.8",
    "browser-monads": "^1.0.0",
    "calendar-link": "^2.0.10",
    "csv-parser": "^3.0.0",
    "dayjs": "^1.10.4",
    "deepmerge": "^4.2.2",
    "formik": "^2.2.3",
    "gatsby": "^2.25.2",
    "gatsby-cli": "^2.8.30",
    "gatsby-plugin-google-tagmanager": "^2.1.15",
    "gatsby-plugin-manifest": "^2.12.0",
    "gatsby-plugin-netlify": "^2.2.1",
    "gatsby-plugin-offline": "^3.10.0",
    "gatsby-plugin-react-helmet": "^3.1.22",
    "gatsby-plugin-remove-serviceworker": "^1.0.0",
    "gatsby-plugin-resolve-src": "^2.0.0",
    "gatsby-plugin-sitemap": "^2.2.0",
    "gatsby-plugin-webfonts": "^1.1.2",
    "gatsby-source-filesystem": "^2.3.24",
    "html-react-parser": "^0.14.3",
    "is_js": "^0.9.0",
    "performant-array-to-tree": "^1.7.1",
    "prop-types": "^15.7.2",
    "query-string": "^6.9.0",
    "rbx": "^2.2.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-dotdotdot": "^1.3.1",
    "react-helmet": "^5.2.1",
    "react-intersection-observer": "^8.26.1",
    "react-responsive-picture": "^3.2.2",
    "react-scrollspy": "^3.4.0",
    "react-slick": "^0.24.0",
    "react-spring": "^8.0.27",
    "react-stickynode": "^3.0.0",
    "recoil": "^0.1.2",
    "redraft": "^0.10.2",
    "rss": "^1.2.2",
    "slick-carousel": "^1.8.1",
    "swiper": "^6.4.1"
  },
  "devDependencies": {
    "@babel/cli": "^7.12.10",
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/polyfill": "^7.7.0",
    "@babel/preset-env": "^7.12.11",
    "@babel/register": "^7.12.10",
    "@types/cucumber": "^6.0.0",
    "@types/node": "^12.12.7",
    "@wdio/allure-reporter": "^5.16.0",
    "@wdio/cli": "^5.16.6",
    "@wdio/cucumber-framework": "^5.16.6",
    "@wdio/local-runner": "^5.16.6",
    "@wdio/reporter": "^5.15.2",
    "@wdio/selenium-standalone-service": "^5.16.5",
    "@wdio/sync": "^5.16.5",
    "allure-commandline": "^2.13.0",
    "chai": "^4.2.0",
    "cucumber": "^6.0.4",
    "del": "^6.0.0",
    "dotenv": "^8.1.0",
    "envkey": "^1.2.7",
    "gatsby-plugin-algolia-search": "^0.5.6",
    "gatsby-plugin-bundle-stats": "^2.5.0",
    "gatsby-plugin-preconnect": "^1.1.54",
    "gatsby-plugin-remove-trailing-slashes": "^2.3.3",
    "gatsby-plugin-sass": "^2.1.0",
    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.18",
    "gatsby-source-contentstack": "^2.2.9",
    "gulp": "^4.0.2",
    "gulp-replace": "^1.0.0",
    "node-sass": "^4.14.1",
    "node-sass-glob-importer": "^5.3.2",
    "prettier": "^2.2.1",
    "probe-image-size": "^6.0.0",
    "spark-md5": "^3.0.1",
    "wdio-timeline-reporter": "^5.1.1",
    "webdriverio": "^6.10.5",
    "webpack-cli": "^4.2.0"
  },
  /* ... */
  "scripts": {
    "build": "yarn run build:lambdas && yarn run build:gatsby",
    "build:gatsby": "gatsby build",
    "build:lambdas": "gulp build",
    "develop": "gatsby develop",
    "start": "yarn run build:lambdas && netlify dev",
    "serve": "gatsby serve",
    "watch:lambdas": "gulp watch"
  },
  /* ... */
}

gatsby-config.js:

const globImporter = require('node-sass-glob-importer')

require("dotenv").config({
    path: `.env`,
})

require('envkey')

/* Irrelevant Code Removed */

let config = {
    /* Irrelevant Code Removed */
    plugins: [
        `gatsby-plugin-resolve-src`,
        /* Irrelevant Code Removed */
        {
            resolve: `gatsby-plugin-webfonts`,
            options: {
                fonts: {
                    google: [{
                        family: `Roboto`,
                        variants: [ `300`, `400`, `500`, `700` ]
                    },{
                        family: `Roboto Slab`,
                        variants: [ `100`, `200`, `300`, `400`, `500`, `600`, `700` ]
                    }]
                }
            }
        },
        /** Google Tag Manager */
        {
            resolve: "gatsby-plugin-google-tagmanager",
            options: {
                id: process.env.GATSBY_GTM_ID,
                includeInDevelopment: true,
                defaultDataLayer: { platform: "gatsby" }
            }
        },
        /* Irrelevant Code Removed */
        {
            resolve: `gatsby-source-contentstack`,
            options: {
                api_key: process.env.CONTENTSTACK_API_KEY,
                delivery_token: process.env.CONTENTSTACK_API_TOKEN,
                environment: process.env.CONTENTSTACK_ENV,
            }
        },
        {
            resolve: `gatsby-plugin-sass`, // Sass plugin to utilize .scss files
            options: {
                importer: globImporter(), // Allow glob imports like .../**/*.scss
            },
        },
        {
            resolve: `gatsby-plugin-netlify`,
            options: {
                // The following header rules need to be removed once we are no longer doing legacy site proxy rewrites
                // The following will generate standard security headers for all unkonwn routes
                headers: {
                    '/*': [
                        // Commenting this our so that we can embed pages on partner pages
                        // In the future, I would like to maintian a list of registered partner
                        // domains in CS and dynamically populate the CSP header for those domains
                        // and scope the header to specific page path patterns:
                        // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors
                        // `X-Frame-Options: DENY`,
                        `X-XSS-Protection: 1; mode=block`,
                        `Referrer-Policy: same-origin`,
                        `Access-Control-Allow-Origin: *`,
                        `Strict-Transport-Security: max-age=31536000; includeSubDomains`
                    ]
                },
                // The following will generate standard security headers for all published routes
                allPageHeaders: [
                    // Commenting this our so that we can embed pages on partner pages
                    // In the future, I would like to maintian a list of registered partner
                    // domains in CS and dynamically populate the CSP header for those domains
                    // and scope the header to specific page path patterns:
                    // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors
                    // `X-Frame-Options: DENY`,
                    `X-XSS-Protection: 1; mode=block`,
                    `X-Content-Type-Options: nosniff`,
                    `Referrer-Policy: no-referrer-when-downgrade`,
                    `Strict-Transport-Security: max-age=31536000; includeSubDomains`
                ],
                // The following needs to be removed once we are no longer doing legacy site proxy rewrites
                mergeSecurityHeaders: false,
                // generateMatchPathRewrites: false
            }
        },
        /* Irrelevant Code Removed */
        {
            resolve: `gatsby-plugin-preconnect`,
            options: {
                domains: [
                    `https://apikeys.civiccomputing.com`,
                    `https://app.hushly.com`,
                    `https://cdnjs.cloudflare.com`,
                    `https://fonts.googleapis.com`,
                    `https://ik.imagekit.io`,
                    `https://www.google-analytics.com`,
                    `https://in.ml314.com`,
                    `https://ml314.com`,
                    `https://reveal.clearbit.com`,
                    `https://cdn.treasuredata.com`,
                    `https://1038997-47.chat.api.drift.com`,
                    `https://customer.api.drift.com`,
                    `https://embeds.driftcdn.com`,
                    `https://enrichment.api.drift.com`,
                    `https://event.api.drift.com`,
                    `https://js.driftt.com`,
                    `https://metrics.api.drift.com`,
                    `https://presence.api.drift.com`,
                    `https://targeting.api.drift.com`,
                    `https://576-gyc-500.mktoresp.com`,
                    `https://munchkin.marketo.net`,
                    `https://analytics.newscred.com`,
                    `https://a10198241005.cdn.optimizely.com`,
                    `https://logx.optimizely.com`,
                    `https://a.quora.com`,
                    `https://analytics.twitter.com`,
                    `https://connect.facebook.net`,
                    `https://px.ads.linkedin.com`,
                    `https://q.quora.com`,
                    `https://snap.licdn.com`,
                    `https://static.ads-twitter.com`,
                    `https://t.co`,
                    `https://www.facebook.com`,
                    `https://9525482.fls.doubleclick.net`,
                    `https://adservice.google.com`,
                    `https://googleads.g.doubleclick.net`,
                    `https://p.adsymptotic.com`,
                    `https://stats.g.doubleclick.net`,
                    `https://www.google.com`,
                    `https://www.googleadservices.com`,
                ]
            }
        },
        {
            resolve: `gatsby-plugin-manifest`,
            options: {
                short_name: `8x8`,
                name: `8x8 - Voice, Video, Chat, Contact Center`,
                description: `8x8's business phone systems deliver affordable, cloud-based voice, video, messaging, and contact center solutions, helping you serve customers anytime.`,
                categories: [
                    `communications`,
                    `technology`,
                    `medical`
                ],
                start_url: `/`,
                scope: `/`,
                background_color: `#FFFFFF`,
                theme_color: `#CB2233`,
                display: `minimal-ui`,
                icon: `src/images/8x8-favicon.svg`,
                shortcuts: [
                    {
                        name: `View 8x8 Products`,
                        short_name: `Products`,
                        description: `8x8's cloud communications products boost efficiency by consolidating your phone, meetings, team messaging, and cloud contact center into one single platform.`,
                        url: `/products`
                    }, {
                        name: `View 8x8 Solutions`,
                        short_name: `Solutions`,
                        description: `8x8, Inc. offers business communications phone solutions to small, medium and large sized businesses. Find your solution today.`,
                        url: `/solutions`
                    }, {
                        name: `View 8x8 Integrations`,
                        short_name: `Integrations`,
                        description: `Use 8x8 integration to connect your apps and software automatically. Connect to mail, messaging, CRMs, spreadsheets and more. Do it yourself, today.`,
                        url: `/products/integrations`
                    }, {
                        name: `View 8x8 Resources`,
                        short_name: `Resources`,
                        description: `View and access our library of white papers, webinars, case studies and more to learn about 8x8 and the services we offer.`,
                        url: `/resources`
                    }, {
                        name: `View Careers at 8x8`,
                        short_name: `Careers`,
                        description: `8x8 is a leader in cloud communication software, who's always looking for the best and brightest talent. Check out our current job openings.`,
                        url: `/resources`
                    }
                ],
                related_applications: [
                    {
                        platform: `play`,
                        url: `https://play.google.com/store/apps/details?id=com.eght.meetings&hl=en_US`,
                        id: `com.eght.meetings`
                    }, {
                        platform: `itunes`,
                        url: `https://apps.apple.com/us/app/8x8-video-meetings/id1473422060`,
                        id: `1473422060`
                    }
                ]
            },
        },
        `gatsby-plugin-offline`,
        `gatsby-plugin-remove-trailing-slashes`,
        {
            resolve: `gatsby-plugin-sitemap`,
            options: {
                sitemapSize: 1500
            }
        }
        /* Irrelevant Code Removed */
    ],
}

/* Irrelevant Code Removed */

// Export our config object
module.exports = config

As you can see, we have a pretty vanilla config re: gatsby-plugin-offline, so its interesting that there are these issues. Now, I know we have a lot that needs to be improved upon in terms of bundle size, and excess json being loaded, but from what I can tell that is not what is contributing to the white screen, as that only happens with a service worker enabled and only on the subsequent page loads, not the first.

Any insights would be appreciated.

UPDATE: I have found that this seems to be directly related to a script we are loading from vidyard. It is causing over 200MB of data to be cached by the service worker, but I have no idea why or where it is coming from. This is also what is causing the blank screen to flash before the page loads it seems. If I block this script and then clear data, the behavior goes away and the site's cache is around 3MB.

UPDATE 2: vidyard was a bit of a red herring. I actually have a handful of scripts that get added to either the headComponents, or the bodyComponents ( if set with defer=true ). These follow the pattern /_scripts/[name].[hashString].js. If i block ANY 1 of these scripts in the browser console, the cache never gets larger than 3.5MB. As soon as all are allowed to be served, the cache explodes to almost 200MB. It also seems that blocking any of them causes none of them to be cached by the sw. For context, these scripts do not total anywhere near 200MB themselves, and when switching into offline mode, the total served size of resources from teh service worker is ~17MB:

315B Feb  5 14:23 hushlyPreLoad.fd86f5a4bc2479a6a9f213e0a0cf4068.js
65K Feb  5 14:23 vidyard.e2e8eb2b2c8bd6e0e54aaa07d89a39a1.js
2.5K Feb  5 14:23 hushly.6e78c8c5674405421ba73a4ce9190a34.js
281K Feb  5 14:23 cookieControl.e54c9dda6b56442dfc104602920c26d0.js
572K Feb  5 14:23 optimizely.463a6ca2f838c69a7878928422dfe4c2.js

[eth0izzle]

Same problem here. Nothing to add from what others have already captured. Disabling the plugin works for now.

[wolfet]

I experienced this same issue in Firefox and Safari, but not in Chrome. This forked version of gatsby-plugin-offline with a newer version of workbox seemed to resolve the blank page on refresh for my project: https://github.com/kije/gatsby-plugin-offline-next

There are other issues I've run into where certain routes, including the site root, are not available offline with this plugin. I'm temporarily not using it with Gatsby.

[DPro23]

Hi everyone,

I have the same issue since months and we can't figure out how to solve it.

The blank screen/white page occurs after a deployment of a new version of a Gatsby website. After the deployment, if an user visit the website he will see the white page and only after an hot reload, cache cleaning or incognito mode, the user can navigate into the website normally.

I have installed a service worker with gatsby-plugin-offline but then I removed it cause was causing more issues with the cache then anything else. So I added the plugin to remove the serviceworker from the users.

The problem is still there. It is random and it is causing lot of problems with the customer.

I can't belive that Gatsby has still so many issues and complexities in the main aspects of web development. We build websites with gatsby for its performances, but sometimes is becoming not worthy cause of the amount of problems and issues caused by the gatsby plugins and/or not supported versions.

We urgently need a fix for this otherwise any performance test on a gatsby website with this issue will fail brutally.

[iThijssen]

I did not install gatsby-plugin-offline but still get the same issues reported from my customers since a few months. I cannot figure out any reason for this problem. At a random frequency, my users report an empty white screen when they load the page, sometimes after a few seconds. It occurs from time to time after a new build of the site served by NGINX but it does not have to mean that the problem is related to update-deployments.

[bartlomiejzuber]

I did not install gatsby-plugin-offline but still get the same issues reported from my customers since a few months. I cannot figure out any reason for this problem. At a random frequency, my users report an empty white screen when they load the page, sometimes after a few seconds. It occurs from time to time after a new build of the site served by NGINX but it does not have to mean that the problem is related to update-deployments.

That's interesting, we have exactly the same problem. Can't say whether that problem is because of that gatsby-plugin-offline plugin or something else. Once I was getting also blank page (it happens very randomly) on browser, I went to check it on cURL and finds out that server correctly responded with HTML. Imo that might be something to do with NGINX itself.

[LekoArts]

Hi!

I'm closing this as a stale issue as in the meantime Gatsby 4 and related packages were released. You can check our Framework Version Support Page to see which versions currently receive active support. If this is a feature request, please create a discussion as we moved feature requests from issues to GitHub Discussions.

Please try the mentioned issue on the latest version (using the next tag) and if you still see this problem, open a new bug report. It must include a minimal reproduction.

Thanks!