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

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.

fast refresh is enabled by default.

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.

npm run start -FAST_REFRESH=true

hot reload working

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

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

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

Modify your react-scripts line (package.json) like so:

"start": "FAST_REFRESH=false react-scripts start"

Advantage: .env is not checked into version control but package.json is.

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

Hi folks. I’ve solved this issue in my above comment, explained it in detail, and created a PR to fix it. That PR will go stale in 5 days. Not really sure what else to do from here if the maintainers aren’t interested in solving the problem. If the maintainers would be more interested in a PR from someone with a more masculine name I’d be happy to temporarily alter my profile to facilitate their comfort.

Why is this closed ?

Still not working with CRA5 ? w/ Ubuntu 20.04.3 LTS Tried everything above.

A summary of this very long and confusing thread for anyone coming in:

• CRA used to use something called “Hot Reload.”
• CRA v4 switched to “Fast Refresh”.

Fast refresh can update some components without reloading the whole page, unlike hot reload, which reloads the whole app every time you make any change. (With the exception of CSS, I think.) The downside of Fast Refresh is that, for some changes (I’m going to hazard a guess - changes that would actually require a reload to implement?), it won’t implement them, and won’t tell you it hasn’t, either. So you have to manually refresh or, I’ve found, manually restart the development server to see all changes. This can outweigh the convenience of Fast Refresh in many cases.

So, if you’d like to revert to Hot Reload behavior, create a .env file in the root folder of your project, and add

FAST_REFRESH=false

to it. (You may also add this in your shell instead, if you’d like to adjust the behavior on a case-by-case basis). Make sure to close any running development server, and restart. If that doesn’t work, check to make sure you have the latest version of CRA, not 4.0.0 but 4.0.1; search react-scripts in your project’s package.json file to see. If you need to upgrade, npm i --save react-scripts..

I’m using WSL, you can create a .env file and just put

CHOKIDAR_USEPOLLING=true

Or in your package.json

....
scripts:{
"start": "CHOKIDAR_USEPOLLING=true react-scripts start",
....

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.

Im getting the same problem. Just wanted to let the devs know that they can add one more person to list. Im using the following: “react”: “^17.0.2”, “react-dom”: “^17.0.2”, “react-scripts”: “4.0.3”,

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.

I had the same issue with WSL2. .env with the content of CHOKIDAR_USEPOLLING=true helped.

I’m using WSL, you can create a .env file and just put

CHOKIDAR_USEPOLLING=true

Or in your package.json

....
scripts:{
"start": "CHOKIDAR_USEPOLLING=true react-scripts start",
....

THANK you. You mentioning wsl made me try and it works. I had this problem for 2 days now.

"start": "CHOKIDAR_USEPOLLING=true react-scripts start",

Hi folks. I’ve solved this issue in my above comment, explained it in detail, and created a PR to fix it. That PR will go stale in 5 days. Not really sure what else to do from here if the maintainers aren’t interested in solving the problem. If the maintainers would be more interested in a PR from someone with a more masculine name I’d be happy to temporarily alter my profile to facilitate their comfort.

When will be the next release?)))

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"
  },

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

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.

Using Windows 10, WSL 2, TypeScript, React 17.0.1… nothing from the above worked for me… anyone managed to make this work?

This still doesn’t work for me.

package.json

