Bug: Uncaught TypeError: Cannot read properties of null (reading 'useMemo') [React 18.3.1]

[owenn2106]

I have upgraded to React 18.3.1, previously from 18.2.0. After upgrading, my app won't start. At first it's due to useMemo in <PortalProvider /> which is a component from blueprintjs. When I open the file, it looks something like:

import * as React from "react";

const PortalProvider = (...) => {
    const data = React.useMemo(...)
}

From the error message, here I'm assuming React is null, but I'm not sure why. This was working fine before with 18.2.0. I tried removing this <PortalProvider /> component, but I get another error in <Provider /> from react-redux, but this time instead of useMemo, it errors out with useContext. All I did was upgrade the React version nothing else. Am I missing something? I would like to upgrade to 18.3.1 to prepare for React 19.

React version: 18.3.1
Blueprintjs version: 5.10.2
Redux version: 4.2.1
React-redux version 8.1.3

My src/index.tsx:

import { useEffect } from "react";
import {
  createRoutesFromChildren,
  matchRoutes,
  useLocation,
  useNavigationType,
} from "react-router-dom";
import { Classes, PortalProvider } from "@blueprintjs/core";
import { createRoot } from "react-dom/client";
import * as Sentry from "@sentry/react";
import "style/index.scss";
import Router from "./router";
import store from "redux/store";
import { Provider } from "react-redux";
import { APP_VERSION } from "utils/constants";
import * as serviceWorker from "./serviceWorker";

Sentry.init({
  dsn: "...",
  integrations: [
    Sentry.reactRouterV6BrowserTracingIntegration({
      useEffect: useEffect,
      useLocation,
      useNavigationType,
      createRoutesFromChildren,
      matchRoutes,
    }),
    Sentry.replayIntegration(),
  ],
  enabled: process.env.NODE_ENV !== "development",
  release: APP_VERSION.toString(),
  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,
});

// <React.StrictMode> removed because of blueprint https://github.com/palantir/blueprint/issues/3979
const container = document.getElementById("root");
if (!container) throw new Error("Element with id 'root' not found.");
container.classList.add(Classes.DARK);

const root = createRoot(container);
root.render(
  <PortalProvider portalClassName={Classes.DARK}>
    <Provider store={store}>
      <Router />
    </Provider>
  </PortalProvider>
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

[kassens]

This looks like you might be missing to update react-dom to the matching 18.3.1 as the error message suggests.

[rickhanlonii]

Yeah @owenn2106 did you update your react-dom version as well?

[przpl]

I have a similar error, but with useState:

TypeError: Cannot read properties of null (reading 'useState')

I updated react-dom to 18.3.1. I use Next.js version 14.2.3.

Stack trace:

Uncaught TypeError: Cannot read properties of null (reading 'useState')
    at useState (file://...\node_modules\react\cjs\react.development.js:1622:21)
    at App (file://...\.next\server\chunks\ssr\[project]__3a561a._.js:7163:86)
    at renderWithHooks (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5731:15)
    at renderElement (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5920:3)
    at renderElement (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5785:7)
    at renderElement (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5785:7)
    at renderElement (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderNode (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderElement (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5971:9)
    at renderNodeDestructiveImpl (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderNode (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderElement (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5971:9)
    at renderNodeDestructiveImpl (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5920:3)
    at renderElement (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5920:3)
    at renderElement (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5785:7)
    at renderElement (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5920:3)
    at renderElement (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6017:11)
    at renderNodeDestructiveImpl (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (file://...\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5920:3)

[owenn2106]

@kassens @rickhanlonii Yeap, my react-dom is updated to 18.3.1 as well

[owenn2106]

Turns out we are having this issue because we have multiple copies of React. My team has a monorepo, which has a shared folder and these shared folder has a dependency of React 18. Package json looks like:

  "peerDependencies": {
    "@types/react": "^17 || ^18",
    "react": "^17 || ^18",
    "react-dom": "^17 || ^18"
  },

So we had to just change the peer dependencies to 18.3 for it to work.

  "peerDependencies": {
    "@types/react": "^17 || ^18.3.0",
    "react": "^17 || ^18.3.0",
    "react-dom": "^17 || ^18.3.0"
  },

[kassens]

Since the error message already contains this as the first recommendation, I don't think there's more we can do, unfortunately :(