Hi everyone,
I'm using Next.js with the App Router, and I’m struggling with a frustrating hydration issue.

In my setup:

- My page.tsx is a Server Component (default behavior, no "use client").

- Inside that page, I render a Client Component (it starts with "use client"), which wraps a StoreProvider (for Redux).

- My StoreProvider initializes the store using useEffect and works perfectly in standalone setups.

I got this Error

Error: Switched to client rendering because the server rendering errored: Cannot read properties of null (reading 'useState')

This makes it seem like my client components are being rendered on the server, even though they're marked with "use client".

// app/page.tsx (Server Component)
import CalendarContainer from './CalendarContainer';

export default function CalendarPage() {
  return (
    <div>
      <CalendarContainer />
    </div>
  )
}

"use client";

const CalendarContainer = () => {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  // Return a simple div during SSR to avoid hydration issues
  if (typeof window === "undefined" || !mounted) {
    return <Image src="/loader/tube-spinner-dark.svg"/>;
  }

  return (
    <StoreProvider>
      <Calendar/>
    </StoreProvider>
  );
};

export default CalendarContainer;

If page.tsx is a server component and everything under it is marked as client ("use client"), why am I getting an error as if something is being rendered server-side?
Is there something wrong in how client/server boundaries are handled?

Thank you very much