Browser won't hot reload re-compiled sources, broken after `gatsby@2.24.9`

amankkg commented 4 years ago

Description

Recent versions of gatsby have issues with hot-reload during gatsby develop. I'm constantly checking almost every release and this problem still persists as per gatsby@2.24.23. The latest OK version for me is gatsby@2.24.9 so I keep rolling back to it.

Steps to reproduce

I run gatsby develop and app is loaded OK
I edit any source code (be it a component or a graphql query)
gatsby develop script rebuilds sources without any error

Expected result

Browser updates the page.

Actual result

Browser starts loading and hangs forever, changes are not picked up. Manual page refresh is not working either. Only restart of develop script can help. However, GraphiQL editor keeps working.

Environment

  System:
    OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.6.0 - /usr/bin/node
    Yarn: 1.22.4 - /usr/bin/yarn
    npm: 6.14.6 - /usr/bin/npm
  Browsers:
    Chrome: 84.0.4147.105
    Firefox: 79.0
  npmPackages:
    gatsby: 2.24.23 => 2.24.23
    gatsby-image: 2.4.14 => 2.4.14
    gatsby-plugin-linaria: 2.1.0 => 2.1.0
    gatsby-plugin-manifest: 2.4.21 => 2.4.21
    gatsby-plugin-postcss: 2.3.11 => 2.3.11
    gatsby-plugin-purgecss: 5.0.0 => 5.0.0
    gatsby-plugin-react-helmet: 3.3.10 => 3.3.10
    gatsby-plugin-root-import: 2.0.5 => 2.0.5
    gatsby-plugin-sharp: 2.6.24 => 2.6.24
    gatsby-plugin-typescript: 2.4.16 => 2.4.16
    gatsby-source-filesystem: 2.3.23 => 2.3.23
    gatsby-source-multi-api: 1.0.5 => 1.0.5
    gatsby-transformer-sharp: 2.5.12 => 2.5.12

UPD: added note on GraphiQL

amankkg commented 4 years ago

Hm, seems like there is another problem with GraphQL schema being not available in GraphiQL page on 2.24.9

vladar commented 4 years ago

Hi @amankkg !

Sorry to hear you're running into an issue. The only PR published between 2.24.9 and 2.24.10 is https://github.com/gatsbyjs/gatsby/pull/25815

It can be the culprit. But the problem is that I couldn't reproduce the issue on a fresh project (based on the hello-world starter). So we need your help.

It is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

amankkg commented 4 years ago

OK, will do it later

LyulyaevMaxim commented 4 years ago

I has Event "xstate.after(1000)#waitingMachine.batchingNodeMutations" was sent to stopped service "waitingMachine" in terminal after some hot reloads.

Found this xstate issue and set ... "resolution": { "xstate": "4.9.1" } ... in package.json and after it worked without this error, but reloading took long time sometimes.

Reverting to "gatsby@2.24.9" actually works better.

theskillwithin commented 4 years ago

I am experiencing the same thing, with both editing jsx and styles. not related to any graphql stuff for me

theskillwithin commented 4 years ago

I tried downgrading to npm i gatsby@2.24.9 but it appears to not fix the problem for me. also, this problem is occurring for me across multiple gatsby projects on multiple computers. the hot reloading might work like 1 out of 5 times I save.

edit: i feel like this problem started recently, about roughly a month ago

ascorbic commented 4 years ago

Can somebody who is experiencing the hot reload issue run gatsby develop with the --verbose flag and post the output. A minimal reproduction would still be ideal though.

ascorbic commented 4 years ago

@theskillwithin If it's broken in older versions then this is probably a different problem. This is almost certainly related to the webpack state machine changes in 2.24.9. Can you create a minimal reproduction and open a new issue please.

ascorbic commented 4 years ago

Found this xstate issue and set ... "resolution": { "xstate": "4.9.1" } ... in package.json and after it worked without this error, but reloading took long time sometimes.

@LyulyaevMaxim We don't use the React integrations, so it is unlikely to be that issue. It might be perhaps some other bug introduced in xstate, but resolving to 4.9.1 will have other issues because we use the newer syntax for transient transitions that aren't supported in that version.

