facebook/react · error · Error

506

506

Error message

Functions are not valid as a child of Client Components. This may happen if you return %s instead of <%s /> from render. Or maybe you meant to call this function rather than return it.%s

What it means

A DEV-only diagnostic for the children position: while serializing, React recognized (via its jsxChildrenParents/jsxPropsParents bookkeeping) that the unserializable function sits where children are expected. The dominant cause is referencing a component instead of rendering it — {Label} instead of <Label/> — or handing a render callback to a Client Component as a child.

Source

Thrown at packages/react-server/src/ReactFlightServer.js:4278

    if (isOpaqueTemporaryReference(value)) {
      throw new Error(
        'Could not reference an opaque temporary reference. ' +
          'This is likely due to misconfiguring the temporaryReferences options ' +
          'on the server.',
      );
    } else if (/^on[A-Z]/.test(parentPropertyName)) {
      throw new Error(
        'Event handlers cannot be passed to Client Component props.' +
          describeObjectForErrorMessage(parent, parentPropertyName) +
          '\nIf you need interactivity, consider converting part of this to a Client Component.',
      );
    } else if (
      __DEV__ &&
      (jsxChildrenParents.has(parent) ||
        (jsxPropsParents.has(parent) && parentPropertyName === 'children'))
    ) {
      const componentName = value.displayName || value.name || 'Component';
      throw new Error(
        'Functions are not valid as a child of Client Components. This may happen if ' +
          'you return ' +
          componentName +
          ' instead of <' +
          componentName +
          ' /> from render. ' +
          'Or maybe you meant to call this function rather than return it.' +
          describeObjectForErrorMessage(parent, parentPropertyName),
      );
    } else {
      throw new Error(
        'Functions cannot be passed directly to Client Components ' +
          'unless you explicitly expose it by marking it with "use server". ' +
          'Or maybe you meant to call this function rather than return it.' +
          describeObjectForErrorMessage(parent, parentPropertyName),
      );
    }
  }

View on GitHub (pinned to eafeac097b)

Solutions

1. Render the child instead of referencing it: use <SomeComponent /> rather than {SomeComponent}.
2. For callbacks, move the callback into a 'use client' wrapper or replace it with a server action.
3. Use {cond ? <Panel/> : null} for conditional children.

Example fix

// before (Server Component)
<ClientModal>{CloseButton}</ClientModal>

// after
<ClientModal><CloseButton /></ClientModal>

export function assertSerializableChildren(children: unknown) {
  if (typeof children === 'function') {
    throw new Error('children is a function reference — render <Component /> instead of passing it');
  }
}

export function isRenderableChild(c: unknown): boolean {
  return c == null || typeof c !== 'function' || typeof c === 'object';
}

When it happens

Trigger: <ClientComp>{SomeComponent}</ClientComp>; <ClientComp>{() => <X/>}</ClientComp>; a server component returning ChildComp from a helper instead of <ChildComp />; conditional children like {open && Panel} that pass a component reference.

Common situations: Render-prop patterns ported from client code; layout helpers returning component references; refactoring JSX into variables and losing the call/element syntax.

Related errors

• 374
• 375
• Cannot not suspend ID '${suspendedSet[i]}'.
• Using Maps as children is not supported. Use an array of key
• getProfilingData not supported by this renderer

AI-assisted analysis of facebook/react@eafeac097b (2026-08-21). Data as JSON: /api/errors/14293391442ed8f9. Report an issue: GitHub.