Uncaught Error: Cannot read properties of null (reading 'useContext')

Unanswered

ABUL KALAM posted this in #help-forum

2024-04-19T22:58:38.003Z

I am working on a Project in Next.js and have been facing an error.

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
 ⨯ TypeError: Cannot read properties of null (reading 'useContext')
    at ReadyProjectClientPage (./src/components/admin-side/ready-project/ReadyProjectClientPage.js:31:76)
digest: "3449185741"

Details of the error are provided below.

4 Replies

ABUL KALAMOP

2024-04-19T22:58:53.339Z

Here is the ReadyProjectClientPage.js file mentioned in the error:

"use client";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { AlertContext } from "@/context/AlertContext";
import { useContext } from "react";
// Other imports

const ReadyProjectClientPage = (props) => {
  const { showAlert } = useContext(AlertContext);
  const addReadyProjectS1Handler = async e => {
    e.preventDefault();
    // addReadyProjectS1Service is a function which runs on the client, check the input before passing it to the Firebase server action function to add the data to database.
    const data = await addReadyProjectS1Service(
      readyProjectS1,
      showAlert,
      setShowSpinner,
    );
    // showAlert passed to other functions as well
  }

  // Other code
  return (
    <>
      {/* JSX */}
    </>
  )
}

The error pops up randomly, mostly when I hard refresh the page but not on every refresh, and I am unable to reproduce the error.
I have manually checked all the instances of useContext() and they are all directly inside React components.

Here is my AlertContext.js file:

"use client";
import { createContext, useState } from "react";
const AlertContext = createContext({
  alerts: [],
  showAlert: () => {},
  hideAlert: () => {},
});

const AlertProvider = ({ children }) => {
  const [alerts, setAlerts] = useState([]);

  const showAlert = ({ type, message }) => {
    setAlerts([{ type, message, timestamp: Date.now() }]);
  };

  const hideAlert = () => {
    setAlerts([]);
  };

  return (
    <AlertContext.Provider value={{ alerts, showAlert, hideAlert }}>
      {children}
    </AlertContext.Provider>
  );
};

export { AlertProvider, AlertContext };

Here is my root layout.js file in which I have put the AlertProvider:

import { Roboto } from "next/font/google";
import "@/app/globals.css";
import { AlertProvider } from "@/context/AlertContext";
import StoreProvider from "@/store/StoreProvider";

const roboto = Roboto({
  subsets: ["latin"],
  weight: ["100", "300", "400", "500", "700", "900"],
});

export const metadata = {
  title: "title",
  description: "description",
};

export default function RootLayout({ children }) {
  return (
    <>
      <StoreProvider>
        <AlertProvider>
          <html lang="en">
            <body className={roboto.className}>{children}</body>
          </html>
        </AlertProvider>
      </StoreProvider>
    </>
  );
}

The versions of react and react-dom are both 18.
I visited the this [link](https://reactjs.org/link/invalid-hook-call) to React official site provided in the error description.
Under the Duplicate React section, it says:

If you use Node for package management, you can run this check in your project folder:
npm ls react
If you see more than one React, you’ll need to figure out why this happens and fix your dependency tree.

I ran the command on my terminal and here is the result:

PS C:\Users\user\Desktop\project> npm ls react
project@0.1.0 C:\Users\user\Desktop\project
+-- @reduxjs/toolkit@2.2.3
| `-- react@18.2.0 deduped
+-- next@14.2.1
| +-- react@18.2.0 deduped
| `-- styled-jsx@5.1.1
|   `-- react@18.2.0 deduped
+-- react-dom@18.2.0
| `-- react@18.2.0 deduped
+-- react-icons@5.1.0
| `-- react@18.2.0 deduped
+-- react-redux@9.1.1
| +-- react@18.2.0 deduped
| `-- use-sync-external-store@1.2.0
|   `-- react@18.2.0 deduped
+-- react-slick@0.30.2
| `-- react@18.2.0 deduped
`-- react@18.2.0

Then it says, You can also try to debug this problem by adding some logs and restarting your development server:

// Add this in node_modules/react-dom/index.js
window.React1 = require('react');

// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);

I tried it in my current Next.js project,in a new Next.js project, and in a new React.js project using vite.
I noticed that in any Next.js project, window.React1 pasted in node_modules/react-dom/index.js is not accessible in any component and returns undefined but is accessible in React.js project.

Giant panda

2024-07-03T18:52:43.787Z

HAving this issue!