mjabali commented 4 years ago

Hi @ascorbic, here is the output of gatsby develop with the --verbose flag. Gatsby CLI version: 2.8.14 and Gatsby version: 2.24.23.

verbose set gatsby_executing_command: "develop"
verbose loading local command from: /Users/xxxxx/vap/node_modules/gatsby/dist/commands/develop.js
verbose running command: develop
verbose Transition to "initializing"
success open and validate gatsby-configs - 0.060s
success load plugins - 0.545s
success onPreInit - 0.006s
success initialize cache - 0.005s
success copy gatsby files - 0.047s
success onPreBootstrap - 0.009s
verbose Transition to "initializingData"
success createSchemaCustomization - 0.097s
verbose Transition to "initializingData" > "sourcingNodes"
verbose Now have 984 nodes with 10 types: [SitePage:1, SitePlugin:40, Site:1, SiteBuildMetadata:1, Directory:27,
verbose Checking for deleted pages
verbose Deleted 0 pages
verbose Found 0 changed pages
success Checking for changed pages - 0.006s
success source and transform nodes - 0.562s
verbose Transition to "initializingData" > "buildingSchema"
success building schema - 4.786s
verbose Transition to "initializingData" > "creatingPages"
verbose Now have 1084 nodes with 10 types, and 101 SitePage nodes
success createPages - 0.233s
verbose Checking for deleted pages
verbose Deleted 0 pages
verbose Found 100 changed pages
success Checking for changed pages - 0.003s
verbose Transition to "initializingData" > "creatingPagesStatefully"
success createPagesStatefully - 0.052s
verbose Transition to "initializingData" > "rebuildingSchemaWithSitePage"
success update schema - 0.061s
verbose Transition to "initializingData" > "writingOutRedirects"
success write out redirect data - 0.003s
verbose Transition to "initializingData" > "done"
verbose Transition to "runningPostBootstrap"
success Build manifest and related icons - 0.002s
success onPostBootstrap - 0.010s
info bootstrap finished - 8.881s
verbose Transition to "runningQueries"
success onPreExtractQueries - 0.004s
success extract queries from components - 0.405s
verbose Transition to "runningQueries" > "writingRequires"
success write out requires - 0.027s
verbose Transition to "runningQueries" > "calculatingDirtyQueries"
verbose Transition to "runningQueries" > "runningStaticQueries"
verbose Transition to "runningQueries" > "runningPageQueries"
success run page queries - 0.028s - 1/1 35.35/s
verbose Transition to "runningQueries" > "waitingForJobs"
verbose Transition to "runningQueries" > "done"
verbose Transition to "startingDevServers"
⠀
You can now view gatsby-starter-default in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 4.460s
verbose Transition to "waiting"
verbose Transition to "waiting" > "aggregatingFileChanges"
info changed file at /Users/xxxxx/vap/src/content/index.md
verbose Transition to "runningQueries"
success onPreExtractQueries - 0.004s
success extract queries from components - 0.105s
verbose Transition to "runningQueries" > "writingRequires"
success write out requires - 0.007s
verbose Transition to "runningQueries" > "calculatingDirtyQueries"
verbose Transition to "runningQueries" > "runningStaticQueries"
verbose Transition to "runningQueries" > "runningPageQueries"
verbose Transition to "runningQueries" > "waitingForJobs"
verbose Transition to "runningQueries" > "done"
verbose Transition to "recompiling"
warn Warning: Event "xstate.after(1000)#waitingMachine.batchingNodeMutations" was sent to stopped service
"waitingMachine". This service has already reached its final state, and will not transition.
success Re-building development bundle - 2.939s
verbose Transition to "waiting"

To repro the issue, I just made a change to one of the files (index.md) and saved it.

amankkg commented 4 years ago

@ascorbic here is my verbose logs on gatsby@2.24.47. Sorry for being inactive, as you can see there are many 3rd-party packages (which cause some problems from time to time too) so I need more time to reproduce this bug

A resulting behavior of these logs:

I did multiple edits: multiple component classnames, markup and css-in-js styles (I'm using linaria)
No errors occurred
Browser (Chrome) hot-reloads but the page has no changes applied (before gatsby@2.24.47 browser hanged immediately)
Tried reloading browser manually - hanged forever
Tried opening an app in another browser (Firefox) - also hangs forever

Click to expand!

```sh > SITENAME@ start /home/amank/repos/SITENAME > gatsby develop "--verbose" verbose set gatsby_log_level: "verbose" verbose set gatsby_executing_command: "develop" verbose loading local command from: /home/amank/repos/SITENAME/node_modules/gatsby/dist/commands/develop.js verbose running command: develop Debugger listening on ws://127.0.0.1:9229/64ee4ec2-ccc4-4ede-a36a-38afa3f82d1e For help, see: https://nodejs.org/en/docs/inspector verbose Transition to "initializing" success open and validate gatsby-configs - 0.266s success load plugins - 0.348s success onPreInit - 0.048s success initialize cache - 0.006s success copy gatsby files - 0.049s success onPreBootstrap - 0.012s verbose Transition to "initializingData" success createSchemaCustomization - 0.042s verbose Transition to "initializingData" > "sourcingNodes" meta.type: CrmFaq result.id: undefined result.pf_username: undefined meta.type: CrmAlumni result.id: undefined result.pf_username: undefined meta.type: CrmAlumni result.id: undefined result.pf_username: undefined meta.type: CrmAlumni result.id: undefined result.pf_username: undefined meta.type: CrmCourses result.id: undefined result.pf_username: undefined meta.type: CrmPartners result.id: undefined result.pf_username: undefined meta.type: CrmTrainers result.id: undefined result.pf_username: undefined meta.type: CrmTrainers result.id: undefined result.pf_username: undefined meta.type: CrmStatistics result.id: 1 result.pf_username: undefined verbose Now have 67 nodes with 14 types: [SitePage:1, SitePlugin:34, Site:1, SiteBuildMetadata:1, Directory:1, File:11, ImageSharp:11, MultiApiSourcePeopleFaculty:1, CrmFaq:1, CrmAlumni:1, CrmCourses:1, CrmTrainers:1, verbose Checking for deleted pages verbose Deleted 0 pages verbose Found 0 changed pages success Checking for changed pages - 0.014s success source and transform nodes - 0.603s verbose Transition to "initializingData" > "buildingSchema" success building schema - 0.692s verbose Transition to "initializingData" > "creatingPages" verbose Now have 67 nodes with 14 types, and 1 SitePage nodes success createPages - 0.018s verbose Checking for deleted pages verbose Deleted 0 pages verbose Found 0 changed pages success Checking for changed pages - 0.007s verbose Transition to "initializingData" > "creatingPagesStatefully" success createPagesStatefully - 0.097s verbose Transition to "initializingData" > "rebuildingSchemaWithSitePage" success update schema - 0.039s verbose Transition to "initializingData" > "writingOutRedirects" success write out redirect data - 0.007s verbose Transition to "initializingData" > "done" verbose Transition to "runningPostBootstrap" success Build manifest and related icons - 0.194s success onPostBootstrap - 0.207s info bootstrap finished - 5.634s verbose Transition to "runningQueries" success onPreExtractQueries - 0.005s success extract queries from components - 0.415s verbose Transition to "runningQueries" > "writingRequires" success write out requires - 0.056s verbose Transition to "runningQueries" > "calculatingDirtyQueries" verbose Transition to "runningQueries" > "runningStaticQueries" success run static queries - 0.053s - 1/1 18.83/s verbose Transition to "runningQueries" > "runningPageQueries" success run page queries - 0.039s - 4/4 102.40/s verbose Transition to "runningQueries" > "waitingForJobs" verbose Transition to "runningQueries" > "done" verbose Transition to "startingDevServers" ⠀ You can now view SITENAMEin the browser. ⠀ http://localhost:8000/ ⠀ View GraphiQL, an in-browser IDE, to explore your site's data and schema ⠀ http://localhost:8000/___graphql ⠀ Note that the development build is not optimized. To create a production build, use gatsby build ⠀ success Building development bundle - 12.842s verbose Transition to "waiting" verbose Transition to "waiting" > "aggregatingFileChanges" verbose Webpack file changed: /home/amank/repos/SITENAME/src/templates/main/our-graduates/graduate-card.tsx verbose Transition to "runningQueries" success onPreExtractQueries - 0.010s success extract queries from components - 0.128s verbose Transition to "runningQueries" > "writingRequires" success write out requires - 0.007s verbose Transition to "runningQueries" > "calculatingDirtyQueries" verbose Transition to "runningQueries" > "runningStaticQueries" verbose Transition to "runningQueries" > "runningPageQueries" verbose Transition to "runningQueries" > "waitingForJobs" verbose Transition to "runningQueries" > "done" verbose Transition to "recompiling" success Re-building development bundle - 1.269s verbose Transition to "waiting" verbose Transition to "waiting" > "aggregatingFileChanges" verbose Webpack file changed: /home/amank/repos/SITENAME/src/templates/main/our-graduates/index.tsx verbose Transition to "runningQueries" success onPreExtractQueries - 0.023s success extract queries from components - 0.137s verbose Transition to "runningQueries" > "writingRequires" success write out requires - 0.013s verbose Transition to "runningQueries" > "calculatingDirtyQueries" verbose Transition to "runningQueries" > "runningStaticQueries" verbose Transition to "runningQueries" > "runningPageQueries" verbose Transition to "runningQueries" > "waitingForJobs" verbose Transition to "runningQueries" > "done" verbose Transition to "recompiling" success Re-building development bundle - 0.961s verbose Webpack file changed: /home/amank/repos/SITENAME/.linaria-cache/src/templates/main/our-graduates/index.linaria.css verbose Transition to "waiting" verbose Transition to "waiting" > "aggregatingFileChanges" verbose Transition to "runningQueries" success onPreExtractQueries - 0.028s success extract queries from components - 0.109s verbose Transition to "runningQueries" > "writingRequires" success write out requires - 0.009s verbose Transition to "runningQueries" > "calculatingDirtyQueries" verbose Transition to "runningQueries" > "runningStaticQueries" verbose Transition to "runningQueries" > "runningPageQueries" verbose Transition to "runningQueries" > "waitingForJobs" verbose Transition to "runningQueries" > "done" verbose Transition to "recompiling" success Re-building development bundle - 1.435s verbose Transition to "waiting" verbose Transition to "waiting" > "aggregatingFileChanges" verbose Webpack file changed: /home/amank/repos/SITENAME/src/templates/main/our-graduates/graduate-card.tsx verbose Transition to "runningQueries" success onPreExtractQueries - 0.005s success extract queries from components - 0.090s verbose Transition to "runningQueries" > "writingRequires" success write out requires - 0.019s verbose Transition to "runningQueries" > "calculatingDirtyQueries" verbose Transition to "runningQueries" > "runningStaticQueries" verbose Transition to "runningQueries" > "runningPageQueries" verbose Transition to "runningQueries" > "waitingForJobs" verbose Transition to "runningQueries" > "done" verbose Transition to "recompiling" success Re-building development bundle - 0.799s verbose Transition to "waiting" verbose Transition to "waiting" > "aggregatingFileChanges" verbose Webpack file changed: /home/amank/repos/SITENAME/src/templates/main/our-graduates/graduate-card.tsx verbose Transition to "runningQueries" success onPreExtractQueries - 0.005s success extract queries from components - 0.063s verbose Transition to "runningQueries" > "writingRequires" success write out requires - 0.005s verbose Transition to "runningQueries" > "calculatingDirtyQueries" verbose Transition to "runningQueries" > "runningStaticQueries" verbose Transition to "runningQueries" > "runningPageQueries" verbose Transition to "runningQueries" > "waitingForJobs" verbose Transition to "runningQueries" > "done" verbose Transition to "recompiling" success Re-building development bundle - 0.788s verbose Transition to "waiting" verbose Transition to "waiting" > "aggregatingFileChanges" verbose Webpack file changed: /home/amank/repos/SITENAME/src/templates/main/employment/index.tsx verbose Transition to "runningQueries" success onPreExtractQueries - 0.020s success extract queries from components - 0.073s verbose Transition to "runningQueries" > "writingRequires" success write out requires - 0.008s verbose Transition to "runningQueries" > "calculatingDirtyQueries" verbose Transition to "runningQueries" > "runningStaticQueries" verbose Transition to "runningQueries" > "runningPageQueries" verbose Transition to "runningQueries" > "waitingForJobs" verbose Transition to "runningQueries" > "done" verbose Transition to "recompiling" success Re-building development bundle - 0.918s verbose Webpack file changed: /home/amank/repos/SITENAME/.linaria-cache/src/templates/main/employment/index.linaria.css verbose Transition to "waiting" verbose Transition to "waiting" > "aggregatingFileChanges" verbose Transition to "runningQueries" success onPreExtractQueries - 0.006s success extract queries from components - 0.057s verbose Transition to "runningQueries" > "writingRequires" success write out requires - 0.006s verbose Transition to "runningQueries" > "calculatingDirtyQueries" verbose Transition to "runningQueries" > "runningStaticQueries" verbose Transition to "runningQueries" > "runningPageQueries" verbose Transition to "runningQueries" > "waitingForJobs" verbose Transition to "runningQueries" > "done" verbose Transition to "recompiling" success Re-building development bundle - 1.651s verbose Transition to "waiting" verbose Transition to "waiting" > "aggregatingFileChanges" verbose Webpack file changed: /home/amank/repos/SITENAME/src/templates/main/our-graduates/index.tsx verbose Transition to "runningQueries" success onPreExtractQueries - 0.007s success extract queries from components - 0.089s verbose Transition to "runningQueries" > "writingRequires" success write out requires - 0.012s verbose Transition to "runningQueries" > "calculatingDirtyQueries" verbose Transition to "runningQueries" > "runningStaticQueries" verbose Transition to "runningQueries" > "runningPageQueries" verbose Transition to "runningQueries" > "waitingForJobs" verbose Transition to "runningQueries" > "done" verbose Transition to "recompiling" success Re-building development bundle - 1.798s verbose Webpack file changed: /home/amank/repos/SITENAME/.linaria-cache/src/templates/main/our-graduates/index.linaria.css verbose Transition to "waiting" ```

quamsta commented 4 years ago

I'm just learning some gatsby@2.24.47 and general React things by following the tutorials on gatsbyjs.com and while ~~I'm not having hot reload issues~~, I started receiving this warning:

warn Warning: Event "xstate.after(1000)#waitingMachine.batchingNodeMutations" was sent to stopped service "waitingMachine". This service has already reached

...after I installed gatsby-source-filesystem@2.3.24 in part five of the tutorials. I found this GitHub issue by looking up the above warning.

When I remove gatsby-source-filesystem from my plugins in gatsby-config.js, this warning goes away.

No idea if this counts as a reproduction of this error, ~~since I'm not really having a hot reload problems as I said~~ Edit: Turns out, I'm also having hot reloading issues occasionally!, but hope it helps!

alpinegizmo commented 4 years ago

For me, rolling back to 2.24.9 from 2.24.47 restored hot reloading. It was consistently failing before I rolled back.

mcagalj commented 4 years ago

I'm just learning some gatsby@2.24.47 and general React things by following the tutorials on gatsbyjs.com and while ~I'm not having hot reload issues~, I started receiving this warning:

warn Warning: Event "xstate.after(1000)#waitingMachine.batchingNodeMutations" was sent to stopped service "waitingMachine". This service has already reached

...after I installed gatsby-source-filesystem@2.3.24 in part five of the tutorials. I found this GitHub issue by looking up the above warning.

When I remove gatsby-source-filesystem from my plugins in gatsby-config.js, this warning goes away.

No idea if this counts as a reproduction of this error, ~since I'm not really having a hot reload problems as I said~ Edit: Turns out, I'm also having hot reloading issues occasionally!, but hope it helps!

Same here with gatsby@2.24.53.

2x2xplz commented 4 years ago

My gatsby installation 2.24.50 (on Windows) was also failing to live-reload after editing any .MDX files. Typical console output was:

info changed file at C:\gatsby\mysite\src\pages\md\a-blog-post.mdx
success onPreExtractQueries - 0.007s                                                         
success extract queries from components - 0.080s                                             
success write out requires - 0.006s                                                          
warn Warning: Event "xstate.after(1000)#waitingMachine.batchingNodeMutations" was sent to    
stopped service "waitingMachine". This service has already reached its final state, and will 
success Re-building development bundle - 1.487s

The only way to see updates was to stop gatsby and re-run gatsby develop

I thought I was experiencing the problem described in #16336, but in fact rolling back to 2.24.9, as suggested above, restored live-reload functionality. Now the console output is like:

success Re-building development bundle - 1.013s
success building schema - 0.795s
success createPages - 0.084s
success Checking for changed pages - 0.011s
success updating schema - 0.080s
success onPreExtractQueries - 0.012s
success extract queries from components - 0.232s
success write out requires - 0.012s
success Re-building development bundle - 1.965s
success run page queries - 1.670s - 2/2 1.20/s

SMccarrick commented 4 years ago

For me, rolling back to 2.24.9 from 2.24.47 restored hot reloading. It was consistently failing before I rolled back.

Same for me I'm having to rollback to 2.24.9 to stop this reloading issue

sylvesteraswin commented 4 years ago

I can confirm to, reverting back to 2.24.9 everything seems to be working as before.

souporserious commented 4 years ago

Can confirm locking to 2.24.9 fixes things. I'm building a library alongside Gatsby and when Babel finishes the build it no longer refreshes and requires restarting the server.

ascorbic commented 4 years ago

This took a lot of tracking down, but I think I've fixed it. Thanks everyone for your information. I should have the release with the fix out today.

ascorbic commented 4 years ago

OK, this should be fixed in gatsby@2.24.57. If it's still broken for you after upgrading, please open a new issue with a repro

mikeyfe6 commented 4 years ago

My server is working as it should now w/ the latest update gatsby@2.24.57 as @ascorbic said! 🎊

amankkg commented 4 years ago

Sure, landed fix helped but I still face this bug sometimes, not so often tho. Needs investigation from my side

souporserious commented 4 years ago

Thanks for looking into this! In my case it still wasn't working which I boiled down to the use of chokidar cli that was running two builds, after removing that and running the processes separately, all seems to work well!

hartshorne commented 3 years ago

@ascorbic it's still broken after @vladar's change, here's an issue with a repro: https://github.com/gatsbyjs/gatsby/issues/27626

@amankkg are you using https://github.com/callstack/linaria?

amankkg commented 3 years ago

@hartshorne yes I do

joebentaylor1995 commented 3 years ago

Still broken in Gatsby 3

beamercola commented 3 years ago

I'm having to gatsby clean and clear browser cache every ~ 5 minutes just to get work done. Using Gatsby 3 latest.

toffalori commented 3 years ago

The same for me. Using Gatsby 3.3.0.

gianpo86 commented 3 years ago

Same here, I am on "gatsby": "^3.4",

pirtlj commented 3 years ago

I am seeing this on 3.4.1

danielcpereira11 commented 3 years ago

I didn't reply to this sooner because I forgot, but eventually I figured out that the problem was with a Gatsby plugin I was using - Gatsby plugin typescript checker. Removing it fixed the issue.

gianpo86 commented 3 years ago

I didn't reply to this sooner because I forgot, but eventually I figured out that the problem was with a Gatsby plugin I was using - Gatsby plugin typescript checker. Removing it fixed the issue.

Not using that plugin but still experiencing the issue

getcodestaff commented 3 years ago

How Can this issue be close?

danielmoessner commented 3 years ago

I've had the same or a similar problem. My index page didn't hot reload, but my other pages did. The problem was with my page component name. Apparently it has to start with an uppercase, which makes sense as all React components are supposed to do that. I'm using gatsby v3.5.

So turning

export default index

into

export default Page

fixed it for me.

witcradg commented 3 years ago

This is still broken.

drinkthestars commented 3 years ago

Yeah, still seeing this issue on Gatsby CLI version: 3.9.0 Gatsby version: 3.8.1

vladar commented 3 years ago

There could be other reasons why it fails in your specific case. Please open a new issue and provide a minimal reproduction demonstrating it.

gatsbyjs / gatsby