Next.js 14 App router layout.tsx: Fails to spawn the command palette

[Aymericr]

Fails to spawn the command palette. I tried wrapping it into a 'use client' component but the issue keeps happening.

Dependencies:

• Next.js 14.2.3
• React 18

Error: Invariant failed: Input ref is undefined, make sure you attach `query.inputRefSetter` to your search input.

Call Stack
invariant
node_modules/tiny-invariant/dist/tiny-invariant.cjs.js (14:1)
Object.getInput
node_modules/kbar/lib/useStore.js (107:1)
handler
node_modules/kbar/lib/InternalEvents.js (277:1)

[0x33dm]

did you manage to solve this?

[0x33dm]

For me adding use client at the top of the provider ( which is them added to my root layout ) is yielding another error.

// KBarProvider.ts

'use client'

import {
  KBarAnimator,
  KBarPortal,
  KBarPositioner,
  KBarProvider as OriginalKBarProvider,
  KBarSearch
} from 'kbar'
import type { ReactNode } from 'react'

interface Props {
  children: ReactNode
}

const KBarProvider = ({ children }: Props) => {
  return (
    <OriginalKBarProvider>
      <KBarPortal>
        <KBarPositioner>
          <KBarAnimator>
            <KBarSearch />
            {/* <KBarResults /> */}
          </KBarAnimator>
        </KBarPositioner>
      </KBarPortal>
      {children}
    </OriginalKBarProvider>
  )
}

export default KBarProvider

The error i get is:

[!caution] TypeError: createContext 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/context-in-server-component

[stale[bot]]

Hey! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.