score:0

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!

score:1

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

change your file index.js to index.jsx. it worked for me.

score:2

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

score:3

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

score:5

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

score:6

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.

score:6

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

score:11

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


Related Query

More Query from same tag