{"record":{"id":"8cf1a1f1a6f35f3c","repo":"yewstack/yew","slug":"no-ctx-found-8cf1a1","errorCode":null,"errorMessage":"no ctx found","messagePattern":"no ctx found","errorType":"panic","errorClass":null,"httpStatus":null,"severity":"error","filePath":"website/versioned_docs/version-0.23/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.23/advanced-topics/struct-components/hoc.mdx#L25-L61","documentation":"This panic is `use_context::<Theme>().expect(\"no ctx found\")` in `ThemedButtonHOC` from Yew 0.23's HOC guide. The higher-order component consumes the theme via `use_context`, which returns `Option` and only finds a value when an ancestor rendered `<ContextProvider<Theme> context={...}>` — the guide's `ThemeContextProvider` does this. Rendering the HOC outside that provider subtree panics here.","triggerScenarios":"Mounting `<ThemedButtonHOC/>` with no `ContextProvider<Theme>` ancestor; provider publishing a different type than the HOC consumes; provider in a sibling subtree; provider unmounted on route change.","commonSituations":"Demos or tests extracting the HOC without its provider; refactors relocating `ThemeContextProvider`; context type renames across version upgrades desynchronizing provider and consumer.","solutions":["Render `ThemedButtonHOC` inside `ThemeContextProvider` / `<ContextProvider<Theme> context={...}>`","Confirm both sides use the identical `Theme` type","Swap the expect for `unwrap_or_default()` or a match with a default theme so a missing provider degrades instead of crashing","Mount the HOC within the provider in tests"],"exampleFix":"// before\npub fn ThemedButtonHOC() -> Html {\n    let theme = use_context::<Theme>().expect(\"no ctx found\");\n    html! { <ThemedButtonStructComponent {theme} /> }\n}\n\n// after\n#[hook]\nfn use_theme() -> Theme {\n    use_context::<Theme>().unwrap_or_default()\n}\n\npub fn ThemedButtonHOC() -> Html {\n    let theme = use_theme();\n    html! { <ThemedButtonStructComponent {theme} /> }\n}","handlingStrategy":"fallback","validationCode":"#[hook]\nfn use_theme() -> Theme {\n    use_context::<Theme>().unwrap_or_default()\n}\n\n// consumers then never see None; providers stay in ThemeContextProvider at the tree root","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Wrap the app (or route subtree) in <ContextProvider<Theme> context={...}>","Use one use_theme() accessor hook with a default instead of raw use_context().expect()","Share the exact Theme type definition between provider and HOC","Test the HOC only inside the provider subtree"],"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"}