Hot Reload is not working in my React App

user_13372881 0
Viewed 38482

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"
    ]
  }
}
jsx webpack reactjs javascript
13 Answers
user_17379890

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

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.

user_112397550

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

enter image description here

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

user_69389690
user_133728810

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

user_175175890

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

  1. add .env file
  2. add SKIP_PREFLIGHT_CHECK=true in .env file
user_138070330

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.

user_169299780

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!

user_190678440

I tried every solution suggested in these comments and nothing worked for me. I was following a tutorial that used react-router-dom@5.1. 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.

user_61790110

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

user_106866200

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.

user_191022930

I had a hot reload issue when chrome downloaded the update but didn't install it. After installing the update, all problems disappeared

user_174820200
Related