Hot Reload is not working in my React App

Question

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

Answer 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

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

Answer 3

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.

Answer 4

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