{"record":{"id":"5041ce3772b48d08","repo":"yewstack/yew","slug":"no-ctx-found-5041ce","errorCode":null,"errorMessage":"no ctx found","messagePattern":"no ctx found","errorType":"panic","errorClass":null,"httpStatus":null,"severity":"error","filePath":"website/versioned_docs/version-0.22/concepts/contexts.mdx","lineNumber":144,"sourceCode":"}\n\n/// The toolbar.\n/// This component has access to the context\n#[component]\npub fn Toolbar() -> Html {\n    html! {\n        <div>\n            <ThemedButton />\n        </div>\n    }\n}\n\n/// Button placed in `Toolbar`.\n/// As this component is a child of `ThemeContextProvider` in the component tree, it also has access\n/// to the context.\n#[component]\npub fn ThemedButton() -> Html {\n    let theme = use_context::<Theme>().expect(\"no ctx found\");\n\n    html! {\n        <button style={format!(\"background: {}; color: {};\", theme.background, theme.foreground)}>\n            { \"Click me!\" }\n        </button>\n    }\n}\n```\n\n### Step 2: Consuming context\n\n#### Function components\n\n`use_context` hook is used to consume contexts in function components.\nSee [docs for use_context](https://yew-rs-api.web.app/next/yew/functional/fn.use_context.html) to learn more.\n\n#### Struct components\n","sourceCodeStart":126,"sourceCodeEnd":162,"githubUrl":"https://github.com/yewstack/yew/blob/0e4a05472fac4e5fce1befe60fa4a1e43a36b6a3/website/versioned_docs/version-0.22/concepts/contexts.mdx#L126-L162","documentation":"This panic is `use_context::<Theme>().expect(\"no ctx found\")` in `ThemedButton` from Yew 0.22's contexts guide. `use_context` returns `Option<Theme>`: it finds the value only if some ancestor component rendered `<ContextProvider<Theme> context={...}>`. The guide places that provider inside `ThemeContextProvider` (contexts.mdx line 121), and the doc comment on `ThemedButton` states it must be a child of that provider — render it anywhere else and the expect panics.","triggerScenarios":"Rendering `<ThemedButton/>` outside a `ThemeContextProvider` subtree; the provider publishing a different type than `Theme` (e.g. a wrapper struct), so the type-directed lookup finds nothing; the provider unmounting on navigation while the button remains.","commonSituations":"Reusing the guide's `ThemedButton` in a new page/route that is not under the provider; refactors that move `ThemeContextProvider` deeper or into a sibling layout; renaming the context struct during upgrades so provider and consumer types diverge.","solutions":["Wrap the consuming tree in `<ContextProvider<Theme> context={(*ctx).clone()}>` — render through `ThemeContextProvider` exactly as the guide shows","Verify provider and consumer reference the same `Theme` struct (same crate path, no duplicate definition)","Degrade gracefully instead of panicking: `let theme = use_context::<Theme>().unwrap_or_default();` or `match` with a fallback theme","In component tests, always mount `ThemedButton` inside the provider"],"exampleFix":"// before\npub fn ThemedButton() -> Html {\n    let theme = use_context::<Theme>().expect(\"no ctx found\");\n    ...\n}\n\n// after — provide the context above the consumer\nhtml! {\n    <ContextProvider<Theme> context={Theme { background: \"#282c34\", foreground: \"#61dafb\" }}>\n        <Toolbar>\n            <ThemedButton />\n        </Toolbar>\n    </ContextProvider<Theme>>\n}","handlingStrategy":"fallback","validationCode":"// one accessor hook so the None case has a defined default\n#[hook]\nfn use_theme() -> Theme {\n    use_context::<Theme>().unwrap_or_default()\n}\n\n// ensure the provider is rendered above consumers:\n// <ContextProvider<Theme> context={...}> ... <ThemedButton/> ... </ContextProvider<Theme>>","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Render <ContextProvider<Theme>> once at the app root so no route can escape it","Route all context reads through a use_theme() hook with an explicit fallback","Keep a single definition of the Theme struct shared by provider and consumers","Integration-test that ThemedButton renders inside ThemeContextProvider"],"tags":["yew","context","hooks","panic"],"backgroundTag":"context-provider-missing","analyzedSha":"0e4a05472fac4e5fce1befe60fa4a1e43a36b6a3","analyzedAt":"2026-08-22T21:16:31.212Z","schemaVersion":2},"datasetVersion":"2026-08-23T01:17:44.959Z"}