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

Answer 1

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

Answer 2

create .env file and add FAST_REFRESH=false

Answer 3

Add

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