{"record":{"id":"7ac10d1cee91187c","repo":"facebook/docusaurus","slug":"docusaurus-error-the-children-of-browseronly-mu","errorCode":null,"errorMessage":"Docusaurus error: The children of <BrowserOnly> must be a \"render function\", e.g. <BrowserOnly>{() => <span>{window.location.href}</span>}</BrowserOnly>.\nCurrent type: ${isValidElement(children) ? 'React element' : typeof children}","messagePattern":"Docusaurus error: The children of <BrowserOnly> must be a \"render function\", e\\.g\\. <BrowserOnly>(.+?)</span>\\}</BrowserOnly>\\.\nCurrent type: (.+?)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/docusaurus/src/client/exports/BrowserOnly.tsx","lineNumber":22,"sourceCode":" * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport React, {isValidElement, type ReactNode} from 'react';\nimport useIsBrowser from '@docusaurus/useIsBrowser';\nimport type {Props} from '@docusaurus/BrowserOnly';\n\n// Similar comp to the one described here:\n// https://www.joshwcomeau.com/react/the-perils-of-rehydration/#abstractions\nexport default function BrowserOnly({children, fallback}: Props): ReactNode {\n  const isBrowser = useIsBrowser();\n\n  if (isBrowser) {\n    if (\n      typeof children !== 'function' &&\n      process.env.NODE_ENV === 'development'\n    ) {\n      throw new Error(`Docusaurus error: The children of <BrowserOnly> must be a \"render function\", e.g. <BrowserOnly>{() => <span>{window.location.href}</span>}</BrowserOnly>.\nCurrent type: ${isValidElement(children) ? 'React element' : typeof children}`);\n    }\n    return <>{children?.()}</>;\n  }\n\n  return fallback ?? null;\n}\n","sourceCodeStart":4,"sourceCodeEnd":30,"githubUrl":"https://github.com/facebook/docusaurus/blob/3f483e80e326cc646b54b83d564b3f0c4881b9a6/packages/docusaurus/src/client/exports/BrowserOnly.tsx#L4-L30","documentation":"<BrowserOnly> defers rendering to the browser by invoking its children as a function. The component checks typeof children === 'function' only in development (NODE_ENV === 'development') and throws when children is anything else (a JSX element, a variable, etc.). The message tells you the received type. Pass a render function: <BrowserOnly>{() => <span>{window.location.href}</span>}</BrowserOnly>.","triggerScenarios":"Write <BrowserOnly><span>{window.location.href}</span></BrowserOnly> (element, not function); pass a pre-built element variable as children; refactor that drops the arrow wrapper.","commonSituations":"First use of BrowserOnly; converting a regular component to BrowserOnly without wrapping children in an arrow function; copy-paste from non-BrowserOnly patterns.","solutions":["Wrap children in an arrow function: <BrowserOnly>{() => <YourComponent />}</BrowserOnly>.","If you pass a variable, pass a closure: <BrowserOnly>{() => node}</BrowserOnly>.","Note the check fires only in dev; production silently calls children?.() and renders nothing for non-functions, so fix it before shipping."],"exampleFix":"// before\n<BrowserOnly>\n  <span>{window.location.href}</span>\n</BrowserOnly>\n// after\n<BrowserOnly>\n  {() => <span>{window.location.href}</span>}\n</BrowserOnly>","handlingStrategy":"validation","validationCode":"function assertBrowserOnlyChildren(children: unknown) {\n  if (typeof children !== 'function') {\n    throw new Error(\n      '<BrowserOnly> children must be a render function: () => ReactNode',\n    );\n  }\n}","typeGuard":"const isRenderFunction = (\n  c: unknown,\n): c is () => React.ReactNode => typeof c === 'function';","tryCatchPattern":null,"preventionTips":["Always write <BrowserOnly>{() => ...}</BrowserOnly>; the arrow is not optional.","Add an ESLint rule or review checklist catching <BrowserOnly> without a function child.","Remember the dev-only throw means CI/dev will catch it, but production silently no-ops."],"tags":["browser-only","react","ssr","dev-only"],"backgroundTag":null,"analyzedSha":"3f483e80e326cc646b54b83d564b3f0c4881b9a6","analyzedAt":"2026-08-12T13:25:04.382Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}