Create react app, reload not working

Year 2021

I had this issue in react ^17.0.2 I fixed it by adding a .env file and setting FAST_REFRESH=false. Just create a .env file in the root directory of your project and add FAST_REFRESH=false in the file.

For Ubuntu users, run this in the terminal:

sudo gedit /etc/sysctl.conf

Scroll to the bottom and paste:

fs.inotify.max_user_watches=524288

Save and close the editor, then run this:

sudo sysctl -p

To check your success:

cat /proc/sys/fs/inotify/max_user_watches

This should return 524288

by apsrcreatix

Ref: https://github.com/flathub/com.visualstudio.code/issues/29#issuecomment-477126012

I had the same problem in Ubuntu.

The problem was resolved by deleting node_modules and then run

yarn install // or npm install

I hope to save someone else the same pain I experienced.

I'm using Windows 10 and Ubuntu 20.04 WSL, with nvm to manage node/npm.

I had to:

• Use Node v16.14.2 in nvm (which also uses npm 8.5.0)
• Change react-scripts from "react-scripts": "5.0.0" to "react-scripts": "4.0.3" in my package.json file
• Change my package.json start script to

   "start": "CHOKIDAR_USEPOLLING=true react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"

• I then ran npm install to update react scripts and restarted the bash terminal

• I also followed Ronald Araújo's advice in his answer for good measure.

5 hours later, it's finally working!

Good luck everyone!

There actually is solution to get Fast refresh working.

Use this patch https://github.com/facebook/create-react-app/pull/11105/files From @pmmmwh

Use https://www.npmjs.com/package/patch-package for editing your dependencies.

1. install patch-package (via npm or yarn into your project)
   • npm: npm i patch-package
   • yarn: yarn add patch-package postinstall-postinstall
2. Edit package.json and add postinstall script

   "scripts": {
   +  "postinstall": "patch-package"
   }
   

3. Edit file YOUR_PROJECT/node_modules/react-dev-utils/webpackHotDevClient.js - with changes introduced in github pull request above
4. run npx patch-package react-dev-utils
5. commit changes created by this script (e.q. ./patches/react-dev-utils+11.0.4.patch)
6. run your app, now it will refresh on changes

Or wait for new release of react-dev-utils (it is not yet released, last version @11.0.3 doesn't contain this update).

What worked well for me is setting WATCHPACK_POLLING to true. Simply, update your package.json with:

"start": "WATCHPACK_POLLING=true react-scripts start"

in the scripts section.

My hot reload in Create React app broke due to updating some packages (probably because of typescript). I had to solve it without the ejecting of CRA.

I managed to fix it by upgrading to version 16.10 of these packages:

"react": "^16.10.0",
"react-dom": "^16.10.0"

And it worked just fine!

My code in index.tsx:

...
const isDev = process.env.NODE_ENV === 'development'
const rootEl = document.getElementById('root')

ReactDOM.render(<App />, rootEl)

if (isDev && module.hot) {
  module.hot.accept('screens/App', () => {
    ReactDOM.render(<App />, rootEl)
  })
}

Hint: First try just this code (maybe you are setting wrong path)

if (module.hot) {
  module.hot.accept()
}

If this start working then you want to specify the path in order to make hot loading more effective (less bubbling = shorter loading)

Try adding CHOKIDAR_USEPOLLING=true in a .env file.

After create-react-app,I change my project's name.This is one of reasons which make reload not working.Then I create-react-app again,reload is working now.

If the React webpage is not reloading upon saving changes, try adding this line to the App.js file:

import React from 'react';

I solved this problem by creating my React app inside the Windows Subsystem for Linux (WSL) folder, instead of creating it in any Windows directory.