{"record":{"id":"9b47ac22948f6f6e","repo":"yewstack/yew","slug":"no-ctx-found-9b47ac","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/advanced-topics/struct-components/hoc.mdx","lineNumber":43,"sourceCode":"\n#[component]\npub fn App() -> Html {\n    let ctx = use_state(|| Theme {\n        foreground: \"#000000\".to_owned(),\n        background: \"#eeeeee\".to_owned(),\n    });\n\n    html! {\n        <ContextProvider<Theme> context={(*ctx).clone()}>\n            <ThemedButtonHOC />\n        </ContextProvider<Theme>>\n    }\n}\n\n// highlight-start\n#[component]\npub fn ThemedButtonHOC() -> Html {\n    let theme = use_context::<Theme>().expect(\"no ctx found\");\n\n    html! {<ThemedButtonStructComponent {theme} />}\n}\n// highlight-end\n\n#[derive(Properties, PartialEq)]\npub struct Props {\n    pub theme: Theme,\n}\n\nstruct ThemedButtonStructComponent;\n\nimpl Component for ThemedButtonStructComponent {\n    type Message = ();\n    type Properties = Props;\n\n    fn create(_ctx: &Context<Self>) -> Self {\n        Self","sourceCodeStart":25,"sourceCodeEnd":61,"githubUrl":"https://github.com/yewstack/yew/blob/0e4a05472fac4e5fce1befe60fa4a1e43a36b6a3/website/versioned_docs/version-0.22/advanced-topics/struct-components/hoc.mdx#L25-L61","documentation":"This panic is `use_context::<Theme>().expect(\"no ctx found\")` inside `ThemedButtonHOC`, the higher-order component from Yew 0.22's struct-component HOC guide. `use_context` walks the component tree for the nearest ancestor `ContextProvider<Theme>` and returns `Option<Theme>`; None means no provider for that exact type was found above this component. The guide wires the provider in `ThemeContextProvider` via `<ContextProvider<Theme> context={(*ctx).clone()}>`, so the HOC panics whenever it is rendered outside that subtree.","triggerScenarios":"Mounting `<ThemedButtonHOC/>` without an ancestor `<ContextProvider<Theme>>`; providing a different type than the one consumed (e.g. the provider stores a wrapper struct while the HOC asks for `Theme`); the provider living in a sibling branch of the tree; the provider being unmounted on route change while the HOC stays mounted.","commonSituations":"Extracting the HOC example into demos or unit tests that forgot to wrap it in `ThemeContextProvider`; refactors that move the provider below the consumer; type renames during version upgrades that silently desynchronize provider and consumer context types.","solutions":["Wrap the tree (or at least the route subtree containing the HOC) in `<ContextProvider<Theme> context={theme.clone()}>` — i.e. render via `ThemeContextProvider` as the guide does","Confirm provider and consumer use the identical type `Theme`, not a wrapper or a renamed copy","Replace the expect with a fallback: `use_context::<Theme>().unwrap_or_default()` (impl `Default` for `Theme`) or a `match` with a hard-coded default theme","In tests, mount `ThemedButtonHOC` inside `ThemeContextProvider` rather than standalone"],"exampleFix":"// before\npub fn ThemedButtonHOC() -> Html {\n    let theme = use_context::<Theme>().expect(\"no ctx found\");\n    html! { <ThemedButtonStructComponent {theme} /> }\n}\n\n// after — app root provides the context\n#[function_component(App)]\nfn app() -> Html {\n    html! {\n        <ContextProvider<Theme> context={Theme::default()}>\n            <ThemedButtonHOC />\n        </ContextProvider<Theme>>\n    }\n}","handlingStrategy":"fallback","validationCode":"// central accessor: the None case is handled in exactly one place\n#[hook]\nfn use_theme() -> Theme {\n    use_context::<Theme>().unwrap_or_default()\n}\n\n// provider wiring check (fails loudly in dev, early)\n// render <ThemeContextProvider> above every consumer in the app tree","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Mount <ContextProvider<Theme>> once near the app root so every route inherits it","Expose a single use_theme() hook instead of raw use_context calls scattered in components","Use one shared struct (single definition) as the context type to avoid provider/consumer type drift","Smoke-test that ThemedButtonHOC 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"}