Created by: phazel
Hot reloading was not working with React "^17.0.1", in my case I had v17.0.2. See Issue #9904 (closed).
Copied from my comment on that issue:
For my system at least, this was down to a minor error of boolean logic in the CRA config.
This is what config/env.js looks like by default for v4 of CRA in Typescript:
// Whether or not react-refresh is enabled.
// react-refresh is not 100% stable at this time,
// which is why it's disabled by default.
// It is defined here so it is available in the webpackHotDevClient.
FAST_REFRESH: process.env.FAST_REFRESH !== 'false',This can never result in FAST_REFRESH being set to false, for two reasons.
Boolean logic
If FAST_REFRESH is undefined, as it will be for most people here, then config/env.js will set it to true, even though the intention here is to set it to false by default. It's just a mistake of boolean logic.
Strings are truthy
If that error were not present, we would still not have FAST_REFRESH disabled by default. The default value is not being set to the boolean value of false, it is being set to the string 'false'. So if evaluated as a boolean, it will be interpreted as truthy, and give a true value.
This is why setting FAST_REFRESH=false in the dotfiles worked for so many people, wheras the disabled-by-default config didn't. They were setting entirely different values. I don't know why it didn't work for everyone, possibly a difference of dependency versions or OS.
Fix
The solution is to convert the environment variable to a boolean before trying to evaluate it as one, and then using a boolean for false instead of a string, and using an OR operator:
FAST_REFRESH: (!!process.env.FAST_REFRESH) || false