{"record":{"id":"14293391442ed8f9","repo":"facebook/react","slug":"506","errorCode":"506","errorMessage":"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","messagePattern":"Functions are not valid as a child of Client Components\\. This may happen if you return (.+?) instead of <(.+?) /> from render\\. Or maybe you meant to call this function rather than return it\\.(.+?)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-server/src/ReactFlightServer.js","lineNumber":4278,"sourceCode":"    if (isOpaqueTemporaryReference(value)) {\n      throw new Error(\n        'Could not reference an opaque temporary reference. ' +\n          'This is likely due to misconfiguring the temporaryReferences options ' +\n          'on the server.',\n      );\n    } else if (/^on[A-Z]/.test(parentPropertyName)) {\n      throw new Error(\n        'Event handlers cannot be passed to Client Component props.' +\n          describeObjectForErrorMessage(parent, parentPropertyName) +\n          '\\nIf you need interactivity, consider converting part of this to a Client Component.',\n      );\n    } else if (\n      __DEV__ &&\n      (jsxChildrenParents.has(parent) ||\n        (jsxPropsParents.has(parent) && parentPropertyName === 'children'))\n    ) {\n      const componentName = value.displayName || value.name || 'Component';\n      throw new Error(\n        'Functions are not valid as a child of Client Components. This may happen if ' +\n          'you return ' +\n          componentName +\n          ' instead of <' +\n          componentName +\n          ' /> from render. ' +\n          'Or maybe you meant to call this function rather than return it.' +\n          describeObjectForErrorMessage(parent, parentPropertyName),\n      );\n    } else {\n      throw new Error(\n        'Functions cannot be passed directly to Client Components ' +\n          'unless you explicitly expose it by marking it with \"use server\". ' +\n          'Or maybe you meant to call this function rather than return it.' +\n          describeObjectForErrorMessage(parent, parentPropertyName),\n      );\n    }\n  }","sourceCodeStart":4260,"sourceCodeEnd":4296,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-server/src/ReactFlightServer.js#L4260-L4296","documentation":"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.","triggerScenarios":"<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.","commonSituations":"Render-prop patterns ported from client code; layout helpers returning component references; refactoring JSX into variables and losing the call/element syntax.","solutions":["Render the child instead of referencing it: use <SomeComponent /> rather than {SomeComponent}.","For callbacks, move the callback into a 'use client' wrapper or replace it with a server action.","Use {cond ? <Panel/> : null} for conditional children."],"exampleFix":"// before (Server Component)\n<ClientModal>{CloseButton}</ClientModal>\n\n// after\n<ClientModal><CloseButton /></ClientModal>","handlingStrategy":"type-guard","validationCode":"export function assertSerializableChildren(children: unknown) {\n  if (typeof children === 'function') {\n    throw new Error('children is a function reference — render <Component /> instead of passing it');\n  }\n}","typeGuard":"export function isRenderableChild(c: unknown): boolean {\n  return c == null || typeof c !== 'function' || typeof c === 'object';\n}","tryCatchPattern":null,"preventionTips":["Prefer JSX over component references in children positions.","Use {cond ? <Panel/> : null} for conditionals.","Develop against the DEV build to get this diagnostic before production."],"tags":["children","functions","dev-only","server-components"],"backgroundTag":"server-component-props","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}