Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • C create-react-app
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 1,547
    • Issues 1,547
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 417
    • Merge requests 417
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Meta
  • create-react-app
  • Issues
  • #9904
Closed
Open
Issue created Oct 24, 2020 by Administrator@rootContributor

Hot Reload stopped working with React "^17.0.1"

Created by: StewartGF

Describe the bug

Hot reloading when the redux-state change stopped working when I use CRA to get the last React version. Noticed that it is due to React version and I made a test creating a new react project, as a result the package.json shows

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

then change it to a previous version of react (copied from an old project)

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

And it continue to works as always.

Did you try recovering your dependencies?

yes

Environment

current version of create-react-app: 4.0.0 running from C:\Users\stewa\AppData\Roaming\npm\node_modules\create-react-app

System: OS: Windows 10 10.0.19041 Binaries: Node: 12.9.1 - C:\Program Files\nodejs\node.EXE Yarn: Not Found npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 86.0.4240.111 Edge: Spartan (44.19041.423.0), Chromium (86.0.622.51)
Internet Explorer: 11.0.19041.1 npmPackages: react: ^17.0.1 => 17.0.1 react-dom: ^17.0.1 => 17.0.1 react-scripts: 4.0.0 => 4.0.0 npmGlobalPackages: create-react-app: Not Found

Steps to reproduce

(Write your steps here:)

  1. I have a file with a state with this value in my Redux reducer
const initialState = [
  {
    id: Date.now(),
    task: "new todo ",
    completed: false,
  }
];
  1. Modify the object in the file to this
const initialState = [
  {
    id: 1,
    task: "new todo ",
    completed: false,
  },
  {
    id:123,
    task: "new todo ",
    completed: false,
  }
];
  1. As previous versions of React / CRA the page force a reload, displaying in the page the new object added, but it's not anymore

Expected behavior

Even if you change the text of one of the objects in the reducer it used to reload the page. I'm expecting to see the new state in the page as I save a file when the state change

Actual behavior

alt text

Here you can see I saved the file and the page is not showing the new state, and the new data.

Reproducible demo

https://github.com/StewartGF/todo-test

I created this clean project with CRA, it has react v17 You can change the version in the package.json to what I paste in the description and use npm install in order to see the project working as it was working in previous versions.

Assignee
Assign to
Time tracking