Gatsby Bundle Looping

Description

Site is on a bundling loop, really strange because it kinda came out of the blue. I had just added a new static query (https://github.com/johnchourajr/john.design/blob/gatsby-2.27.2-issue/src/components/hooks/use-journal-data.js), and that’s when things started going a bit haywire.

I was reading this issue (https://github.com/gatsbyjs/gatsby/issues/27609), which sounded similar to my problem. I tried upgrading to the latest, which didn’t work. I also tried reverting back to 2.27.2 which still has this issue.

This is a production version of the same branch, which has less issues, but the page is put into offline mode https://gatsby-2-27-2-issue--johndesign.netlify.app

Steps to reproduce

1. Run git clone -b gatsby-2.27.2-issue https://github.com/johnchourajr/john.design.git
2. Run cd john.design
3. Run yarn then yarn start

Expected result

When running yarn start I should see a local instance of my site loaded

Actual result

Site runs on a loop through this cycle in my terminal

success onPreExtractQueries - 0.001s
success extract queries from components - 0.037s
success write out requires - 0.001s
success Re-building development bundle - 0.039s
success onPreExtractQueries - 0.004s
success extract queries from components - 0.045s
success write out requires - 0.001s
success Re-building development bundle - 0.034s
success onPreExtractQueries - 0.001s
success extract queries from components - 0.042s
success write out requires - 0.001s
success Re-building development bundle - 0.038s
success onPreExtractQueries - 0.004s
success extract queries from components - 0.042s

Every now and then I see this in the terminal

warn Warning: Event "xstate.after(200)#waitingMachine.aggregatingFileChanges" was sent to stopped service "waitingMachine". This
service has already reached its final state, and will not transition.
Event: {"type":"xstate.after(200)#waitingMachine.aggregatingFileChanges"}

In the browser, all I see is this on loop

And if I hard refresh (cmd + shift + r) I see a rendered page, but with content that is run-time dependent that is missing, and still the dev bundle is looping.

Environment

  System:
    OS: macOS 10.15.7
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Shell: 3.2.57 - /bin/sh
  Binaries:
    Node: 12.19.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 88.0.4324.150
    Edge: 88.0.705.63
    Firefox: 78.4.0
    Safari: 14.0
  npmPackages:
    gatsby: ^2.27.2 => 2.32.3 
    gatsby-image: ^2.8.0 => 2.11.0 
    gatsby-plugin-google-analytics: ^2.8.0 => 2.11.0 
    gatsby-plugin-manifest: ^2.9.1 => 2.12.0 
    gatsby-plugin-mdx: ^1.7.1 => 1.10.0 
    gatsby-plugin-offline: ^3.7.1 => 3.10.0 
    gatsby-plugin-react-helmet: ^3.7.0 => 3.10.0 
    gatsby-plugin-sharp: ^2.11.2 => 2.14.1 
    gatsby-plugin-sitemap: ^2.9.0 => 2.12.0 
    gatsby-plugin-styled-components: ^3.9.0 => 3.10.0 
    gatsby-source-filesystem: ^2.8.1 => 2.11.0 
    gatsby-transformer-sharp: ^2.9.0 => 2.12.0 
  npmGlobalPackages:
    gatsby-cli: 2.19.1

[vrgimael]

This happens all the time, it’s really annoying and nearly impossible to reliably reproduce - I know this isn’t super helpful but please be aware this is an actual issue

I’ve had this happen exclusively on Safari, strangely enough

[maverickdude]

I’m getting the same issue on the server when running develop (not on build). The pages are constantly refreshing and this really is out of the blue.

System:
    OS: Linux 4.4 Ubuntu 16.04.3 LTS (Xenial Xerus)
    CPU: (2) x64 Intel(R) Xeon(R) Platinum 8175M CPU @ 2.50GHz
    Shell: 4.3.48 - /bin/bash
  Binaries:
    Node: 12.18.3 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.6 - /usr/local/bin/npm
  Languages:
    Python: 2.7.12 - /usr/bin/python
  npmPackages:
    "gatsby": "2.32.3",
    "gatsby-background-image": "1.4.1",
    "gatsby-image": "2.11.0",
    "gatsby-plugin-google-analytics": "2.11.0",
    "gatsby-plugin-google-tagmanager": "2.11.0",
    "gatsby-plugin-htaccess": "1.4.0",
    "gatsby-plugin-layout": "1.10.0",
    "gatsby-plugin-lodash": "3.10.0",
    "gatsby-plugin-manifest": "2.12.0",
    "gatsby-plugin-no-sourcemaps": "2.9.0",
    "gatsby-plugin-offline": "3.10.0",
    "gatsby-plugin-preconnect": "1.1.54",
    "gatsby-plugin-preload-fonts": "1.9.0",
    "gatsby-plugin-react-helmet": "3.10.0",
    "gatsby-plugin-remove-serviceworker": "1.0.0",
    "gatsby-plugin-robots-txt": "1.5.5",
    "gatsby-plugin-sass": "3.2.0",
    "gatsby-plugin-sharp": "2.14.1",
    "gatsby-plugin-sitemap": "2.12.0",
    "gatsby-source-filesystem": "2.11.0",
    "gatsby-source-wordpress": "4.0.1",
    "gatsby-transformer-sharp": "2.12.0",

But when I’m trying this on my local machine, it’s working fine.

  System:
    OS: macOS 11.2
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.7.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.7 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 88.0.4324.146
    Edge: 88.0.705.63
    Firefox: 85.0
    Safari: 14.0.3
  npmPackages:
    "gatsby": "2.32.3",
    "gatsby-background-image": "1.4.1",
    "gatsby-image": "2.11.0",
    "gatsby-plugin-google-analytics": "2.11.0",
    "gatsby-plugin-google-tagmanager": "2.11.0",
    "gatsby-plugin-htaccess": "1.4.0",
    "gatsby-plugin-layout": "1.10.0",
    "gatsby-plugin-lodash": "3.10.0",
    "gatsby-plugin-manifest": "2.12.0",
    "gatsby-plugin-no-sourcemaps": "2.9.0",
    "gatsby-plugin-offline": "3.10.0",
    "gatsby-plugin-preconnect": "1.1.54",
    "gatsby-plugin-preload-fonts": "1.9.0",
    "gatsby-plugin-react-helmet": "3.10.0",
    "gatsby-plugin-remove-serviceworker": "1.0.0",
    "gatsby-plugin-robots-txt": "1.5.5",
    "gatsby-plugin-sass": "3.2.0",
    "gatsby-plugin-sharp": "2.14.1",
    "gatsby-plugin-sitemap": "2.12.0",
    "gatsby-source-filesystem": "2.11.0",
    "gatsby-source-wordpress": "4.0.1",
    "gatsby-transformer-sharp": "2.12.0",
  npmGlobalPackages:
    gatsby-cli: 2.12.51

Edit: This is happening only on Chrome, works fine on FireFox.