How to get React Fast Refresh to work about rescripts HOT 3 CLOSED

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

from rescripts.

@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')

from rescripts.

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

• rescripts + react-refresh-webpack-plugin + react-hook-form: doesn't work ❌
  jizusun/react-typescript-fast-refresh#3
• customize-cra + customize-cra-react-refresh + react-hook-form: works ✅
  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 ❤️

from rescripts.