NextJS 13 app Directory Support WITHOUT 'use client'

[DonaldLouch]

Hello,

I'm not sure if this has been posted?!

I was wondering if there is going to be support for using Chakra UI within the NextJS 13 app directory without the need of using 'use client'?! I would love to use the app directory but most of the libraries that I'm using in this tech stack needs the pages to be on the server and not using the 'use client' tag.

When I try using the server I get the following error:

You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

    ,-[/{PATH}/node_modules/@chakra-ui/accordion/dist/chunk-JDQBKIKM.mjs:8:1]
  8 | import { useControllableState } from "@chakra-ui/react-use-controllable-state";
  9 | import { mergeRefs } from "@chakra-ui/react-use-merge-refs";
 10 | import { callAllHandlers, warn } from "@chakra-ui/shared-utils";
 11 | import { useCallback, useEffect, useId, useRef, useState } from "react";
    :                                                 ^^^^^^^^
 12 | function useAccordion(props) {
 13 |   const {
 14 |     onChange,
    `----

Thanks 😊

[Ali-Aref]

same here, any updates on this?

[keithburgie]

I’m pretty new to Next and not sure if this will help with your use case, but you can wrap Chakra and other third-party components in a “use-client“ component and they will work: https://beta.nextjs.org/docs/rendering/server-and-client-components#third-party-packages