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\npm\node_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,
   }
   ];

2. Modify the object in the file to this

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

3. 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

[shorn]

Just duplicated an older project and updated the packages to c-r-a 4.0.1, react 17.0.1, typescript 4.1.2. Running in Firefox on Windows 8.1.

Browser was not updating when code was changed.

Added FAST_REFRESH=true to .env, restarted the node process - browser now updates automatically when code is changed.

[sizov]

It looks like the issue is in react-hot-loader. It relies on React internal API which is no longer available in React 17: instance._reactInternalFiber.

See here - when react-hot-loader detects changes and tries to figure out what to re-render (getReactStack =>getInternalInstance), it tries to read instance._reactInternalFiber, but it's not available in React 17 anymore because of this PR. I've changed react-hot-loader locally and this resolves the issue. So react-hot-loader has to be fixed

[EdmundsEcho]

console.dir(process.env); placed at the root of the app will confirm right away whether FAST_REFRESH and other settings are set.

PS: env setting is read from .env file located in the root of the project. To be sure the new settings are implemented, the app needs to be restarted. The app is not expected to re-read the .env file upon changes a la "fast-refresh".

[NicolasCharpentier]

I am not sure everyone is having the same problem.

For me, when i have nothing on .env or FAST_REFRESH=true, i will get the fast refreshes for components change, but other files changes will not reload the page, despite my console showing that it recompiled.

When i have FAST_FRESH=false, everything is hot-reloading and everything works.

[fast-reflexes]

I am not sure everyone is having the same problem.

For me, when i have nothing on .env or FAST_REFRESH=true, i will get the fast refreshes for components change, but other files changes will not reload the page, despite my console showing that it recompiled.

When i have FAST_FRESH=false, everything is hot-reloading and everything works.

Worked! With React 17.0.1 and react-scripts 4.0.0 and with FAST_REFRESH=true (default) changes to components are reflected seemlessly, but changes to other dependencies are not reflected in the UI at all without manual refresh, despite obvious recompilation in the console. Setting the flag to false in .env didn't change anything but when I updated to react-scripts 4.0.1 setting FAST_REFRESH=false in .env brought back the hot reload.

[lilianasummers]

For me, when i have nothing on .env or FAST_REFRESH=true, i will get the fast refreshes for components change, but other files changes will not reload the page, despite my console showing that it recompiled.

Thank you! Creating a .env file and adding FAST_REFRESH=false to my project root fixed my issue of hot-reloading not working on Windows 10

[rediska1114]

same here

[brense]

FAST_REFRESH=true/false does not work for me (create-react-app v4.0.1). I see the app recompiling, and something appears to be happening in my browser (I see a scrollbar for a milisecond) but no actual component rerender. Tested in Chrome and Firefox on Windows 10.

[NicolasCharpentier]

@brense please ensure you do kill the "npm start" process between each .env change.

FAST_REFRESH=false should work

[brense]

This appears related to https://github.com/facebook/create-react-app/issues/10078 It says its merged into v4.0.1. I just checked, I mistakenly thought I was on v4.0.1. but it appears I was on v4.0.0. I updated and now FAST_REFRESH=false in the .env file appears to be working. Apologies for the confusion.

[Kerry-Jr]

Where exactly can I find the FAST_REFRESH option so I can change it. I console.dir(process.env) and see it. How can I change it? If I need to find that file or another file please show me the way. Thanks for the help !

[brense]

You just create your own .env file in the root of your project (where the package.json is) and put FAST_REFRESH=false in it

[Kerry-Jr]

Thank you Brense

[JaMoLpE88]

Is anyone working on fixing it so that hot reload works correctly on all files in the project?

[amaralis]

Is anyone working on fixing it so that hot reload works correctly on all files in the project?

Did you notice it not working on any specific files? So far, with react 17.0.1 and react-scripts 4.0.1, FAST_REFRESH=false in a .env file has fixed the issue for me on a Windows 10 machine using Firefox. If there are some instances where you saw it failing, I'd appreciate it if you shared. Cheers!

[JaMoLpE88]

Is anyone working on fixing it so that hot reload works correctly on all files in the project?

Did you notice it not working on any specific files? So far, with react 17.0.1 and react-scripts 4.0.1, FAST_REFRESH=false in a .env file has fixed the issue for me on a Windows 10 machine using Firefox. If there are some instances where you saw it failing, I'd appreciate it if you shared. Cheers!

I have not tried creating the .env folder with "FAST_REFRESH = false", but leaving everything by default, with an "npx create-react-app my-app" and entering the project from VSC, starting the server with an "npm start", removing all the files from "src" and creating new files, when I save the changes it does not refresh in Chrome. You can see from the inspector how it does try to refresh and change the colors of the elements of the inspector, on the other hand, if you do not press F5 or Ctrl + F5 it does not refresh the content in the browser. Tested as of yesterday.

[PeterHueer]

Autorefresh on change only works in Firefox for me... I've also upgrade my react-scripts package from ^4.0.0 to 4.0.1. FAST_REFRESH=false doesnt work for me... Chrome has still problems with auto refresh...

EDIT: FAST_REFRESH=false or true , both working fine in Firefox. Why chrome has problems ?

