Gatsby v3 / Theme UI 0.6 - Not Hot Reloading

[PaulieScanlon]

Describe the bug
When using Theme UI 0.6 and Gatsby v3 i'm noting that hot reloading doesn't update the styles when i save changes to the Theme UI styles. I'm using gatsby-plugin-theme-ui also v0.6.

To Reproduce
Install:

• "gatsby": "^3.1.1",
• "gatsby-plugin-theme-ui": "^0.6.0",
• "theme-ui": "^0.6.0"

Create a default export in src/gatsby-plugin-theme-ui/index.js and add some colors. The styles are picked up by the Gatsby "site" but when changing values in the theme object the Gatsby site doesn't hot reload.

Expected behavior
The Gatsby site should hot related when values in the theme object are updated

Additional context
This might be a problem with Gatsby v3 not Theme UI so apologies in advance if that is the case.

[PaulieScanlon]

Just ran a test with

• "gatsby": "^2.32.11",
• "gatsby-plugin-theme-ui": "0.3.5",
• "theme-ui": "0.3.5"

and hot reloading doesn't work there either. Maybe this is a Chrome or a Mac thing 🤷‍♂️

[hasparus]

Possibly related issues:

• Add compatibility with React Fast Refresh #1440
• fix(hmr): accept hot updates for modules above page templates gatsbyjs/gatsby#29752

[t2ca]

I've had the same issue before updating to Theme UI 0.6.

[fcisio]

Yes, duplicate of #1440
The first part of the issue is fixed with Gatsby v3, meaning that changes above the pages are now computed.

So what's remaining is the "Ignored an update to the unaccepted module" error (more on this in #1440)

[fcisio]

** Update

On the latest versions of Gatsby v2, FAST_REFRESH: false can trigger a full page reload on theme changes.

On v3 the FAST_REFRESH option doesn't seem to exist anymore. So it won't refresh nor reload.

---

Until there is a fix for this it's better to stay on Gatsby v2.

[lachlanjc]

Closing as a duplicate, but would love any help on #1440!