...
"dependencies": {
    "@headlessui/react": "1.4.2",
    "@reduxjs/toolkit": "1.7.1",
    "@szhsin/react-menu": "2.3.0",
    "axios": "0.24.0",
    "axios-mock-adapter": "1.20.0",
    "formik": "2.2.9",
    "history": "5.2.0",
    "http-proxy-middleware": "2.0.1",
    "jwt-decode": "3.1.2",
    "lodash": "4.17.21",
    "lodash.throttle": "4.1.1",
    "moment": "2.29.1",
    "moment-timezone": "0.5.34",
    "react": "17.0.2",
    "react-cookie": "4.1.1",
    "react-datepicker": "4.5.0",
    "react-dom": "17.0.2",
    "react-error-boundary": "3.1.4",
    "react-icons": "4.3.1",
    "react-inlinesvg": "2.3.0",
    "react-is": "17.0.2",
    "react-redux": "7.2.6",
    "react-redux-loading-bar": "5.0.2",
    "react-router-dom": "6.2.1",
    "react-scripts": "5.0.0",
    "react-table": "7.7.0",
    "react-toastify": "8.1.0",
    "react-tooltip": "4.2.21",
    "redux": "4.1.2",
    "redux-logger": "3.0.6",
    "styled-components": "5.3.3",
    "yup": "0.32.11"
  },
  "devDependencies": {
    "@testing-library/dom": "8.11.1",
    "@testing-library/jest-dom": "5.16.1",
    "@testing-library/react": "12.1.2",
    "@testing-library/user-event": "13.5.0",
    "@types/customize-cra": "1.0.2",
    "@types/history": "4.7.9",
    "@types/jest": "27.4.0",
    "@types/lodash.throttle": "4.1.6",
    "@types/node": "17.0.5",
    "@types/pretty": "2.0.1",
    "@types/react": "17.0.38",
    "@types/react-dom": "17.0.11",
    "@types/react-redux": "7.1.21",
    "@types/react-router-dom": "5.3.2",
    "@types/react-table": "7.7.9",
    "@types/redux-logger": "3.0.9",
    "@types/styled-components": "5.1.19",
    "@types/yup": "0.29.13",
    "@typescript-eslint/eslint-plugin": "^5.8.1",
    "@typescript-eslint/parser": "^5.8.1",
    "axios-mock-adapter": "1.20.0",
    "compression-webpack-plugin": "9.2.0",
    "cpy-cli": "3.1.1",
    "cross-env": "7.0.3",
    "customize-cra": "1.0.0",
    "del-cli": "4.0.1",
    "eslint": "8.5.0",
    "eslint-config-prettier": "8.3.0",
    "eslint-config-standard": "16.0.3",
    "eslint-plugin-import": "2.25.3",
    "eslint-plugin-node": "11.1.0",
    "eslint-plugin-prettier": "4.0.0",
    "eslint-plugin-promise": "6.0.0",
    "eslint-plugin-react": "7.28.0",
    "eslint-plugin-react-hooks": "4.3.0",
    "eslint-plugin-simple-import-sort": "7.0.0",
    "husky": "7.0.4",
    "lint-staged": "12.1.4",
    "prettier": "2.5.1",
    "pretty": "2.0.0",
    "pretty-quick": "3.1.3",
    "sass": "1.45.1",
    "sass-extract": "2.1.0",
    "sass-extract-js": "0.4.0",
    "sass-extract-loader": "1.1.0",
    "ts-loader": "9.2.6",
    "typescript": "4.5.4"
  },
  "peerDependencies": {},
  "resolutions": {
    "react-error-overlay": "6.0.9"
  },
  ...

I don’t understand why is this issue closed. All the solutions on this thread are hacky and don’t actually work. FAST_FRESH=false in an.env file works for javascript files but not for .css files. When I change .css files there’s an iframe covering the html and preventing any interaction with the page.

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

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.

FAST_REFRESH=false is working on BigSure 11.2.2, React ^17.0.1

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

FAST_REFRESH=false should work

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

For anyone that have React sits on a remote dev server, I have a pull request here which you could modify the react-scripts package if you’d like to. https://github.com/facebook/create-react-app/pull/12091

almost 1.5 years awaiting for issue fix to upgrade from stable cra3 =) seems like this issue should be reopened

This still doesn’t work… I’m using Docker Desktop for Windows, with WSL 2. I have to rebuild the docker container to get it to update… Refreshing the page doesn’t even do it…

The point is not that we’re lacking solutions, but that it should work out of the box.

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

Just to add another voice to the ever growing list of people using Ubuntu 20.04. Fast refresh doesn’t work at all in a brand new CRA app installed two days ago. Adding FAST_REFRESH=false works but that seems to cause the whole page to reload (can’t tell, it’s rather quick).

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

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.

