I am having this problem. A React Element from an older version of React was rendered

JavaScript
1

This is my package.json.

I can see it is in order, so I do not understand the origin of the problem.

image
image1920Ă—1080 287 KB

package.json

{
  "name": "frontend",
  "proxy": "http://localhost:5000/",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^2.6.1",
    "@testing-library/dom": "^10.4.0",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.2.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.8.4",
    "bootstrap": "^5.3.3",
    "react": "^19.0.0",
    "react-bootstrap": "^2.10.9",
    "react-dom": "^19.0.0",
    "react-redux": "^9.2.0",
    "react-router": "^7.4.0",
    "react-router-dom": "^7.4.1",
    "react-scripts": "5.0.1",
    "use-reducer-logger": "^1.0.2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint-plugin-react-hooks": "^5.2.0"
  }
}
2

Hard to know what’s wrong without more context. What were you working on that produced this error?

I’m a bit new to npm myself, but here’s a few things that I think could at least narrow down what the problem might be:

  1. Delete the node_modules folder (NOT package.json!) and run npm i (short for install) to re-install the modules. If the problem persists, you’ll know the problem wasn’t the installation.
  2. It looks like you can check if any packages are outdated with npm outdated, and you could try running npm update to shore it up. If that doesn’t work, you’ll know it has nothing to do with your packages. (Maybe it’ll throw an error about dependencies though? I wouldn’t think so, but just in case, maybe back up your project before you do this lol)
  3. I think fCC’s curricula teach React using class components, but the more common way seems to be using functional programming and functional components. If you’re following fCC’s curricula for React, maybe try using functional components instead? I doubt that’d be the thing breaking your project, but it might be worth a shot?

I’m interested to see whatever ends up working lol

1 Like
3

I jumped out from the first to suggestion to the second one at Google because i did not notice anything wrong there. It might was a lucky strike. Therefore I set that question there as it is below.

"A library pre-bundled an old copy of “react” or "“react/jsx-runtime”

So, I got this answer:

I just need to implement this command in terminal in order to solve the problem:

npm install react@latest react-dom@latest

Thanks for your nice suggestions

4

I would suggest you switch from CRA to Vite as well.

1 Like
5

Let me finish this project and will start using it. I will give a look to Vite. Thanks for your comment.