How to get React Fast Refresh to work

[jizusun]

Hi all,

The React Fast Refresh is much better than HMR, and here is

• the tutorial about how to get it work with use-rewire: https://dutzi.party/react-fast-refresh/
• the react issue: How should we set up apps for HMR now that Fast Refresh replaces react-hot-loader? facebook/react#16604

/* config-overrides.js */

const { override } = require('customize-cra')
const { addReactRefresh } = require('customize-cra-react-refresh')

module.exports = override(addReactRefresh({ disableRefreshCheck: true }))

I guess I need to use

• https://github.com/harrysolovay/rescripts/tree/master/packages/rescripts/use-rewire

But I don't know how to write in a rescript way.
Can anyone have a try and help me ?

Thanks so much ❤️

[harrysolovay]

If you look at the customize-cra-react-refresh package, you'll see it makes two changes to your config:

1. the react-refresh/babel Babel plugin is added
2. the @pmmmwh/react-refresh-webpack-plugin plugin is added

After installing these two dependencies, you should be able to do the following:

const {appendWebpackPlugin} = require(@rescripts/utils);
const ReactRefreshPlugin = require("@pmmmwh/react-refresh-webpack-plugin");

const isDevelopment = process.env.NODE_ENV !== "production";

module.exports = [
  ['use-babel-config', '.babelrc'],
  isDevelopment
    ? [appendWebpackPlugin(new ReactRefreshPlugin(...yourOptions))]
    : config => config
]

Finally, specify the react-refresh babel plugin in your .babelrc.

[
  "plugins": [
    "react-app",
    "react-refresh/babel"
  ]
]

Please try this out and let me know if you need more help

[jizusun]

@harrysolovay It works pretty well on a CRA app!
https://github.com/jizusun/react-typescript-fast-refresh/pull/2/files

Thank you for this great project!

By the way, only a small typo in your answer 😄

- const {appendWebpackPlugin} = require(@rescripts/utils);
+ const {appendWebpackPlugin} = require('@rescripts/utilities')

[jizusun]

Hi @harrysolovay Excuse me, but I just found it very strange

• rescripts + react-refresh-webpack-plugin + react-hook-form: doesn't work ❌
  rescripts + react-refresh-webpack-plugin + react-hook-form jizusun/react-typescript-fast-refresh#3
• customize-cra + customize-cra-react-refresh + react-hook-form: works ✅
  customize-cra-react-refresh + react-hook-form jizusun/react-typescript-fast-refresh#5

Maybe I should dive deep into the code, but do you have any guess about why doesn't it work?
My guess is customize-cra-react-refresh use a pretty old react-refresh-webpack-plugin
And how can I try rescripts + customize-cra-react-refresh?

Thanks so much for your help ❤️