e2a4fc68b7
Root cause analysis: - Next.js 16 Server/Client Component boundary issue - Webpack module chunking fails with named exports from Client Components - Error: "Cannot read properties of undefined (reading 'call')" Solution: - Created release-sidebar-wrapper.tsx to isolate import boundary - Server Component (layout.tsx) now imports via wrapper - Wrapper uses default export, which webpack handles better Technical details: - Server Component -> direct import -> Client Component = module undefined - Wrapper component breaks the problematic import chain - Default exports handle webpack chunking more reliably than named exports Documentation: - Added comprehensive troubleshooting guide - Documents 4 solution approaches - Lists best practices to prevent future occurrences - Identifies other potential problem areas in codebase Files changed: - app/(marketing)/releases/layout.tsx (import via wrapper) - app/(marketing)/releases/components/release-sidebar-wrapper.tsx (new) - docs/troubleshooting/webpack-module-resolution-error.md (new) Related: This is a known Next.js 15-16 issue with Server/Client boundaries
35 lines
926 B
TypeScript
35 lines
926 B
TypeScript
/**
|
|
* Releases Layout
|
|
*
|
|
* Layout for release notes pages with sidebar navigation
|
|
*/
|
|
|
|
import type { ReactNode } from 'react'
|
|
import { getAllReleases, getCategoryMetadata } from '@/lib/mdx/releases'
|
|
import ReleaseSidebar from './components/release-sidebar-wrapper'
|
|
|
|
interface ReleasesLayoutProps {
|
|
children: ReactNode
|
|
}
|
|
|
|
export default async function ReleasesLayout({ children }: ReleasesLayoutProps) {
|
|
const releases = await getAllReleases()
|
|
const metadata = await getCategoryMetadata()
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-50">
|
|
<div className="max-w-[1400px] mx-auto">
|
|
<div className="flex">
|
|
{/* Sidebar - hidden on mobile, fixed on desktop */}
|
|
<ReleaseSidebar releases={releases} metadata={metadata} />
|
|
|
|
{/* Main Content */}
|
|
<div className="flex-1 lg:ml-64">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|