Functions break when used in React Server Components

[justin-gurtz]

Type-based methods such as getChildrenByTypeDeep don't seem to work when using React Server Components (specifically with the Next.js 13 app directory), even when using customTypeKey or 'use client' in all children of a Server Component.

For example:

const Example = () => <p>Hello World!</p>

const Wrapper = ({ children }) => {
  const filtered = getChildrenByType(children, Example)
  console.log(filtered.length)

  return children
}

'use client'

const ClientComponent = () => (
  <Wrapper>
    <Example />
  </Wrapper>
)

-> 1

const ServerComponent = async () => {
  const data = await getData()

  return (
    <Wrapper>
      <Example />
    </Wrapper>
  )
}

-> 0