[tonix-tuft]

Adding FAST_REFRESH=false to .env or .env.development works for me on OS X using react-scripts 4.0.1, thank you @brense!

[eatcodesforlife]

creating your own .env file and putting FAST_REFRESH=false in it works! I am on windows 10, "react": "^17.0.1" and "react-scripts": "4.0.1" and chrome for my browser. Thanks, @NicolasCharpentier, @brense, and everyone else.

[danju4rizzl]

I also experienced this issue but after creating a new project with parcel instead of webpack everything works perfectly. Hope this helps.

FYI you can use: CreateApp Frontend build config generator to quickly get things setup.

[ndhanh96]

create .env file and add FAST_REFRESH=false is also works for me. thank you @brense , i just start learning reactjs and it's already confusing.

[alakapaka]

npm run start -FAST_REFRESH=true

hot reload working

that works for me. thanks @lyqline!

[devhyunjae]

This thread is totally confused. My conclusion,

nothing => nothing
FAST_REFRESH=false => live reloading
FAST_REFRESH=true  => hot reloading

[MerinoGitHb]

1. Create .env file
2. Add FAST_REFRESH=false

Works for me on windows 10, react: 17.0.1 - react-dom: 17.0.1 - react-scripts: 4.0.1 and chrome for my browser.

[mhajdu-dev]

Thanks anybody who advised the .env file with FAST_REFRESH=false My tip: dont forget to create the .env file outside for your src folder

windows 10, react: 17.0.1 - react-dom: 17.0.1 - react-scripts: 4.0.1 chrome/firefox

[celalettin-turgut]

creating .env file in root and adding FAST_REFRESH=false doesnt work for me both in Chrome and Firefox. When I save the changes in index.js, vsc terminal is compiling the changes and it takes almost 10 seconds.. And then I can see the changes in browser

[yasir-a]

issue still persist...it takes few seconds to hot reload

[danimal-johnson]

Update: solved (for me, anyway)

Cause: Windows Update changed the WSL2 filesystem behavior. File changes can't be detected when they are stored in the Windows file system. I was running my projects in ~/windows_dir_link/projects/. (Equivalent to /mnt/c/Users/Dan/Documents/.)

Solution: I moved my projects to a directory that isn't linked to a Windows folder. Using ~/projects/ avoids the filesystem translation layer and allows all changes to be detected. React is now working with the new FAST_REFRESH feature. As an added bonus, file access is an order of magnitude faster as well.

Original post follows These fixes haven't worked for me. Windows 10 version 20H2 (build 19042.746). WSL2 Ubuntu. Linux Bigbox 4.19.128-microsoft-standard #1 SMP Tue Jun 23 12:58:10 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux

I've tried setting FAST_REFRESH to both true and false in:

• The .env file
• the environment variable using export and set
• the start scripts line ("start": "react-scripts start -FAST_REFRESH=false")
• appending it to the command line: npm run start -FAST_REFRESH=false (also with yarn)

The biggest clue is that the terminal output never shows a recompile whether I edit App.js or a component file. The browser console has a single line [HMR] Waiting for update signal from WDS.... Webpack reports that it disconnects when I kill the server.

Edited to include the dependency versions:

"dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "^4.0.1",
    "web-vitals": "^0.2.4"
  },

[brense]

Make absolutely sure that you have react scripts version 4.0.1 or higher, in package.json it should show: "react-scripts": "^4.0.1" If that is not the case, execute npm i --save react-scripts.

[celalettin-turgut]

When I saved the changes in files except index.js, it compiled and refreshed the page in seconds. But in index.js, it compiled but didn't refresh the page. I have finally solved the problem as follows; 1)In package.json change to 'react-scripts':'3.4.4' 2) Delete package-lock.json 3) rm -rf node_modules 4) npm install 5) npm start

You don't have to change react and react-dom version. It works now just fine.

Secondly, I have switched from Windows 10 to Ubuntu. I don't have to apply these steps anymore. It works in Ubuntu without problem

[brense]

You should never delete your package-lock unless there's a merge conflict in it. If you change your react-scripts version to ^4.0.1, it will work as well and you will be on the latest version :) Executing npm i --save react-scripts should fix this for you. Stop and restart your app. If it still doesnt work, delete your node_modules and run npm i again.

[Leeoku]

While I'm sure this is probably true for WSL 2 users shown here , an alternative I have found while still having my project in the /mnt (so windows file system instead of WSL2 system), follow this SO link

React: 17.0.1
React-Scripts 4.0.1
Command: CHOKIDAR_USEPOLLING=true npm start

[joe-oli]

If that is not the case, execute npm i --save react-scripts.

I am on react / react-dom v16.13.1 and I only upgraded to "react-scripts": "^4.0.1" because npm audit told me to fix a security vulnerability. So my combo is v16.13.1 and react-scripts 4.0.1 and my pages are not reloading/refreshing, even though the server is re-starting I can see the Cmd prompt restarts (I'm on Windows 10).

EDIT: Actually I can see that the Components are being remounted, it is only the index.html that is not being refreshed, I have to resort to a hard-refresh everytime., Not so good if one has code that needs to run within index.html Githubissues.

Githubissues is a development platform for aggregating issues.