Add compatibility with React Fast Refresh

[fcisio]

Is your feature request related to a problem? Please describe.

react-refresh is the successor for react-hot-loader

While using Fast Refresh on a project, changes in the theme don't trigger HMR. Which make sense, since it's supposed to preserve the context and states.

Describe the solution you'd like
It would be nice to find a way, to have HMR work on theme changes, while using this feature. Not sure how we could go around this.

Describe alternatives you've considered
We could mention, the compatibility issue in the docs.
Gatsby now has a FAST_REFRESH flag, which makes it easy to break theme HMR.

Additional context
You can test this out on a repro I did for another issue.

1. Simply set the Fast Refresh flag to true

// gatsby-config.js

flags: {
  FAST_REFRESH: true,
},

[fcisio]

I realized that I've been getting this error with HMR all along.
And using fast refresh just skip full reload altogether.

Is it an issue on my end or Theme UI is simply not working with HMR at all so far?

[hasparus]

That theme/index.js is just a big JavaScript object with a bunch of colors and styles inside, right? How does that conflict with Fast Refresh?

[fcisio]

Essentially, without Fast Refresh, changes trigger full reload (logs above).
But when using Fast Refresh, changes to the theme don't trigger anything at all. No full reload nor HMR.

The same thing happens when the theme lives in gatsby-plugin-theme-ui.

[pieh]

Hi, just wanted to mention that this issue is most likely fully gatsby issue. I'm using reproduction you provided (thank you @fcisio!) to come up with proper fix for it there (work in progress PR gatsbyjs/gatsby#29752)

[fcisio]

Hey @pieh great to hear! I'll be following your PR.
Thanks

[fcisio]

Hey, @pieh I believe your Gatsby PR has been merged on v3, that's awesome!
Any chance you could help us with this issue? I think some logic from that PR could be useful here.

Thanks.