Unhandled Runtime Error -

[Kazedaa]

I understand that the the issue is caused due to a div being wrapping in an tag but I cant find it I also tried adding "suppressHydrationWarning={true}" into the divs in ./components/ui/3DPin/PinPerspective ...but to no avail

Please Help
Thanks

[Kazedaa]

Here is the call stack

throwOnHydrationMismatch
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (6981:1)
tryToClaimNextHydratableInstance
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (7016:1)
updateHostComponent$1
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (16621:1)
beginWork$1
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (18503:1)
HTMLUnknownElement.callCallback
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (20565:1)
Object.invokeGuardedCallbackImpl
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (20614:1)
invokeGuardedCallback
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (20689:1)
beginWork
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26949:1)
performUnitOfWork
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25748:1)
workLoopConcurrent
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25734:1)
renderRootConcurrent
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25690:1)
performConcurrentWorkOnRoot
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24504:1)
workLoop
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (256:1)
flushWork
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (225:1)
MessagePort.performWorkUntilDeadline
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (534:1)

[AayushGupta69]

Hi, @Kazedaa I was also facing this issue specifically in recent projects section. I got rid of this runtime error by using dynamic imports to import the Recent Projects section. Hope this helps.

[Kazedaa]

@AayushGupta69 Hey thank you very much! yes that worked

[DamnScallion]

Hi, @Kazedaa I was also facing this issue specifically in recent projects section. I got rid of this runtime error by using dynamic imports to import the Recent Projects section. Hope this helps.

Here's what I did with your suggestion in Page.tsx and it worked! Thank you so much @AayushGupta69

import Grid from '@/components/Grid';
import Hero from '@/components/Hero';
// import RecentProjects from '@/components/RecentProjects';
import { FloatingNav } from '@/components/ui/FloatingNav';

import dynamic from 'next/dynamic';
import { navItems } from '@/data';

const RecentProjects = dynamic(() => import('@/components/RecentProjects'), { ssr: false });

export default function Home() {
  return (
    <main className="relative bg-black-100 flex justify-center items-center flex-col overflow-hidden mx-auto sm:px-10 px-5">
      <div className="max-w-7xl w-full">
        <FloatingNav navItems={navItems} />
        <Hero />
        <Grid />
        <RecentProjects />
			</div>
    </main>
  );
}