Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Development server of create-react-app does not auto refresh

I am following a tutorial on React using create-react-app. The application is created by create-react-app v1.3.0

create-react-app my-app 

The dev server is run by

npm start 

After changing the code several times, the browser is not updated live / hot reload with the changes. Refreshing the browser does not help. Only stopping the dev server and starting it over again capture the new changes to the code.

like image 921
elpddev Avatar asked Apr 07 '17 09:04

elpddev


People also ask

How do I make my react page auto refresh?

If set to true, the browser will do a complete page refresh from the server and not from the cached version of the page. import React from 'react'; function App() { function refreshPage() { window. location. reload(false); } return ( <div> <button onClick={refreshPage}>Click to reload!

How do you refresh a react app?

To refresh a page, you need to use the javascript window. location. reload() in React apps.


2 Answers

I was reading a lot of unnecesary stuff.

I am using React 17.

And my probrem was that the page just add new components but the browser was not refreshing the page.

If your terminal is Compiling... and then you don't see changes on the browser, you should try adding a .env file in the root path of the project and add FAST_REFRESH=false.

Hot refresh was replaced for Fast refresh by default.

like image 58
Kev Aldasoro Avatar answered Oct 09 '22 03:10

Kev Aldasoro


Have you seen the “Troubleshooting” section of the User Guide?
It describes a few common causes of this problem:

When you save a file while npm start is running, the browser should refresh with the updated code.

If this doesn’t happen, try one of the following workarounds:

  • If your project is in a Dropbox folder, try moving it out.
  • If the watcher doesn’t see a file called index.js and you’re referencing it by the folder name, you need to restart the watcher due to a Webpack bug.
  • Some editors like Vim and IntelliJ have a “safe write” feature that currently breaks the watcher. You will need to disable it. Follow the instructions in “Disabling swap files creation in vim”.
  • If your project path contains parentheses, try moving the project to a path without them. This is caused by a Webpack watcher bug.
  • On Linux and macOS, you might need to tweak system settings to allow more watchers.
  • If the project runs inside a virtual machine such as (a Vagrant provisioned) VirtualBox, create an .env file in your project directory if it doesn’t exist, and add CHOKIDAR_USEPOLLING=true to it. This ensures that the next time you run npm start, the watcher uses the polling mode, as necessary inside a VM.

If none of these solutions help please leave a comment in this thread.

I hope this helps!

like image 45
Dan Abramov Avatar answered Oct 09 '22 03:10

Dan Abramov