React Component not reload in browser after save the changes in localhost

Question

I created a new react project using Create-React-App. In the old projects, Whenever I did the changes in the component and save the component it will reflect in the browser, but in the new project when I saved the changes in the code the browser did not reload and not reflect the changes. So I stopped the running process and again giving the npm start

Here is my package.json file.

{
  "name": "new-application",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-redux": "^7.1.3",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "redux": "^4.0.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "redux-devtools": "^3.5.0",
    "webpack": "^4.41.5"
  }
}

Can I add something in package.json to reload the browser automatically whenever I done changes?

What you want is called "hot module reloading". There are packages for it, such as this one: https://github.com/gaearon/react-hot-loader — Jayce444, Feb 10 '20 at 07:39
in the terminal is the script running after making changes to any component and saving them? — Ramesh Reddy, Feb 10 '20 at 07:39
I was under the impression that create-react-app has hot module reloading enabled by default. — JMadelaine, Feb 10 '20 at 07:42
@Ramesh no bro in the terminal itself script is not running. — Raghul SK, Feb 10 '20 at 07:42
Try a few things like deleting all node modules and installing them again and then npm start — Ramesh Reddy, Feb 10 '20 at 07:45

Pavan Nagadiya · Accepted Answer · 2020-03-11T10:54:33.617

I had a similar (or event the same) problem and I changed starting command in the package.json file by adding following flags: --watch --watch-poll to the webpack-dev-server:

{
//...
"scripts": {
    "start": "webpack-dev-server --env.ENVIRONMENT=development --content-base src/ --mode development --watch --watch-poll",
    // ...
}
// ...
}

Now, using npm start and then changing src files I can see changes in the browser.

Please here https://webpack.js.org/configuration/watch/ for more options.

score 0 · Answer 2 · answered Feb 10 '20 at 07:52

0

Install your app again using :

npx create-react-app appname

And don't edit package.json

answered Feb 10 '20 at 07:52

mohamed ibrahim

567
4
12

score 0 · Answer 3 · answered Dec 23 '20 at 17:14

If you prefer not modifying the package.json you can reinstall your project.

Two ways for that.

With git:

Push your project on git
Clear the project's folder on your computer
git clone https://github.com/my-account/my-project.git
npm install

Without git:

Back up the content of your project except for node_modules
Clear the project's folder except for package.json
npm install
Paste the files you backed up

React Component not reload in browser after save the changes in localhost

3 Answers3

With git:

Without git:

Linked