Hot Reload stopped working with React "^17.0.1" #9904
Comments
|
CRA 4 uses Fast Refresh instead of Hot Reload, the page doesn't reload on file changes. |
|
@FezVrasta Fast refresh is currently opt-in only and you must specify the environment variable |
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? |
|
fast refresh is enabled by default. |
|
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: in babel presets, solved the issue. Now the app reloads properly. |
|
@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. |
|
@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 me, hot reloading (without the |
The comment is outdated, fast refresh is enabled by default, in fact the checks is |
|
npm run start -FAST_REFRESH=true hot reload working |
|
Fast refresh also doesn't work for me. I have to manually refresh the page to see any updates. |
|
It is working in Safari but not working in Chrome and Brave. |
|
I'm facing the same issue EDIT: I tried with chrome, firefox and chromium on Pop'Os 20.04 , with and without FAST_REFRESH=true, nothing make it works. |
This works on Chrome/Windows 10. Thanks @lyqline 👍🏽 |
|
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? |
|
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. |
|
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 |
|
Just duplicated an older project and updated the packages to c-r-a 4.0.1, react 17.0.1, typescript 4.1.2. Browser was not updating when code was changed. Added |
|
It looks like the issue is in See here - when |
|
PS: env setting is read from |
|
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 |
Thank you! Creating a .env file and adding |
|
same here |
|
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. |
|
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"
},
... |
|
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. |
I certainly will give it a go, thanks. |
|
Can confirm |
|
almost 1.5 years awaiting for issue fix to upgrade from stable cra3 =) |
|
Why is this closed ? Still not working with CRA5 ? w/ Ubuntu 20.04.3 LTS |
|
OK solved by adding WDS_SOCKET_PORT=YOURBUILDPORT in package.json, scrips : { build: } 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. |
Why do you use it in build command ? |
|
@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 |
|
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) |
|
Had a same problem after upgrading to CRA 5.0. 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 |
|
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. |
It worked for me but after uninstalling react-hot-reload :( |
|
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. |
|
Using Windows 10, WSL 2, TypeScript, React 17.0.1.. nothing from the above worked for me.. anyone managed to make this work? |
@KayvT did you try the .env trick? I'm on a macOS but with cra and TS it did work |
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. I merged the changes submitted by @hoangle4 in #12091 and then created a .env file with the following option: My setup: |
|
Nothing mentioned above worked for me I use WSL2 (Ubuntu) with Windows 10. I have created symlink to my project location to map it under $HOME path of WSL. 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 Really strange solution!! 🙄 When commented: When Uncommented: |
how funny! |
|
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? |
|
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.
|
|
|
I was troubled by this issue but after I disabled |
|
still facing trouble even after adding .env with please update on a solution |
|
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:
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 |
and others
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
then change it to a previous version of react (copied from an old project)
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:)
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 installin order to see the project working as it was working in previous versions.The text was updated successfully, but these errors were encountered: