{"record":{"id":"0733dd29434290cd","repo":"GitbookIO/gitbook","slug":"this-component-must-be-used-within-a-gitbookprovi","errorCode":null,"errorMessage":"This component must be used within a <GitBookProvider />","messagePattern":"This component must be used within a <GitBookProvider />","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/embed/src/react/GitBookProvider.tsx","lineNumber":33,"sourceCode":"        () => ({\n            siteURL,\n        }),\n        [siteURL]\n    );\n\n    const client = React.useMemo(() => createGitBook(options), [options]);\n\n    return <GitBookContext.Provider value={client}>{children}</GitBookContext.Provider>;\n}\n\n/**\n * Hook to access the GitBook client.\n */\nexport function useGitBook() {\n    const context = React.useContext(GitBookContext);\n\n    if (!context) {\n        throw new Error('This component must be used within a <GitBookProvider />');\n    }\n\n    return context;\n}\n","sourceCodeStart":15,"sourceCodeEnd":38,"githubUrl":"https://github.com/GitbookIO/gitbook/blob/db67585ee243d063c459a855988f21612cea9c95/packages/embed/src/react/GitBookProvider.tsx#L15-L38","documentation":"Thrown by useGitBook from @gitbook/embed react bindings when React.useContext(GitBookContext) returns null, meaning no <GitBookProvider> wraps the consuming component. The hook has no fallback, so any useGitBook() call outside the provider fails at render time. This is the standard React context-missing error pattern.","triggerScenarios":"Calling useGitBook() in a component rendered outside the <GitBookProvider> tree; rendering the provider and consumer in separate React roots; multiple copies of @gitbook/embed so the context object identity differs between provider and consumer.","commonSituations":"Adding a component that uses useGitBook to a page where the provider wasn't added; provider mounted in one root (e.g. portal or separate createRoot) while the consumer is in another; version mismatch or duplicate package installs causing two different GitBookContext instances; consuming the hook in a story/test without wrapping in the provider.","solutions":["Wrap the component tree (or at least all components using useGitBook) with <GitBookProvider>","Verify the provider actually wraps the component (check JSX tree, not module imports)","If duplicates of @gitbook/embed exist in node_modules, dedupe them so provider and consumer share one module instance","In tests/stories, wrap the render in a <GitBookProvider> decorator or mock the hook"],"exampleFix":"// before\nfunction App() {\n    return <MyComponent />; // MyComponent calls useGitBook()\n}\n\n// after\nfunction App() {\n    return (\n        <GitBookProvider>\n            <MyComponent />\n        </GitBookProvider>\n    );\n}","handlingStrategy":"validation","validationCode":null,"typeGuard":null,"tryCatchPattern":null,"preventionTips":["Always wrap the app in <GitBookProvider> at the root","Dedupe @gitbook/embed installs so context identity is shared","In tests, use a decorator that renders inside <GitBookProvider>"],"tags":["react","context","provider","hooks"],"backgroundTag":"missing-context-provider","analyzedSha":"db67585ee243d063c459a855988f21612cea9c95","analyzedAt":"2026-08-28T17:49:47.831Z","schemaVersion":2},"datasetVersion":"2026-08-28T21:17:43.275Z"}