Theo's Typesafe CultTTC
Theo's Typesafe Cult•3y ago
thejessewinton

Passing function error on Contentful live preview client component

I'm trying to build a custom component for Contentful's live preview feature in Next 13 with the app directory. My idea is to create a client component which accepts a data prop from the parent, as well as a generic type to make the updatedData prop that's passed back down type-safe:

'use client'

import { useContentfulLiveUpdates } from '@contentful/live-preview/react'

const isFunction = <T extends CallableFunction = CallableFunction>(value: unknown): value is T =>
  typeof value === 'function'

export const runIfFunction = <T, U>(valueOrFn: T | ((...fnArgs: U[]) => T), ...args: U[]) => {
  return isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn
}

type MaybeRenderProp<P> = React.ReactNode | ((props: P) => React.ReactNode)

type LivePreviewWrapperProps<T> = {
  children: MaybeRenderProp<{
    updatedData: T
  }>
  data: T
}

export const LivePreviewWrapper = <T extends Record<string, unknown>>({
  children,
  data
}: LivePreviewWrapperProps<T>) => {
  const updatedData = useContentfulLiveUpdates<T>(data, { locale: 'en-US' })

  return runIfFunction(children, { updatedData })
}


But, when I'm trying to use it in the app, this is the error that I'm getting:

Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
  <... data={{...}} children={function}>
                             ^^^^^^^^^^


Anyone have any ideas of how to get around this? I can include my implementation inside a page, but this message is too long atm.
Was this page helpful?