I have created this app with npx create-react-app. After this i have deleted all the files except index.js in src folder. Then Hot reload is not working. I have go to chrome and manually refreshing the page for see changes. This is my index.js file.
import React from 'react';
import ReactDom from 'react-dom';
function Greeting() { return ( <div> <h1>hello World</h1> <ul> <li>Click Here</li> </ul> </div> );
}
ReactDom.render(<Greeting />, document.getElementById('root'));Package.json file
{ "name": "tutorial", "version": "0.1.0", "private": true, "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" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }
}16 Answers
To solve the problem in hot reloading/fast_refresh I simply add CHOKIDAR_USEPOLLING=true in package.json:
"scripts": { "start": "CHOKIDAR_USEPOLLING=true react-scripts start", //add this line "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject"
}There was an issue -
A workaround is putting below code in index.js to enable reloading
if (module.hot) { module.hot.accept();
}you must restart your server after making this change
0While the above solutions are also beneficial, One other way that worked for most people is creating a .env folder in your Project.
And use the following Property there.
FAST_REFRESH = falseAfter you add the above, you got to restart your server
0This could be due to your filesystem, file extensions or the Create-React-App default webpack/project configuration. You don't necessarily have to change all of this because hot-reloading is supposed to work out of the box, and more so if the project has just started.
For example, I once had an issue with a Typescript installation(^17.0.1) where some files with extension .ts will not trigger hot reloading. I had to change to .tsx and add a React import. The same could happen with .js and .jsx files.
In case of problems with your filesystem (Unix, Mac) you can try the React config (FAST_REFRESH=false) here... or changing folder names, but I haven't bumped much into this.
2There were a problem with react-scripts version 4.0.1 in package.json file. I have replaced it with 'react-scripts' : '3.4.4' and Now its working. for more info:
If your page is not loading automatically then you have to do these steps:
- add
.envfile - add
SKIP_PREFLIGHT_CHECK=truein.envfile
There is a hot reloading issue for some browsers, with react version 17.
Below is the simplest way to fix this:
Go to
package.jsonand replace react,react-domandreact-scriptsdependencies with below:"react": "^16.13.1" "react-dom": "^16.13.1" "react-scripts": "3.4.3"Delete the
node_modulesfolder.Run
npm install(It will install all the dependencies again)Start your CRA project with
npm start
This will fix the hot reloading issue.
Change your file index.js to index.jsx. It worked for me.
Just incase you've tried everything with no solution, make sure you're working on your computer's drive and not saving your project on an external drive. This was my issue, I simply moved the project to my computer's drive and it worked perfectly. Happy coding guys!
1I tried every solution suggested in these comments and nothing worked for me. I was following a tutorial that used [email protected]. Nothing worked at all including both .env suggestions, the react-scripts suggestion, or the CHOKIDAR_USEPOLLING suggestion. I even switched between npm and yarn to see if one or the other was causing the issue.
The only thing that worked for me was using yarn add react-router-dom for the latest version without any specific version attached, and instead of a Switch using the new Routes component listed in the version 6 quick start. Now it works great with zero issue.
I've faced the same problem using wsl2 with Ubuntu-22.04 and I solve it by moving my project from my mounted windows drive (/mnt/c) to /home directory into my wsl distro. Once done, it work perfectly and much faster !
To do it with your windows file explorer, you can found your distro files under \\wsl$ path. So basically for me it was under \\wsl$\Ubuntu-22.04\home.
I've found this solution through this thread
I tried all suggestions above but not working.
Finally I've found that the reason is because of some eslint rules are violated and make the application Failed to Compile.
After I fix the rules in eslintrc.json it works
Nothing of the above helped me, as soon as i was running dev server on wsl 22.02. But when i started it with git bash, it worked.
I had a hot reload issue when chrome downloaded the update but didn't install it. After installing the update, all problems disappeared
- Change the react-script version to 4.0.3 inside package.json
- Add this to package.json below the dependencies "resolutions": { "react-error-overlay": "6.0.9" },
- Install react-error-overlay v6.0.9 inside your devDependencies
- Remove node_modules & package-lock.json
- Do npm install and check that works.
I got the same problem when I was implementing the code in my .env file
Go into your .env file and paste this line:
FAST_REFRESH = falseIt should be working for hot reloading your application when you save the file code.
