{"record":{"id":"96aeef12fddc9dbd","repo":"yewstack/yew","slug":"no-ctx-found","errorCode":null,"errorMessage":"no ctx found","messagePattern":"no ctx found","errorType":"panic","errorClass":null,"httpStatus":null,"severity":"error","filePath":"website/versioned_docs/version-0.21/advanced-topics/struct-components/hoc.mdx","lineNumber":43,"sourceCode":"\n#[function_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#[function_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.21/advanced-topics/struct-components/hoc.mdx#L25-L61","documentation":"This snippet from the Yew docs (HOC example) calls use_context::<Theme>(), which returns Option<Rc<Theme>> - None when no ContextProvider<Theme> ancestor is mounted - and the expect turns that into a panic. It fires whenever a context consumer renders without a matching provider of the same type above it in the component tree.","triggerScenarios":"Rendering ThemedButtonHOC (or any use_context::<Theme>() consumer) outside <ContextProvider<Theme> ...>; a provider supplying a different type; a provider positioned below or beside the consumer instead of above it.","commonSituations":"Forgetting the provider at the app root; refactoring the tree so consumers slip outside the provider; rendering the component in isolation in tests or stories; subtle type mismatches between what is provided and what is requested.","solutions":["Wrap the tree above every consumer: <ContextProvider<Theme> context={theme}> ... </ContextProvider<Theme>>","Verify the provider is an ancestor (not a sibling) of the consumer","If the context is genuinely optional, handle None instead of expecting: use_context::<Theme>().unwrap_or_default()","In tests, mount consumers under a provider or assert against the default"],"exampleFix":"// before\n#[function_component]\npub fn App() -> Html {\n    html! { <ThemedButtonHOC /> } // no provider above -> panic\n}\n\n// after\n#[function_component]\npub fn App() -> Html {\n    let theme = use_state(|| Theme::default());\n    html! {\n        <ContextProvider<Theme> context={(*theme).clone()}>\n            <ThemedButtonHOC />\n        </ContextProvider<Theme>>\n    }\n}","handlingStrategy":"fallback","validationCode":null,"typeGuard":null,"tryCatchPattern":null,"preventionTips":["Always mount <ContextProvider<Theme>> above every consumer before adding use_context calls","Treat context as optional data: use_context::<Theme>().unwrap_or_default() instead of expect when a sensible default exists","In tests and stories, wrap consumers with a provider or assert on the default"],"tags":["context","use-context","docs","provider"],"backgroundTag":"missing-context-provider","analyzedSha":"0e4a05472fac4e5fce1befe60fa4a1e43a36b6a3","analyzedAt":"2026-08-22T21:16:31.212Z","schemaVersion":2},"datasetVersion":"2026-08-23T01:17:44.959Z"}