Skip to content

make SingletonHooksContainer compatible with server components (Next.js) #527

Description

@szamanr

hi! when using Next.js with app router, all components are considered server components by default, unless you include "use client" directive at the top of the file.

currently, trying to render SingletonHooksContainer in the top-level of the application results in an error:

Error: useState only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component

the workaround is to create a new component with the directive and render that instead of the library component:

"use client";

import { SingletonHooksContainer } from "react-singleton-hook";

export const SingletonHooks = SingletonHooksContainer;

not sure if this issue is specific to next.js or would also occur when using a different setup with react server components. but i think a simple fix would be to include "use client"; at the top of the SingletonHooksContainer file.

thanks!

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions