Fast Refresh for React 17

[KyleAMathews]

Released in v3.0: https://www.gatsbyjs.com/docs/reference/release-notes/v3.0#fast-refresh

---

Description

With release 2.28.0 we shipped major improvements to our Fast Refresh support. The PR for a preliminary Fast Refresh integration added a custom overlay, better error recovery and in general a better communication between Gatsby's dev server and React Fast Refresh.

As Gatsby still supports older versions of React than 16.9 or 17.0 we can't enable it by default for everyone just yet. In the next major we definitely want to switch to Fast Refresh only -- for now you'll need to toggle a flag. Until the general release for everyone we want your feedback on the current implementation when you use it. In release 2.29.0 we'll enable it by default for everyone on React >= 17.0.

Usage

If you're on 16.9 or 17.0 you can enable it by setting a flag inside your gatsby-config.js (you'll need to be on the latest version of Gatsby):

module.exports = {
  flags: {
    FAST_REFRESH: true
  },
  plugins: [],
}

You can also drop the usage/installation of hot-loader e.g. in your gatsby-node.js file.

Preview

Build/Webpack error

Runtime error

[pelikhan]

Do we need to remove the hot-reload entry gatsby-node.js? Is there a sample for this flag available?

[LekoArts]

The hot-reload entry shouldn't matter as we completely turn that off when the flag is active, however if you see weird behavior, please try removing it and report it here :) Then we can investigate why that might be.

I've added a plugins: [] to the example code, does this give more context on where to place the flag inside gatsby-config.js?

[pelikhan]

Yup, that helps. Mentioning that we can drop hot-reload would help too. Thanks!

[LekoArts]

We've enabled Fast Refresh by default now in version 3.0: https://www.gatsbyjs.com/docs/reference/release-notes/v3.0#fast-refresh

Thanks everyone for testing!