Create-react-app: Hot Reload stopped working with React "^17.0.1"

[StewartGF]

Describe the bug

Hot reloading when the redux-state change stopped working when I use CRA to get the last React version. Noticed that it is due to React version and I made a test creating a new react project, as a result the package.json shows

"dependencies": {
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.1",
    "react-scripts": "4.0.0",
    "redux": "^4.0.5",
    "web-vitals": "^0.2.4"
  },

then change it to a previous version of react (copied from an old project)

"dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.1",
    "react-scripts": "3.4.3",
    "redux": "^4.0.5"
  },

And it continue to works as always.

Did you try recovering your dependencies?

yes

Environment

current version of create-react-app: 4.0.0
running from C:\Users\stewa\AppData\Roaming\npmnode_modules\create-react-app

System:
OS: Windows 10 10.0.19041
Binaries:
Node: 12.9.1 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 86.0.4240.111
Edge: Spartan (44.19041.423.0), Chromium (86.0.622.51)
Internet Explorer: 11.0.19041.1
npmPackages:
react: ^17.0.1 => 17.0.1
react-dom: ^17.0.1 => 17.0.1
react-scripts: 4.0.0 => 4.0.0
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

(Write your steps here:)

1. I have a file with a state with this value in my Redux reducer

const initialState = [
  {
    id: Date.now(),
    task: "new todo ",
    completed: false,
  }
];

1. Modify the object in the file to this

const initialState = [
  {
    id: 1,
    task: "new todo ",
    completed: false,
  },
  {
    id:123,
    task: "new todo ",
    completed: false,
  }
];

1. As previous versions of React / CRA the page force a reload, displaying in the page the new object added, but it's not anymore

Expected behavior

Even if you change the text of one of the objects in the reducer it used to reload the page. I'm expecting to see the new state in the page as I save a file when the state change

Actual behavior

Here you can see I saved the file and the page is not showing the new state, and the new data.

Reproducible demo

https://github.com/StewartGF/todo-test

I created this clean project with CRA, it has react v17
You can change the version in the package.json to what I paste in the description and use npm install in order to see the project working as it was working in previous versions.

[FezVrasta]

CRA 4 uses Fast Refresh instead of Hot Reload, the page doesn't reload on file changes.

[martinfrancois]

@FezVrasta Fast refresh is currently opt-in only and you must specify the environment variable FAST_REFRESH, I don't think @StewartGF set it, but it would be good to know whether he did to make sure it's not that.

[StewartGF]

@FezVrasta Fast refresh is currently opt-in only and you must specify the environment variable FAST_REFRESH, I don't think @StewartGF set it, but it would be good to know whether he did to make sure it's not that.

I'm not using Fast refresh, this is a new project. But from what I read about Fast refresh the behaviour seems similar (I've never used it, so im not 100% sure).

Maybe now it's enabled by default and I have to disable it?

[FezVrasta]

fast refresh is enabled by default.

[RosenTomov]

So is hot reloading removed entirely?

I'm having trouble refreshing the app at all, adding or removing components does nothing, I have to manually refresh the page to get the updates.Only the styles update when changed.

I'm using is the config folder and start script from react-scripts, nothing else.

Edit:
Adding

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

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

[Sheparzo]

@RosenTomov hot reloading does not appear to be working from changes to the root index.js. At least that's what I'm seeing in my project and in the unaltered app created from create-react-app. But further down from index.js in a component, hot reloading does appear to be working.

[martinfrancois]

@FezVrasta fast refresh is definitely NOT enabled by default, or I'm not able to read code anymore, have a look: https://github.com/facebook/create-react-app/pull/8582/files
For example, one comment explicitly mentions:

        // Whether or not react-refresh is enabled.
        // react-refresh is not 100% stable at this time,
        // which is why it's disabled by default.

[martinfrancois]

For me, hot reloading (without the FAST_REFRESH flag) also doesn't work, with the FAST_REFRESH flag it works for me.

[FezVrasta]

@FezVrasta fast refresh is definitely NOT enabled by default, or I'm not able to read code anymore, have a look: https://github.com/facebook/create-react-app/pull/8582/files
For example, one comment explicitly mentions:

        // Whether or not react-refresh is enabled.
        // react-refresh is not 100% stable at this time,
        // which is why it's disabled by default.

The comment is outdated, fast refresh is enabled by default, in fact the checks is FAST_REFRESH !== 'false' because they assume any value different than false is going to be true

[lyqline]

npm run start -FAST_REFRESH=true

hot reload working

[bstro]

Fast refresh also doesn't work for me. I have to manually refresh the page to see any updates."react-scripts": "4.0.0", "react-dom": "^17.0.1",, "react": "^17.0.1",

[miladebadi]

It is working in Safari but not working in Chrome and Brave.

[calag4n]

I'm facing the same issue "react-scripts": "4.0.0", "react-dom": "^17.0.1", "react": "^17.0.1",

EDIT: I tried with chrome, firefox and chromium on Pop'Os 20.04 , with and without FAST_REFRESH=true, nothing make it works.

[pavlosmcg]

npm run start -FAST_REFRESH=true

This works on Chrome/Windows 10. Thanks @lyqline 👍🏽

[martinrojas]

I can also confirm that this is happening and that enabling FAST_REFRESH will get some hot reloading, but the concern is that this is not fully backed, but it seems like it's the only option to have hot reloading. Is this really the right answer?

[Nightlights524]

npm run start -FAST_REFRESH=true does NOT work for me on Chrome/MacOS Catalina.

As @Sheparzo mentioned though, the problem seems to be happening only with changes to the root index.js file. With .css & other .js files, hot reload is working fine for me.

[Padavan-itbeard]

Greetings, a solution to the problem is given on the stackoverflow https://stackoverflow.com/questions/42189575/create-react-app-reload-not-working. Tested to Ubuntu 18.04.5 LTS, work