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

This does happen sometimes. Do npm install and try adding some code. Then do CTRL+S and check whether the page is updating — Imran Rafiq Rather, Dec 25 '20 at 05:45
Refresh the editor, restart npm, clear cache of your website in the browser and some more steps here and there. Should be fine — Sudhanshu Kumar, Dec 25 '20 at 05:55
You have React-17. Do one thing do these updates in your package.json() and then do npm install, "react": "^16.3.1", "react-dom": "^16.13.1", — Imran Rafiq Rather, Dec 25 '20 at 06:01

score 16 · Answer 1 · edited Jan 11 '22 at 18:44

16

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

edited Jan 11 '22 at 18:44

Tomerikoo

18,379
16
47
61

answered Nov 18 '21 at 09:56

yveszenne

666
8
18

4

This solved my problem on WSL Ubuntu version 2 – damdafayton Aug 10 '22 at 15:53
5

In react-scriptsV5.0.0+ its now `WATCHPACK_POLLING=true` per this answer: https://stackoverflow.com/a/73862566/901311 – sirclesam Mar 20 '23 at 03:25
For React v18.4.* with wsl version2 works that solution. – lohe Mar 24 '23 at 19:42
`WATCHPACK_POLLING=true` worked for me on wsl2 Ubuntu in mounted directory – Sukhmeet Sethi Jul 05 '23 at 08:44
Here from Windows 11 + Ubuntu WSL2 and this works! – dmanexe Jul 22 '23 at 11:35

score 14 · Answer 2 · answered Jul 22 '21 at 12:41

14

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

answered Jul 22 '21 at 12:41

Amit Baderia

4,454
3
27
19

score 13 · Answer 3 · answered Nov 22 '21 at 05:58

13

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

answered Nov 22 '21 at 05:58

Imran Rafiq Rather

7,677
1
16
35

score 8 · Answer 4 · edited Jan 11 '22 at 18:44

8

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.

edited Jan 11 '22 at 18:44

Tomerikoo

18,379
16
47
61

answered May 03 '21 at 22:53

Mike Bendorf

460
6
7

This worked for me, thanks! After initializing with `create-react-app`, then I just renamed `App.js` to `App.jsx`. Now it is hot-reloading. – B. Kaan Feb 23 '22 at 10:12
This is a good solution. Thank you. But what if the faulty file is the autogenerated react-app-env.d.ts? Do I even need this? – samuelnehool Jul 03 '22 at 18:57

score 4 · Answer 5 · answered Dec 25 '20 at 15:31

4

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

answered Dec 25 '20 at 15:31

Mridul Bagla

917
1
5
9

score 2 · Answer 6 · edited Jan 11 '22 at 18:43

2

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

edited Jan 11 '22 at 18:43

Tomerikoo

18,379
16
47
61

answered Jan 11 '22 at 18:37

Sahil Rawat

21
4

score 1 · Answer 7 · edited Sep 17 '21 at 02:49

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.

score 1 · Answer 8 · edited Dec 20 '21 at 15:44

1

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

edited Dec 20 '21 at 15:44

answered Nov 26 '21 at 15:06

user17517589

19
1

2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 26 '21 at 18:43

score 1 · Answer 9 · answered May 08 '22 at 11:09

1

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!

answered May 08 '22 at 11:09

Timothy Agozie

21
1

I'd like to understand why this would be an issue, but this is exactly what was happening to me. I use Windows Subsystem for Linux (WSL) as my main shell, but typically keep all my projects in C:\projects and create a symlink from /projects -> /mnt/c/projects. This was keeping hot reloading from working. Once I moved the projects to a folder on the WSL filesystem then it started working. – Derek Greer Jul 15 '22 at 19:45

score 1 · Answer 10 · answered Jun 26 '22 at 16:06

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.

score 1 · Answer 11 · answered Dec 04 '22 at 12:22

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 https://github.com/facebook/create-react-app/issues/10253#issuecomment-940654613

score 0 · Answer 12 · answered Jul 11 '22 at 02:40

0

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

answered Jul 11 '22 at 02:40

CCCC

5,665
4
41
88

Kate Miller · Answer 13 · 2022-07-30T11:49:24.780

0

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.

edited Jul 30 '22 at 11:49

answered Jul 30 '22 at 11:48

Kate Miller

21
3

score 0 · Answer 14 · answered Sep 04 '22 at 07:23

0

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

answered Sep 04 '22 at 07:23

corvus278

1

score 0 · Answer 15 · answered May 22 '23 at 20:19

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.

score -1 · Answer 16 · edited Dec 20 '22 at 19:15

-1

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

It should be working for hot reloading your application when you save the file code.

edited Dec 20 '22 at 19:15

Saeid Amini

1,313
5
16
26

answered Dec 19 '22 at 06:20

Rashid Latif

1
1

Hot Reload is not working in my React App

16 Answers16

Linked