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.

[msalahz]

CRA v5 fixed this issue

[Fosol]

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

[flq]

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

[Manubi]

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.

[flq]

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

I certainly will give it a go, thanks.

[ccyen8358]

Can confirmFAST_REFRESH=false only works on js file changes. When I try to change css file an iframe would just pop up freezing the screen...

[mihanizm56]

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

[corneliugaina]

Why is this closed ?

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

[corneliugaina]

OK solved by adding WDS_SOCKET_PORT=YOURBUILDPORT in package.json, scrips : { build: }
CRA advanced configuration

    "scripts": {
        "start": "WDS_SOCKET_PORT=3000 rimraf ./build && react-scripts start",
        "build": "WDS_SOCKET_PORT=9001 react-scripts --max_old_space_size=4096 build",
        "test": "cross-env CI=true react-scripts test --env=jsdom",
        "eject": "react-scripts eject",
        "lint": "eslint ./src/"
    },

EDIT : oops, forget to mention that I have also downgraded react-scripts to 3.4.4 to make it work. But afterwards, it's a custom issue to my proper specifical case.

[mihanizm56]

OK solved by adding WDS_SOCKET_PORT=YOURBUILDPORT in package.json, scrips : { build: } CRA advanced configuration

    "scripts": {
        "start": "WDS_SOCKET_PORT=3000 rimraf ./build && react-scripts start",
        "build": "WDS_SOCKET_PORT=9001 react-scripts --max_old_space_size=4096 build",
        "test": "cross-env CI=true react-scripts test --env=jsdom",
        "eject": "react-scripts eject",
        "lint": "eslint ./src/"
    },

Why do you use it in build command ?

[corneliugaina]

@mihanizm56 oops, forget to mention that I have also downgraded react-scripts to 3.4.4 to make it work.

I run it with a .NET Core backend project, but there's a temporary fix because the project was initially and somehow bootstraped with the new CRA but an old (legacy 3.4.4) backend CRA configuration.

So the dotnet run need to be customised in my case. Didn't know about it yesterday.

[mihanizm56]

@mihanizm56 oops, forget to mention that I have also downgraded react-scripts to 3.4.4 to make it work.

I run it with a .NET Core backend project, but there's a temporary fix because the project was initially and somehow bootstraped with the new CRA but an old (legacy 3.4.4) backend CRA configuration.

So the dotnet run need to be customised in my case. Didn't know about it yesterday.

Cra v3 works stable without WDS_SOCKET_PORT env in my projects

[corneliugaina]

Yes sure, in my specific case it's just because the project was bootstraped with CRA 5 but the .NET Core build is still configured with CRA3, so I had to find a temporary workaround for now. (react-scripts 5 is still very new so it come with backwards incompatibilities I guess)

[VladimirSlepuhin]

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.

[the-claw]

If you're using ASP.NET Core's "UseReactDevelopmentServer()" function, you will find that CRA5's webpack hot reloader cannot connect to the webpack-dev-server websocket because it determines the wrong port on start-up. You can fix this by setting WDS_SOCKET_PORT to the value of ASPNETCORE_HTTPS_PORT in the start script in package.json, e.g.:

"scripts": {
    "start": "set WDS_SOCKET_PORT=%ASPNETCORE_HTTPS_PORT% && rimraf ./build && react-scripts start",
    "build": "react-scripts build",
    "test": "cross-env CI=true react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint ./src/"
}

This works on Windows, may require some tweaks to work on Linux.

The reason for this failure is that UseReactDevelopmentServer creates a proxy to the actual NodeJS instance that's hosting webpack-dev-server, and loads your app via this proxy. Webpack does not know about the proxy so it injects the wrong websocket port into the scripts for your app. Luckily ASP.NET Core puts its HTTPS port in a convenient environment variable that gets inherited by the child NodeJS process that runs "npm run start".

If you don't use HTTPS in development this won't work for you, but you could probably set your own environment variable to the current HTTP port in Startup.cs before calling UseReactDevelopmentServer.

[niltonxp2]

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.

It worked for me but after uninstalling react-hot-reload :(

[hoangle4]

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

[KayvT]

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

[demedos]

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.

@KayvT did you try the .env trick? I'm on a macOS but with cra and TS it did work

[panpsonis]

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

[balamt]

Nothing mentioned above worked for me

I use WSL2 (Ubuntu) with Windows 10.
using Remote WSL extension to run VSCode.

I have created symlink to my project location to map it under $HOME path of WSL.
So that i can open the folder directly in VSCode as wsl path (Optional)

$HOME/app <= /mnt/e/workspace/app

But I have a strange solution which is working, But not effective solution.

I have to make changes to my application code, then I need to simply comment some lines in package.json
and uncomment the change.
In browser we see error, when we comment.
when we uncomment the error goes, and when we refresh the page it reloads with the changes made in actual code.

Really strange solution!! 🙄
Dependency I use

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

When commented:

When Uncommented:

[dquoctri]

balamt

Really strange solution!! roll_eyes Dependency I use

how funny!

[leonaburime]

How has this not been fixed? I wasted 3 days thinking this was an issue of another UI package that used this as a dependency?

[sashiksu]

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.

[icharge]

@sashiksu

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.

module.hot.accept() is work for me. But it seems like it reload all component on app. :(

[Hinaser]

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.

[ZeraAI]

still facing trouble even after adding .env with FAST_REFRESH=false in it.

please update on a solution