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: github.com/gaearon/react-hot-loader — Jayce444
– Jayce444, Commented Feb 10, 2020 at 7:39
in the terminal is the script running after making changes to any component and saving them? — Ramesh Reddy
– Ramesh Reddy, Commented Feb 10, 2020 at 7:39
I was under the impression that create-react-app has hot module reloading enabled by default. — JMadelaine
– JMadelaine, Commented Feb 10, 2020 at 7:42
@Ramesh no bro in the terminal itself script is not running. — Raghul SK
– Raghul SK, Commented Feb 10, 2020 at 7:42

Pavan Nagadiya · Accepted Answer · 2020-03-11 10:54:33Z

1

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.

edited Mar 11, 2020 at 10:54

answered Feb 10, 2020 at 10:34

Pavan Nagadiya

6824 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mohamed ibrahim · Accepted Answer · 2020-02-10 07:52:34Z

0

Install your app again using :

npx create-react-app appname

And don't edit package.json

answered Feb 10, 2020 at 7:52

mohamed ibrahim

5835 silver badges12 bronze badges

Comments

GBMan · Accepted Answer · 2020-12-23 17:14:15Z

0

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

answered Dec 23, 2020 at 17:14

GBMan

4952 gold badges4 silver badges16 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

With git:

Without git:

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

With git:

Without git:

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related