Server Component & Object assign exports
Answered
Kasui posted this in #help-forum
KasuiOP
Hello there! 
I tried to create a client component that returns itself as an Object containing different "sub-client-components" (ie what happens with Bootstrap where you have Modal, Modal.Header, Modal.Title and so on).
I'd like to use this component as a server component in page.js, but I get the error you see in the image below.
https://cdn.discordapp.com/attachments/386066471153041409/1148568785951932508/image.png
Adding 'use client' solves the issue, however I'd like to know if this is normal behaviour and if there's a workaround to keep it server side.
Source below in my playground project
https://github.com/Kasui92/next-playground/blob/main/src/app/test/page.js
I tried to create a client component that returns itself as an Object containing different "sub-client-components" (ie what happens with Bootstrap where you have Modal, Modal.Header, Modal.Title and so on).
I'd like to use this component as a server component in page.js, but I get the error you see in the image below.
https://cdn.discordapp.com/attachments/386066471153041409/1148568785951932508/image.png
Adding 'use client' solves the issue, however I'd like to know if this is normal behaviour and if there's a workaround to keep it server side.
Source below in my playground project
https://github.com/Kasui92/next-playground/blob/main/src/app/test/page.js
Answered by fuma
To clarify, that is because you can't dot into a client component. So when you access "Modal.Title" where
Modal is an object, it fails.3 Replies
Assume you're talking about " use the component in a server component" as you can't use client component as a server component
It's generally recommended to use named exports like:
due to the behaviors of Next.js compiler. If you wanna do that anyway, as an alternative, use
It's generally recommended to use named exports like:
export { ModalTitle, ModalContent }due to the behaviors of Next.js compiler. If you wanna do that anyway, as an alternative, use
import * as Modal insteadimport * as Modal from "...";
<Modal.Title />To clarify, that is because you can't dot into a client component. So when you access "Modal.Title" where
Modal is an object, it fails.Answer
KasuiOP
Ok! TY