CODEWITHSUNDEEP
reactjscreate-react-app
Ali
Ali

Reputation: 6958

Create react app, reload not working

I just started coding in React using create-react-app. In the documentation it's said

The page will reload if you make edits.

I don't know which module is responsible for auto reload (webpack or react-hot-reloader?) but it's not working. I edited file using different editors (Sublime, VIM, ..) but it seems problem is for something else. Any advice how to debug it?

Upvotes: 30

Views: 47640

Answers (12)

VIPPER
VIPPER

Reputation: 342

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.

Upvotes: 0

Tjay
Tjay

Reputation: 1

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.

Upvotes: -1

G P
G P

Reputation: 1

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

import React from 'react';

Upvotes: -1

John
John

Reputation: 41

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!

Upvotes: 4

Ali
Ali

Reputation: 6958

After too many searches I found Webpack watch uses inotify to observe file changes and in ubuntu it's set to a low value. a quick fix:

sudo -i
echo 1048576 > /proc/sys/fs/inotify/max_user_watches
exit

If you want change it permanently (from Ronald answer):

echo "fs.inotify.max_user_watches=524288" >> /etc/sysctl.conf
sudo sysctl -p

You may also need to add a .env file in the root directory of your project with this line "FAST_REFRESH=false" as noted in create react app docs.

echo "FAST_REFRESH=false\n" | cat > .env

Upvotes: 38

Yassine CHABLI
Yassine CHABLI

Reputation: 3724

I had the same problem in Ubuntu.

The problem was resolved by deleting node_modules and then run

yarn install // or npm install

Upvotes: 5

Ronald Araújo
Ronald Araújo

Reputation: 1479

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

Upvotes: 6

Sanan Ali
Sanan Ali

Reputation: 3427

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.

Upvotes: 27

spenat28
spenat28

Reputation: 39

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

Upvotes: 3

shakexu
shakexu

Reputation: 1

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.

Upvotes: -1

Squirrl
Squirrl

Reputation: 4966

Try adding CHOKIDAR_USEPOLLING=true in a .env file.

Upvotes: 0

Sebastian Vorac
Sebastian Vorac

Reputation: 4663

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)

Upvotes: 0

Related Questions