Had a same problem after upgrading to CRA 5.0. Project uses .NET Core as backend and UseProxyToSpaDevelopmentServer as a poxy. Project have a homepage setting in package.json: "homepage": "arm/" and .env file with WDS_SOCKET_PATH=arm/sockjs-node

After upgrading to CRA 5.0 WebSocket used for hot reloading could not be established, and after comparing with fresh new React project created with CRA 5.0 it figured out that a URL changed from /sockjs-node to /ws. Fixing .env with WDS_SOCKET_PATH=ws fixed the issue with hot reloading.

WITH CRA5 Fast refresh simply stopped working for me, fantastic. Where should I start looking into?

Same with me. Just migrated to Vite.js. Recommend the same.

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

As suggested in https://stackoverflow.com/a/68257526/621659:

• create .env file in your root folder of the project
• and put there FAST_REFRESH=false ?!

Worked for me on Ubuntu 20.04.2 LTS and React 17.

Here’s how I fixed fast refresh for my VM, running in VirtualBox.

In your .env, add:

CHOKIDAR_USEPOLLING=true

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.

npm run start -FAST_REFRESH=true

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

@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

I was troubled by this issue but after I disabled why-did-you-render, hot reload has begun to work again. My environment: React 18 & CRA5 If you have some npm dependencies which patches/modifies/replaces original React code, try to disable them and see the result.

I face this issue with react app structured from scratch with webpack. So I have to mention below code snippest in the index.js file. if (module.hot) { module.hot.accept(); } Additional info about my setup,

• My start command is webpack-dev-server no additional arguments.
• I used HotModuleReplacementPlugin in webpack config.
• Set hotOnly:true in devServer block.

For anyone that have React sits on a remote dev server, I have a pull request here which you could modify the react-scripts package if you’d like to. #12091

To anyone working with Vagrant…

Just setup a new React app and this was the only way I managed to get webpack to capture changes and recompile. “CHOKIDAR_USEPOLLING=true” did not work for me or any other suggestions.

I merged the changes submitted by @hoangle4 in #12091 and then created a .env file with the following option: WDS_POLLING=true

My setup: ubuntu/focal64 Vagrant box with VirtualBox under Windows 11

  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.3",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },

@RenanZX At first it worked, but after some time stop working. I solve this problem with FAST_REFRESH=false in .env temporary and looking for best solution.

Still an issue to me. I am creating a blank cra application using the typescript template

npx create-react-app my-app --template typescript

but after removing all the boilerplate in App.tsx it doesn’t work anymore. I can see the terminal window re-compiling on save, but the browser just doesn’t refresh anymore.

The only way I can get around this is by creating the .env file with FAST_REFRESH=false in it, but it’s a sub-optimal solution.

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

That is the correct answer!! Just put the logic code elsewhere, index.js is only responsible for quoting. Use FAST_REFRESH=false, hot reload will become fast refresh.I think hot reload is better

I can confirm hot-reloading still doesn’t work on Ubuntu 20 LTS, on VirtualBox.

Still forced to keep fast refresh disabled, in order to do any kind of development.

Can someone from the React team confirm if @phazel’s patch passes tests and solves the issue?

Creating the .env file with FAST_REFRESH=false is no use since the whole page is reloaded even clearing the current state. Using FAST_REFRESH=true in the .env is not working either. Only style changes are reloaded, not even texts reload. This “incompatibility issue” seems like a huge step backwards compared to the old approach using hot reload…

In my case it works in Safari, but not in Chrome, Im using FAST_REFRESH=false

It seems that the issue is in Chrome, closing and opening the browser fixes the issue.

For anyone else running into this issue who still hasn’t been able to solve it with everything above, if while updating to/installing React 17 you also updated to/installed Webpack 5 and are using webpack-dev-server, see the footnote of this troubleshooting guide for what finally solved the issue for me.

(Tldr; add target: 'web' to your development webpack config).

https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/TROUBLESHOOTING.md

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

FAST_REFRESH=false should work

It worked for me, even when I make changes on the index.js files, thank you

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

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.

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

This thread is totally confused. My conclusion,

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

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.

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.

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

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

@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?