{"record":{"id":"ad2328010554b5b3","repo":"oxc-project/oxc","slug":"namespace-tags-are-not-supported-by-default-react","errorCode":null,"errorMessage":"Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.","messagePattern":"Namespace tags are not supported by default\\. React's JSX doesn't support namespace tags\\. You can set `throwIfNamespace: false` to bypass this warning\\.","errorType":"validation","errorClass":"OxcDiagnostic","httpStatus":null,"severity":"warning","filePath":"crates/oxc_transformer/src/jsx/diagnostics.rs","lineNumber":38,"sourceCode":"}\n\n#[cold]\n#[expect(dead_code)]\npub fn import_source_cannot_be_set() -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"importSource cannot be set when runtime is classic.\")\n        .with_help(\"Remove `importSource` option.\")\n}\n\n#[cold]\n#[expect(dead_code)]\npub fn invalid_import_source() -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"importSource cannot be an empty string or longer than u32::MAX bytes\")\n        .with_help(\"Fix `importSource` option.\")\n}\n\n#[cold]\npub fn namespace_does_not_support(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.\")\n        .with_label(span)\n}\n\n#[cold]\npub fn valueless_key(span: Span) -> OxcDiagnostic {\n    OxcDiagnostic::warn(\"Please provide an explicit key value. Using \\\"key\\\" as a shorthand for \\\"key={true}\\\" is not allowed.\")\n        .with_label(span)\n}\n","sourceCodeStart":20,"sourceCodeEnd":47,"githubUrl":"https://github.com/oxc-project/oxc/blob/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_transformer/src/jsx/diagnostics.rs#L20-L47","documentation":"During the JSX (React) transform, Oxc warns when a JSX element uses an XML namespace tag name such as `<f:image />` or `<svg:rect />` and the `throwIfNamespace` option is true. The JSX grammar permits namespace names, but React's runtime (`React.createElement`) does not resolve them, so Babel — which Oxc mirrors — defaults `throwIfNamespace` to true. The diagnostic is emitted at crates/oxc_transformer/src/jsx/jsx_impl.rs:826 when `self.options.throw_if_namespace` is set; the option defaults to true (crates/oxc_transformer/src/jsx/options.rs:67-68).","triggerScenarios":"Transforming `.jsx`/`.tsx` source containing a namespaced element name (JSXMemberExpression-with-namespace / `Ident:Ident` form like `<math:mn>2</math:mn>`) with the JSX plugin enabled and `throwIfNamespace` not explicitly set to false (it defaults to true). Also triggered by copying XML/XSLT/SVG-in-XML snippets straight into JSX.","commonSituations":"Pasting raw SVG-with-namespace or XSL templates into React components; JSX files authored for non-React JSX runtimes (e.g. Solid, Inferno configs, or old `react-jsx` versions) then compiled with React defaults; teams migrating from Babel who relied on `throwIfNamespace: false` but forgot to carry the option into the oxc/oxc-transform config.","solutions":["Replace the namespace tag with a normal component or property access: `<f:image />` → `<FImage />` or `<f.Image />` style member expressions supported by React","If your JSX runtime genuinely handles namespaces, set `throwIfNamespace: false` in the JSX options to silence the warning (matches Babel's escape hatch named in the message)","If the file is XML-ish data rather than UI, move it out of JSX (data file, dangerouslySetInnerHTML, or separate template)"],"exampleFix":"// before\n<svg:rect width=\"10\" height=\"10\" />\n\n// after\n<svg>...<rect width=\"10\" height=\"10\" /></svg> // or a wrapper component <SvgRect />","handlingStrategy":"validation","validationCode":"// Scan JSX sources before transform when throwIfNamespace stays true\nfunction containsNamespaceTag(src: string): boolean {\n  return /<[A-Za-z][\\w.-]*:[A-Za-z][\\w.-]*[\\s/>]/.test(src);\n}\nif (containsNamespaceTag(fileContents)) {\n  throw new Error(`${file}: JSX namespace tags are rejected by the React transform`);\n}","typeGuard":"// For data-driven templates, validate tag names before rendering them as JSX\nconst isPlainTagName = (name: string): boolean => /^[A-Za-z][\\w.-]*$/.test(name);\nfunction renderTag(name: string) {\n  if (!isPlainTagName(name)) throw new Error(`Unsupported tag name: ${name}`);\n  return React.createElement(name);\n}","tryCatchPattern":null,"preventionTips":["Default the JSX config with an explicit decision: either keep `throwIfNamespace: true` (React-safe) or document `throwIfNamespace: false` for non-React runtimes","Lint for namespace tags (`<[a-z]+:[a-z]+`) in .jsx/.tsx in CI so pasted XML/SVG fails fast with context","Avoid pasting raw XML templates into JSX; convert them once into components or import as data"],"tags":["oxc","jsx","react","namespace","transformer"],"backgroundTag":"jsx-unsupported-syntax","analyzedSha":"e1e7af627c8843ab64044ed466b128fcc21a035b","analyzedAt":"2026-08-20T07:01:07.079Z","contentChangedAt":"2026-08-20T07:01:07.079Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}