Have the same issue

Dealing with this extremely frustrating error for several days now.
Wasn't even a fault on my part, upgrading to Next 13.4.8 fixed it; for now I guess since this keeps resurfacing.

I confirm this in 13.4.8, I downgraded to 13.4.5 and the same thing.

I faced the same issue and it was fixed in 13.4.7 version
Here is my next and eslint-config-next version

"next": "13.4.7"

"eslint-config-next": "^13.4.7"

Possible fix

"use client"; //tells Next.js to render this component on the client
export { SessionProvider as AuthProvider } from 'next-auth/react'

Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

ok

bruh bruh bruh bruh bruh

I am trying to use React and Next.JS to statically export it onto gh-pages and I am getting that error

I have tried most of the solutions suggested above and other than downgrading to an earlier version (13.5.6) from my current version (14.0.4) and pretty much nothing has worked - or even given me different errors.

I encountered the issue midway through developing a new feature on a branched version of my app. Going back to my main branch meant the error did not occur. I decided to create a new branch, then add each new change file by file, running yarn build after each new change to see if I could encounter the problem again.

Unfortunately, none of the changes reproduced the error so I couldn't actually identify any specific patterns that would help. However, the new branch was buildable and deployable without the error.

I'm not sure what this means, or if it helps anyone. It clearly not a sustainable "solution" but it is another piece in the puzzle...

In my case, I'm using so much libs in root package.json with yarn-berry based mono-repo.
Locally build makes no problem, but the Dockerfile based on Next.js Docs Example makes this issue.
I tried adding "next:latest14.2.5" package in both root and apps/my-next-prj package.jsons and delete RUN yarn add global next before build my workspace project. I think lib of "next" npm global running has some problem in docker environment. I tried everything in this issue and I solved with this solution:)

same here

i try to the flowing steps to fixed my case:

1, delete the pnpm-lock.yaml file
2, run pnpm i

i hope it will help someone

Changed from pnpm to npm, suddenly it works

This fixed the issue for me: https://www.reddit.com/r/reactjs/comments/vl7ww2/comment/je62deh/

I was using pnpm and added the option auto-install-peers=false to .npmrc and the peer dependencies weren't installed by the library after that which was the source of the error.

The issue appears to be from using npm link with or without a package specifying peerDependencies.

Resolution:

1. Publish your package to npm with a test version name "2.4.5-alpha.0"
2. npm unlink package
3. rm -rf node_modules in both package directories
4. npm cache clean --force (probably not necessary)

Switching to yarn works... until the problem arises again. So, just fix it.

I've had the same issue, and I found the root cause to be that I had multiple versions of react installed in my monorepo. I had react@18.3.1 installed in node_modules and react@18.2.0 installed in app/node_modules (react-dom of same versions were also installed in each respective location).

useContext was being called from node_modules/react/cjs/react.development.js:1618:21 from renderWithHooks app/node_modules/react-dom/cjs/react-dom-server.browser.develoment.js:5658:16 (through styled-jsx) instead of the sibling react install.

My current solution is to set my app dependencies to react@^18.3.0 and react-dom@^18.3.0 with a clean install, though I am still exploring whether this is the best solution.

TL;DR: mark your custom context files with "use client".

I had a similar issue, caused by a custom context.

I have my client-side providers stitched in a single file with "use client" at the top, but the context file itself did not have "use client." Adding "use client" to this custom context file resolved the issue.

session-context.tsx

"use client"; // <-- Added this

import { createContext, useContext, useEffect, useReducer } from "react";
import { me } from "@/lib/api/services/auth";

type SessionProps = {
  authenticated?: boolean;
  user?: {
    id: string;
    name: string;
    email: string;
    role: string;
    type: string;
  };
};

type SessionContextProps = {
  state: SessionProps;
  updateSession: (updatedData: SessionProps | Partial<SessionProps>) => void;
  logout: () => void;
};

const Session = createContext<SessionContextProps | null>(null);

const reducer = (
  state: SessionProps,
  action: { type: string; payload?: SessionProps | Partial<SessionProps> },
) => {
  switch (action.type) {
    case "logout":
      return { authenticated: false };
    case "update":
      return { ...state, ...action.payload };
    default:
      return state;
  }
};

export const SessionProvider = ({ children }: { children: React.ReactNode }) => {
  const [state, dispatch] = useReducer(reducer, {
    authenticated: false,
  });

  const fetchUserUpdateSession = async () => {
    try {
      const user = await me();
      dispatch({ type: "update", payload: { user, authenticated: true } });
    } catch (error) {}
  };

  useEffect(() => {
    fetchUserUpdateSession();
  }, []);

  const updateSession = (updatedData: SessionProps | Partial<SessionProps>) => {
    dispatch({ type: "update", payload: updatedData });
  };

  const logout = () => {
    dispatch({ type: "logout" });
  };

  return <Session.Provider value={{ state, updateSession, logout }}>{children}</Session.Provider>;
};

export const useSession = () => {
  const context = useContext(Session);

  return context;
};

client-providers.tsx

"use client";

import { useState } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import { SessionProvider } from "@/components/contexts/session-context";

type ClientProvidersProps = {
  children: React.ReactNode;
};

export default function ClientProviders({ children }: ClientProvidersProps) {
  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            staleTime: 60 * 1000,
          },
        },
      }),
  );

  return (
    <QueryClientProvider client={queryClient}>
      <SessionProvider>{children}</SessionProvider>
    </QueryClientProvider>
  );
}

And client-providers consumed in root layout

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head />
      <body className={cn("bg-background min-h-screen font-sans antialiased", poppins.variable)}>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          <ClientProviders>
            {children}
            <Toaster />
          </ClientProviders>
        </ThemeProvider>
      </body>
    </html>
  );
}

@clalexander posted a few weeks ago regarding observations around different versions of react / react-dom, which prompted me to investigate this further.

We have also been sporadically running into this issue, and are using "next": "14.2.5" with defined explicit react versions in package.json:

What I found particularly interesting is, when using React Dev Tools, the inspection is showing a canary build of react-dom, a version lower than our defined minimum of ^18.3.1:

react-dom@18.3.0-canary-14898b6a9-20240318

This makes me question the state of the react dependencies within the lockfile, and leaves me curious as to why react-dom would be resolving to an older, canary build. FWIW, have not yet tried the "clean install" step from Chris' solution above.

My workspace had 2 projects with react as dependencies, on slightly different versions. I synced all versions up, installed and everything is back to normal.

Same problem here, no solution, if I try to change something in the code, the error message disappears, just recompiling the code hides this message.

this is a horrible error, i keep running into every now and again.