Fast Refresh

[perinazzoo]

Now, fast refresh is enabled by default on CRA, but is there any way to turn this off and use hot reload instead?

[obsius]

I set FAST_REFRESH=false as an env var. This didn't work, but when I changed:

    // from
    const hasReactRefresh = process.env.FAST_REFRESH !== 'false';

    // to
    const hasReactRefresh = process.env.FAST_REFRESH !== false;

on line 246 of react-dev-utils\webpackHotDevClient.js it worked.

[faouzioudouh]

@obsius so you can set FAST_REFRESH='false'
And then you don't have to change anything else.

[obsius]

@faouzioudouh

That didn't work for me, it's always a boolean by that point, probably because of this:

        // 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',

in config/env.js.

[RosenTomov]

I'm having trouble refreshing the app at all, adding and removing components does nothing, only the styles update when changed.
I tried passing false, but it didn't help. Didn't they replace hot reload entirely with fast refresh?

Edit:
Adding

    [
      "react-app",
      {
        "runtime": "automatic"
      }
    ]

in babel presets, solved the issue. Now the app reloads properly.

[martinfrancois]

@perinazzoo I don't know why so many people believe it's enabled by default, in fact fast refresh is NOT enabled by default!
See here:

create-react-app/packages/react-scripts/config/env.js

Line 98 in 5bd6e73

// which is why it's disabled by default.

[obsius]

@martinfrancois

The comment might say that, but if I don't set FAST_REFRESH as an env variable, it ends up as undefined which evaluates in that line to true.

[martinfrancois]

@obsius so that's a bug then?

[obsius]

@martinfrancois

Perhaps, else the comment is outdated?

[n3tr]

@martinfrancois

Perhaps, else the comment is outdated?

Yes, the comment is probably outdated (per #9350)

[jbaileyashe]

Edit:
Adding

    [
      "react-app",
      {
        "runtime": "automatic"
      }
    ]

in babel presets, solved the issue. Now the app reloads properly.

@RosenTomov when you say 'babel presets', what file are referring to? I'd like to try this fix myself.

[lkarmelo]

When i update App.tsx component code, it usually updates page with latest changes, but sometimes it doesn't. When i change css, it picks up update nicely. But when i change any code oitside of css or components, browser console displays all new warnings, indicating it receiver new code, but the page doesn't reload and changes don't apply. In all cases code recompiles, so it's not watcher problem.

[dwiyatci]

When i update App.tsx component code, it usually updates page with latest changes, but sometimes it doesn't. When i change css, it picks up update nicely. But when i change any code oitside of css or components, browser console displays all new warnings, indicating it receiver new code, but the page doesn't reload and changes don't apply. In all cases code recompiles, so it's not watcher problem.

👆 Second this. Pretty much the same issue here 😕

[osadchiynikita]

+1 setting FAST_REFRESH=false to the .env doesn't help

In addition: Fast Refresh re/compilation time in CRA 4 TS 4 project is very very very slow...

UPD. It's slow due to eslint cache missing in webpack dev config, should be fixed in the CRA 4.0.1 - https://github.com/facebook/create-react-app/milestone/78

[redders6600]

Same issue as @lkarmelo and @dwiyatci - did either of you find a workaround for this?

[dwiyatci]

@redders6600 Yes, I rolled back to v3.4.4 haha. But I guess you could as well try this now: https://github.com/facebook/create-react-app/releases/tag/v4.0.1 by setting FAST_REFRESH=false.

[lkarmelo]

@redders6600 They released react-scripts version 4.0.1 recently and fixed issue, now FAST_REFRESH=false works

[raghavsurya]

Doesn't work for me even with FAST_REFRESH=false in .env file :(

[rodrigocode4]

This is a problem with inotify, which observes file system events, individual files or directories, in linux of course.

The help would be:

1. insert the new value into the system config
   echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

2. check that the new value was applied
   cat /proc/sys/fs/inotify/max_user_watches

3. config variable name (not runnable)
   fs.inotify.max_user_watches=524288