'Hot Reload is not working in my React App

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

Solution 1:^[1]

There was an issue - https://github.com/facebook/create-react-app/issues/9904

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

Solution 2:^[2]

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

Solution 3:^[3]

While 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 = false

After you add the above, you got to restart your server

Solution 4:^[4]

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

Solution 5:^[5]

There 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: https://github.com/facebook/create-react-app/issues/9984

Solution 6:^[6]

If your page is not loading automatically then you have to do these steps:

add .env file
add SKIP_PREFLIGHT_CHECK=true in .env file

Solution 7:^[7]

There is a hot reloading issue for some browsers, with react version 17.

Below is the simplest way to fix this:

Go to package.json and replace react, react-dom and react-scripts dependencies with below:
```
"react": "^16.13.1"  
"react-dom": "^16.13.1"  
"react-scripts": "3.4.3"
```
Delete the node_modules folder.
Run npm install (It will install all the dependencies again)
Start your CRA project with npm start

This will fix the hot reloading issue.

Solution 8:^[8]

Change your file index.js to index.jsx. It worked for me.

Solution 9:^[9]

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!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Amit Baderia
Solution 2	Tomerikoo
Solution 3	Imran Rafiq Rather
Solution 4	Tomerikoo
Solution 5	Mridul Bagla
Solution 6	Tomerikoo
Solution 7	cursorrux
Solution 8	richardec
Solution 9	Timothy Agozie

'Hot Reload is not working in my React App

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]