I'm getting this error in NextJS (15.3.4) randomly while in dev mode, it often occurs when navigating from one page to another, but I can't seem to reproduce consistently. It seems like an issue with accessing the DOM or some browser API while in server rendering, but I have made sure everything using browser APIs is under 'use client' components and inside useState(), useMemo() or useEffect() hooks.
I have also attempted to disable turbopack but the issues persist. This also seems to not harm performance or cause any visible issues with the application.

Here's the code for the root page src/app/page.tsx (the page in which the above error appears):
import { InfoAccordion } from "@/components/implementations/InfoAccordion";
import { Suspense } from "react";
import { Header } from "./_index/components/Header";
import { getSession } from "@/auth/getSession";
import { HeaderSkeleton } from "./_index/components/Header/Skeleton";
import { validateRouteAuthentication } from "@/auth/validateRouteAuthentication";
import { HomeActions } from "./_index/HomeActions";
export default async function Home() {
const session = await getSession();
const authenticated = session.authenticated;
if (authenticated) await validateRouteAuthentication(session);
return (
<div>
<Suspense fallback={<HeaderSkeleton />}>
<Header session={session} />
</Suspense>
<div>
{session.authenticated && <HomeActions session={session} />}
<div>
<InfoAccordion centeredTitle title="Title">
<p>Text here</p>
</InfoAccordion>
</div>
</div>
<Footer />
</div>
);
}
function Footer() {
return (
<footer>
<div>
<p>Text here</p>
</div>
</footer>
);
}