I have a custom Accordion component that accepts AccordionItem components. Both are client components!
On the AccordionItem.tsx file i export not only the component, but a namespace as well for the header and body parts… like this:
"use client"
/// some code
export default AccordionItem ...
export namespace AccordionItem {
export function Header({...
// code
export function Body({...
}
When i use this component NextJS throws the following Unhandled Runtime Error
Error: Could not find the module “//components/accordion/AccordionItem.tsx#AccordionItem#Header” in the React Client Manifest. This is probably a bug in the React Server Components bundler.
The component works well on any regular React project, but not on Next JS 14.2.12
After searching for a while, came across a github issue where someone suggested to simply use "use client" on the component where the Accordion/AccordionItem is being used, and even tho it “fixes” the problem…it makes my component to be rendered on the client side, which I don’t want.
Does anyone know a better workaround for this? Or do we just have to wait for next’s team?
Note
The problem seems to be caused by typescript namespaces. When using an import like MyNamespace.something, next throws an error saying that it can’t find the module MyNamespace#something.
But even if I separate my namespace into multiple files, the same can’t be done for 3rd party packages like framer motion.
Relevant Info
- NextJS 14.2.12
- Framer Motion 11.5.5
- Typescript 5
To resolve this issue without rendering the entire component on the client side, try separating the interactive parts (like Header and Body) into distinct client components. Use “use client” only in these components. This way, the rest of the component can remain server-side.
Zahir HANICHE is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1