Error: A previously unvisited boundary must have exactly one root segment.
Simulator/index.tsx
app/page.tsx
converting simulator/index.tsx into "use client" allows it to render without error but shows a yellow underline saying its a server render function and it shouldnt be on client side basically
Console Output from
export default async function SimulatorParent() {
// const waitTime = await wait(10000);
// console.log("The promise", waitTime);
return (
<main className="flex flex-1 bg-gray-800 h-full">
<div className="flex flex-1 bg-gray-800 h-full">
<Suspense fallback={<div className="flex w-full h-full bg-red-500" />}>
<Simulator />
</Suspense>
</div>
</main>
);
}
export default async function SimulatorParent() {
// const waitTime = await wait(10000);
// console.log("The promise", waitTime);
return (
<main className="flex flex-1 bg-gray-800 h-full">
<div className="flex flex-1 bg-gray-800 h-full">
<Suspense fallback={<div className="flex w-full h-full bg-red-500" />}>
<Simulator />
</Suspense>
</div>
</main>
);
}
async function MainMenuSkeleton() {
return (
<>
<Link className="flex items-center justify-center" href="#">
<Image height={40} width={40} src="logo.svg" alt="logo" />
</Link>
<nav className="ml-auto flex gap-4 sm:gap-6">
...
</nav>
</>
);
}
async function MainMenu() {
return (
<>
<Link className="flex items-center justify-center" href="#">
<Image height={40} width={40} src="logo.svg" alt="logo" />
<span className="ml-2 text-xl font-bold">Dark Almanac</span>
</Link>
<nav className="ml-auto flex gap-4 sm:gap-6">
<Link
className="text-sm font-medium hover:underline underline-offset-4"
href="#"
>
About
</Link>
<Link
className="text-sm font-medium hover:underline underline-offset-4"
href="#"
>
Articles
</Link>
<Link
className="text-sm font-medium hover:underline underline-offset-4"
href="/login"
>
Login
</Link>
</nav>
</>
);
}
export default async function Component() {
return (
<div className="dark flex flex-col min-h-screen bg-gray-900 text-white">
<header className="px-4 lg:px-6 h-14 flex items-center">
<Suspense fallback={<MainMenuSkeleton />}>
<MainMenu />
</Suspense>
</header>
<SimulatorComponent />
<footer className="flex flex-col gap-2 sm:flex-row py-6 w-full shrink-0 items-center px-4 md:px-6 border-t border-gray-800">
<p className="text-xs text-gray-500">
© 2024 Game Theory Craft. All rights reserved.
</p>
<nav className="sm:ml-auto flex gap-4 sm:gap-6">
<Link className="text-xs hover:underline underline-offset-4" href="#">
About Us
</Link>
<Link className="text-xs hover:underline underline-offset-4" href="#">
Contact
</Link>
<Link className="text-xs hover:underline underline-offset-4" href="#">
Privacy Policy
</Link>
</nav>
</footer>
</div>
);
}
async function MainMenuSkeleton() {
return (
<>
<Link className="flex items-center justify-center" href="#">
<Image height={40} width={40} src="logo.svg" alt="logo" />
</Link>
<nav className="ml-auto flex gap-4 sm:gap-6">
...
</nav>
</>
);
}
async function MainMenu() {
return (
<>
<Link className="flex items-center justify-center" href="#">
<Image height={40} width={40} src="logo.svg" alt="logo" />
<span className="ml-2 text-xl font-bold">Dark Almanac</span>
</Link>
<nav className="ml-auto flex gap-4 sm:gap-6">
<Link
className="text-sm font-medium hover:underline underline-offset-4"
href="#"
>
About
</Link>
<Link
className="text-sm font-medium hover:underline underline-offset-4"
href="#"
>
Articles
</Link>
<Link
className="text-sm font-medium hover:underline underline-offset-4"
href="/login"
>
Login
</Link>
</nav>
</>
);
}
export default async function Component() {
return (
<div className="dark flex flex-col min-h-screen bg-gray-900 text-white">
<header className="px-4 lg:px-6 h-14 flex items-center">
<Suspense fallback={<MainMenuSkeleton />}>
<MainMenu />
</Suspense>
</header>
<SimulatorComponent />
<footer className="flex flex-col gap-2 sm:flex-row py-6 w-full shrink-0 items-center px-4 md:px-6 border-t border-gray-800">
<p className="text-xs text-gray-500">
© 2024 Game Theory Craft. All rights reserved.
</p>
<nav className="sm:ml-auto flex gap-4 sm:gap-6">
<Link className="text-xs hover:underline underline-offset-4" href="#">
About Us
</Link>
<Link className="text-xs hover:underline underline-offset-4" href="#">
Contact
</Link>
<Link className="text-xs hover:underline underline-offset-4" href="#">
Privacy Policy
</Link>
</nav>
</footer>
</div>
);
}
next run dev
✓ Compiled / in 4.3s (587 modules)
⨯ Internal error: Error: A previously unvisited boundary must have exactly one root segment. This is a bug in React.
at aM (C:\Users\mager\Documents\Projects\dark-almanac\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:57694)
...
⨯ Error: failed to pipe response
at Q (C:\Users\mager\Documents\Projects\dark-almanac\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:394090)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
...
[cause]: Error: A previously unvisited boundary must have exactly one root segment. This is a bug in React.
at aM (C:\Users\mager\Documents\Projects\dark-almanac\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:57694)
....
}
○ Compiling /_error ...
✓ Compiled /_error in 1757ms (726 modules)
✓ Compiled / in 4.3s (587 modules)
⨯ Internal error: Error: A previously unvisited boundary must have exactly one root segment. This is a bug in React.
at aM (C:\Users\mager\Documents\Projects\dark-almanac\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:57694)
...
⨯ Error: failed to pipe response
at Q (C:\Users\mager\Documents\Projects\dark-almanac\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:394090)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
...
[cause]: Error: A previously unvisited boundary must have exactly one root segment. This is a bug in React.
at aM (C:\Users\mager\Documents\Projects\dark-almanac\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:57694)
....
}
○ Compiling /_error ...
✓ Compiled /_error in 1757ms (726 modules)
1 Reply
Hate to bump my own post but I’m still blocked by this issue.
To reiterate: if I remove one of my suspense boundaries it works flawlessly, but for some reason having 2 suspense boundaries is causing an issue.
In case anyone is curious what the issue was.
The Suspense boundary defined in the SimulatorParent() component was wrapping a component that uses “use client”. Essentially, you cannot server side render a client side component.