TypeError: Cannot read property'ReactCurrentDispatcher'of undefined

Question

1. when I try to upgrade the React version , windows rise an error.
2. the project is react, typescript and firebase for make authentication.
3. package.json file (dependencies,scripts)

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-router-dom": "^5.1.7",
    "firebase": "^8.2.7",
    "form-group": "^3.0.8",
    "react": "^15.3.0",
    "react-dom": "^17.0.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.2",
    "react-tinder-card": "^1.3.1",
    "reactstrap": "^8.8.1",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

Answer 1

I know it's already been a month but in case you still need it or someone else has the same issue, I got the same error message and was able to solve it with the solution provided on this post.

Apparently it has something to do with the "react" and "react-dom" versions not being the same. And running the following command on the terminal fixes it: npm rm react react-dom && npm i -s react react-dom

Answer 2

I have been trying to solve this problem for a few days and I keep coming across this thread (and a few others repeatedly) with no comprehensive solution. I will share the solution that worked for me and hopefully this will help save others time.

I am building a react component library using Vite (library mode) and it works in React 18. But, in React 19, I get the following error: Uncaught TypeError: Cannot read properties of undefined (reading 'ReactCurrentDispatcher')

As a library author, I am basically a my own conflicting 3rd party dependency.

For this class of problem, many answers will suggest that there is a conflict/mismatch between the react and react-dom versions.

You can check the react and react-dom versions by running the following command from the directory where your project's package.json is located: npm ls react react-dom.

In my case my versions all matched since my project did not bundle react or react-dom, they were specified as peerDependencies in the library's package.json and externalized in my Vite config:

// snippet from my vite config. libraries excluded from the build
rollupOptions: {
  external: ['react', 'react-dom'],
  output: {
    globals: {
      'react-dom': 'ReactDom',
      react: 'React',
    },
  },
}

Many other answers mentioned that React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, a private internal React API is related to the issue. I searched my complied library package and found this in the Javascript.

The problem was that react/jsx-runtime uses React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIREDand was being bundle into my library. This API is not compatible with React 19 and was causing the error.

I modified my Vite config to exclude it and this solved the problem.

rollupOptions: {
  external: ['react', 'react-dom', 'react/jsx-runtime'],
  output: {
    globals: {
      'react-dom': 'ReactDom',
      react: 'React',
      'react/jsx-runtime': 'ReactJsxRuntime',
    },
  },
}

You may be using a third party library that relies on this API. It is not be available in React 19. You can run grep -ir React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED from your project root to see if this API is being used by a 3rd party.

You may need to update that dependency or replace it with another compatible package.