{"record":{"id":"98e08f3ccf6094bb","repo":"facebook/docusaurus","slug":"hook-is-called-outside-the-codeblockcontextprovid","errorCode":null,"errorMessage":"Hook is called outside the <CodeBlockContextProvider>. ","messagePattern":"Hook is called outside the <CodeBlockContextProvider>\\. ","errorType":"exception","errorClass":"ReactContextError","httpStatus":null,"severity":"error","filePath":"packages/docusaurus-theme-common/src/utils/codeBlockUtils.tsx","lineNumber":495,"sourceCode":"  wordWrap: WordWrap;\n  children: ReactNode;\n}): ReactNode {\n  // Should we optimize this in 2 contexts?\n  // Unlike metadata, wordWrap is stateful and likely to trigger re-renders\n  const value: CodeBlockContextValue = useMemo(() => {\n    return {metadata, wordWrap};\n  }, [metadata, wordWrap]);\n  return (\n    <CodeBlockContext.Provider value={value}>\n      {children}\n    </CodeBlockContext.Provider>\n  );\n}\n\nexport function useCodeBlockContext(): CodeBlockContextValue {\n  const value = useContext(CodeBlockContext);\n  if (value === null) {\n    throw new ReactContextError('CodeBlockContextProvider');\n  }\n  return value;\n}\n","sourceCodeStart":477,"sourceCodeEnd":499,"githubUrl":"https://github.com/facebook/docusaurus/blob/3f483e80e326cc646b54b83d564b3f0c4881b9a6/packages/docusaurus-theme-common/src/utils/codeBlockUtils.tsx#L477-L499","documentation":"Thrown by `useCodeBlockContext()` when its context is `null`, meaning the hook was called outside `<CodeBlockContextProvider>`. The provider wraps each rendered `<CodeBlock>` (and CodeBlock MDX) and exposes metadata + word-wrap state; consumers must be descendants.","triggerScenarios":"A component that reads code-block metadata (e.g. a swizzled `CodeBlock` sub-part like the copy button or word-wrap toggle) is rendered outside the provider subtree. Common in isolated tests or swizzled layouts that restructure the CodeBlock tree.","commonSituations":"Swizzling `CodeBlock` and splitting sub-components so the provider no longer wraps them; rendering a CodeBlock child in isolation (Storybook/test) without the provider; portal escaping the provider.","solutions":["Keep sub-components that call `useCodeBlockContext()` inside `<CodeBlockContextProvider>`.","Wrap isolated test renders of those sub-components with the provider and a mock value.","Diff swizzled CodeBlock against upstream to confirm the provider still wraps the inner tree."],"exampleFix":"// before — subcomponent rendered outside provider\n<CopyButton /> // throws\n// after\n<CodeBlockContextProvider value={mockValue}>\n  <CopyButton />\n</CodeBlockContextProvider>","handlingStrategy":"validation","validationCode":"import {useContext} from 'react';\nimport {CodeBlockContext} from '@docusaurus/theme-common/internal';\nfunction useCodeBlockContextSafe() {\n  return useContext(CodeBlockContext); // null if outside provider\n}","typeGuard":null,"tryCatchPattern":"try {\n  const {metadata, wordWrap} = useCodeBlockContext();\n} catch (e) {\n  if (e instanceof Error && e.message.includes('CodeBlockContextProvider')) return null;\n  throw e;\n}","preventionTips":["Keep CodeBlock sub-components inside `<CodeBlockContextProvider>`.","Provide a mock context value in isolated tests.","Diff swizzled CodeBlock against upstream."],"tags":["react","context","code-block","theme-common"],"backgroundTag":null,"analyzedSha":"3f483e80e326cc646b54b83d564b3f0c4881b9a6","analyzedAt":"2026-08-12T13:25:04.382Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}