#Next + AppShell question

11 messages · Page 1 of 1 (latest)

shadow summit
#

I'm trying to use the AppShell in my Next JS app and it seems to only work if I add 'use client' at the top of my app shell file, otherwise I get the following error:

`TypeError: (0 , mantine_hooks__WEBPACK_IMPORTED_MODULE_1_.useDisclosure) is not a function or its return value is not iterable
at RootAppShell (./components/AppShell.tsx:18:95)
at stringify (<anonymous>)
at stringify (<anonymous>)
digest: "1848237298"
4 |
5 | export function RootAppShell() {

6 | const [opened, { toggle }] = useDisclosure();`

Doesn't 'use client' remove any SSR functionalities from my app?
I need a way to use the app shell with SSR.

manic dagger
shadow summit
#

Won't this turn all children component to client components, too?

manic dagger
# 
// app/layout.tsx

export default RootLayout({ children }) {
  return (
    <body>
      <YourAppShell>
        {children}
      </YourAppShell>
    </body>
  );
}
manic dagger
shadow summit
#

Alright, I did this but I'm getting the following error in my layout.tsx.

Type '{ children: ReactNode; }' has no properties in common with type 'IntrinsicAttributes'.

manic dagger
shadow summit
#

My bad, that did the trick thank you!

If I understand correctly, {children} in this case is passed as a prop so that's why it's not converted to a client component?

From NextJS docs: This means that by defining a "use client" in a file, all other modules imported into it, including child components, are considered part of the client bundle.

manic dagger
grand cosmos