Hot reload is not working with clean react project?

Question

Today is the first project I made with React v17 (if that matters or not idk) I'm changing things in the state, dom, etc and it's not reloading anything like before. Typically you'd notice it when you have something in-state press ctrl+s to save and it's gone, but now it's not happening anymore.

Is there something that I can check to look if is something I did wrong? Is just a project created with Create react app, clean.

this is all I have, https://github.com/StewartGF/todo-test

For Context what i'm doing is changing the state in the code expecting a reload from the page.

Changing the state from :

const initialState = [
  {
    id: Date.now(),
    task: "Crear un todo  ",
    completed: true,
  }
];

const todoReducer = (state = initialState, action) => {
  switch (action.type) {
    case "ADD_TODO":
      return [...state, action.payload];
    default:
      return state;
  }
};

export default todoReducer;

to

const initialState = [
  {
    id: Date.now(),
    task: "Crear un todo  ",
    completed: true,
  },
  {
    id: Date.now(),
    task: "Crear un todo  ",
    completed: true,
  },
];

const todoReducer = (state = initialState, action) => {
  switch (action.type) {
    case "ADD_TODO":
      return [...state, action.payload];
    default:
      return state;
  }
};

export default todoReducer;

Usually you'd expect the page to be reloaded with the new state.

There is no error in console. The only thing I know is different from other projects that I have (tested to confirm if was something with VSCode or something else) was the version of react.

Package.json project that does not work:

  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.1",
    "react-scripts": "4.0.0",
    "redux": "^4.0.5",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Others projects created before this

"version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.1",
    "react-scripts": "3.4.3",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "uuid": "^8.3.0"
  },
  "scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
  },
  "eslintConfig": {
    "extends": "react-app"
  },

EDIT: downgraded dependencies from React 17 to "react": "^16.13.1", and worked as expected.. I guess it has something to do with react version

you mean the app doesn't compile on change save? maybe this will help or at least be a starting point https://stackoverflow.com/questions/36428368/how-to-use-compileonsave-in-vs-code — Mihai T, Oct 24 '20 at 21:30
@JoshBonnick sure, the repo doesn't have much https://github.com/StewartGF/todo-test wanted to try if CRA was updated to v17, create a todo list, but its behavior is weird.. — Unmy_, Oct 24 '20 at 21:33
Also: The creator of your starter pack template answered a similar question here: https://stackoverflow.com/a/39960890/14481105 — Josh Bonnick, Oct 24 '20 at 21:41

score 2 · Answer 1 · answered Jan 10 '21 at 20:59

2

create .env file and add FAST_REFRESH=false

answered Jan 10 '21 at 20:59

Deejay

907
1
6
10

score 0 · Answer 2 · answered May 22 '23 at 20:25

0

Hope this helps.. https://stackoverflow.com/a/76309632/8243241

need to add react-error-overlay v6.0.9

and add this to package.json below the dependencies "resolutions": { "react-error-overlay": "6.0.9" },

answered May 22 '23 at 20:25

mainak

1,886
2
9
19

score -1 · Answer 3 · edited Dec 08 '20 at 04:25

-1

Add

if(module.hot){
module.hot.accept()
}

edited Dec 08 '20 at 04:25

Ian Campbell

23,484
14
36
57

answered Dec 07 '20 at 22:48

John Jairo González Rodriguez

1
1

2

Please don't post only code as an answer, but also provide an explanation of what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes – Ran Marciano Dec 08 '20 at 05:56
1

where this has to be added? – Sandeep Amarnath Dec 06 '21 at 00:45
Where to add this code? Why? Did you test it yourself? Please, add more details. – S1awek Mar 01 '22 at 10:25

Hot reload is not working with clean react project?

3 Answers3