{"record":{"id":"61941841c83d22ff","repo":"yewstack/yew","slug":"expected-a-valid-closing-tag-for-component-note-f","errorCode":null,"errorMessage":"expected a valid closing tag for component\nnote: found opening tag `{lt}{0}{gt}`\nhelp: try `{lt}/{0}{gt}`","messagePattern":"expected a valid closing tag for component\nnote: found opening tag `(.+?)(.+?)(.+?)`\nhelp: try `(.+?)/(.+?)(.+?)`","errorType":"validation","errorClass":"syn::Error","httpStatus":null,"severity":"error","filePath":"packages/yew-macro/src/html_tree/html_component.rs","lineNumber":74,"sourceCode":"                    break None;\n                }\n                return Err(syn::Error::new_spanned(\n                    open.to_spanned(),\n                    \"this opening tag has no corresponding closing tag\",\n                ));\n            }\n\n            if trying_to_close() {\n                fn format_token_stream(ts: impl ToTokens) -> String {\n                    let string = ts.to_token_stream().to_string();\n                    // remove unnecessary spaces\n                    string.replace(' ', \"\")\n                }\n\n                let fork = input.fork();\n                let close = TagTokens::parse_end_content(&fork, |i_fork, tag| {\n                    let ty = i_fork.parse().map_err(|e| {\n                        syn::Error::new(\n                            e.span(),\n                            format!(\n                                \"expected a valid closing tag for component\\nnote: found opening \\\n                                 tag `{lt}{0}{gt}`\\nhelp: try `{lt}/{0}{gt}`\",\n                                format_token_stream(&open.ty),\n                                lt = open.tag.lt.to_token_stream(),\n                                gt = open.tag.gt.to_token_stream(),\n                            ),\n                        )\n                    })?;\n\n                    if ty != open.ty && !is_ide_completion() {\n                        let open_ty = &open.ty;\n                        Err(syn::Error::new_spanned(\n                            quote!(#open_ty #ty),\n                            format!(\n                                \"mismatched closing tags: expected `{}`, found `{}`\",\n                                format_token_stream(open_ty),","sourceCodeStart":56,"sourceCodeEnd":92,"githubUrl":"https://github.com/yewstack/yew/blob/0e4a05472fac4e5fce1befe60fa4a1e43a36b6a3/packages/yew-macro/src/html_tree/html_component.rs#L56-L92","documentation":"While parsing children of a non-self-closing component in `html!`, Yew watches for `</` and then attempts to parse the closing tag's content as a Rust type on a forked stream (html_component.rs:71-84). If that type parse fails, this error is raised with the opening tag echoed and the exact closing tag suggested in the help text. It is distinct from the 'mismatched closing tags' error, which fires when the closing type parses fine but differs from the opener.","triggerScenarios":"Closing a component with a fragment-style empty tag: `html! { <Modal>…</> }`; a closing tag containing non-type tokens such as `</Modal;>`, `</123>`, or `</Modal=>`.","commonSituations":"Muscle memory from JSX/React where `</>` closes any element, hand-edited or autocompleted tags with stray punctuation, and converting raw HTML mockups into `html!` macros.","solutions":["Replace the malformed closing tag with the one shown in the help text: `</Modal>`","Never use a bare `</>` inside `html!` — a fragment is written as the complete expression `<></>`","If the tag looks correct, check for stray punctuation or tokens between `</` and `>`"],"exampleFix":"// before\nhtml! {\n    <Modal>\n        <p>{ \"hi\" }</p>\n    </>\n}\n\n// after\nhtml! {\n    <Modal>\n        <p>{ \"hi\" }</p>\n    </Modal>\n}","handlingStrategy":"validation","validationCode":null,"typeGuard":null,"tryCatchPattern":null,"preventionTips":["Unlearn the JSX habit: `</>` is never a valid closer inside `html!`; components close with `</Component>` and fragments are `<></>` as a whole expression","When converting HTML mockups, finish each element's closing tag before moving to the next","Read the help line in the error — it prints the exact closing tag to use"],"tags":["rust","yew","html-macro","closing-tag","jsx","component"],"backgroundTag":"mismatched-closing-tag","analyzedSha":"0e4a05472fac4e5fce1befe60fa4a1e43a36b6a3","analyzedAt":"2026-08-22T21:16:31.212Z","schemaVersion":2},"datasetVersion":"2026-08-23T01:17:44.959Z"}