Skip to content

Hot Reload stopped working with React "^17.0.1" #9904

New issue
New issue
Closed
#11105
Closed
Hot Reload stopped working with React "^17.0.1"#9904
#11105
Labels
issue: bug reportissue: needs investigationneeds triage
Milestone
 
5.0
@StewartGF

Description

@StewartGF
StewartGF
opened on Oct 24, 2020

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

alt text

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.

Activity

StewartGF
added
issue: bug report
needs triage
on Oct 24, 2020
FezVrasta

FezVrasta commented on Oct 25, 2020

@FezVrasta
FezVrasta
on Oct 25, 2020
Contributor

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

martinfrancois

martinfrancois commented on Oct 26, 2020

@martinfrancois
martinfrancois
on Oct 26, 2020

@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

StewartGF commented on Oct 26, 2020

@StewartGF
StewartGF
on Oct 26, 2020
Author

@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

FezVrasta commented on Oct 26, 2020

@FezVrasta
FezVrasta
on Oct 26, 2020
Contributor

fast refresh is enabled by default.

RosenTomov

RosenTomov commented on Oct 26, 2020

@RosenTomov
RosenTomov
on Oct 26, 2020 · edited by 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

Sheparzo commented on Oct 26, 2020

@Sheparzo
Sheparzo
on Oct 26, 2020 · edited by 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

martinfrancois commented on Oct 26, 2020

@martinfrancois
martinfrancois
on Oct 26, 2020

@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

martinfrancois commented on Oct 26, 2020

@martinfrancois
martinfrancois
on Oct 26, 2020

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

FezVrasta

FezVrasta commented on Oct 27, 2020

@FezVrasta
FezVrasta
on Oct 27, 2020
Contributor

@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

lyqline commented on Oct 28, 2020

@lyqline
lyqline
on Oct 28, 2020

npm run start -FAST_REFRESH=true

hot reload working

ianschmitz
added this to the 4.0.1 milestone on Oct 28, 2020
bstro

bstro commented on Oct 28, 2020

@bstro
bstro
on Oct 28, 2020 · edited by 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

miladebadi commented on Nov 3, 2020

@miladebadi
miladebadi
on Nov 3, 2020 · edited by miladebadi

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

116 remaining items

the-claw

the-claw commented on Feb 3, 2022

@the-claw
the-claw
on Feb 3, 2022 · edited by 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

niltonxp2 commented on Feb 8, 2022

@niltonxp2
niltonxp2
on Feb 8, 2022

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 :(

ctrlplusb
mentioned this on Feb 9, 2022
hoangle4

hoangle4 commented on Feb 24, 2022

@hoangle4
hoangle4
on Feb 24, 2022

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

KayvT commented on Feb 24, 2022

@KayvT
KayvT
on Feb 24, 2022

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

demedos

demedos commented on Feb 24, 2022

@demedos
demedos
on Feb 24, 2022

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

panpsonis commented on Mar 3, 2022

@panpsonis
panpsonis
on Mar 3, 2022 · edited by 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

balamt commented on Mar 17, 2022

@balamt
balamt
on Mar 17, 2022

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:
image

When Uncommented:
image

dquoctri

dquoctri commented on Apr 21, 2022

@dquoctri
dquoctri
on Apr 21, 2022

balamt

Really strange solution!! roll_eyes Dependency I use

how funny!

leonaburime

leonaburime commented on Jun 14, 2022

@leonaburime
leonaburime
on Jun 14, 2022

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

sashiksu commented on Oct 3, 2022

@sashiksu
sashiksu
on Oct 3, 2022

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

icharge commented on Oct 31, 2022

@icharge
icharge
on Oct 31, 2022 · edited by 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

Hinaser commented on Nov 29, 2022

@Hinaser
Hinaser
on Nov 29, 2022

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.

bot281

bot281 commented on May 1, 2023

@bot281
bot281
on May 1, 2023

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

please update on a solution

zkchong

zkchong commented on Sep 8, 2024

@zkchong
zkchong
on Sep 8, 2024

I have the similar issue in node.js v18.

After some search, discovered it is because I am running node.js with docker in WSL. Hot reloading issues can arise due to how WSL handles file system events.

The issued is solved after I add the two environment variables:

  • WATCHPACK_POLLING=true
  • CHOKIDAR_USEPOLLING=true

The final docker script looks like below:

docker run -it \
    -v "$(pwd)":/app \
    -w /app \
    --network=host \
    -e WATCHPACK_POLLING=true \
    -e CHOKIDAR_USEPOLLING=true \
    node:18 /bin/bash
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    issue: bug reportissue: needs investigationneeds triage

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

      Development

      Participants

      @flq@shorn@martinrojas@iansu@bstro

      Issue actions
        Hot Reload stopped working with React "^17.0.1" · Issue #9904 · facebook/create-react-app