{"record":{"id":"940a040bb7cc6676","repo":"oxc-project/oxc","slug":"jsx-component-component-name-must-be-in-pascalca","errorCode":null,"errorMessage":"JSX component {component_name} must be in PascalCase or SCREAMING_SNAKE_CASE","messagePattern":"JSX component (.+?) must be in PascalCase or SCREAMING_SNAKE_CASE","errorType":"validation","errorClass":"OxcDiagnostic","httpStatus":null,"severity":"warning","filePath":"crates/oxc_linter/src/rules/react/jsx_pascal_case.rs","lineNumber":27,"sourceCode":"\nuse crate::{\n    AstNode,\n    context::LintContext,\n    rule::{DefaultRuleConfig, Rule},\n};\n\nfn jsx_pascal_case_diagnostic(\n    span: Span,\n    component_name: &str,\n    allow_all_caps: bool,\n) -> OxcDiagnostic {\n    let message = if allow_all_caps {\n        format!(\"JSX component {component_name} must be in PascalCase or SCREAMING_SNAKE_CASE\")\n    } else {\n        format!(\"JSX component {component_name} must be in PascalCase\")\n    };\n\n    OxcDiagnostic::warn(message).with_label(span)\n}\n\n#[derive(Debug, Default, Clone, Deserialize)]\npub struct JsxPascalCase(Box<JsxPascalCaseConfig>);\n\n#[derive(Debug, Default, Clone, JsonSchema, Deserialize)]\n#[serde(rename_all = \"camelCase\", default, deny_unknown_fields)]\npub struct JsxPascalCaseConfig {\n    /// Whether to allow all-caps component names.\n    pub allow_all_caps: bool,\n    /// Whether to allow namespaced component names.\n    pub allow_namespace: bool,\n    /// Whether to allow leading underscores in component names.\n    pub allow_leading_underscore: bool,\n    /// List of component names to ignore.\n    pub ignore: Vec<CompactStr>,\n}\n","sourceCodeStart":9,"sourceCodeEnd":45,"githubUrl":"https://github.com/oxc-project/oxc/blob/1f902a69625cd14e6d8dc58feca94da099d2d251/crates/oxc_linter/src/rules/react/jsx_pascal_case.rs#L9-L45","documentation":"Diagnostic from react/jsx-pascal-case when the allowAllCaps option is true: a user-defined JSX component name is neither PascalCase nor SCREAMING_SNAKE_CASE. React treats lowercase tags as host DOM elements, so <myComponent/> silently renders an unknown <mycomponent> DOM node instead of your component — the naming check is therefore functional, not cosmetic. With allowAllCaps enabled, UPPER_SNAKE names (e.g. <FOO_BAR/>, common for constants/HOCs) are accepted in addition to PascalCase.","triggerScenarios":"Configuration { \"allowAllCaps\": true } plus a non-PascalCase, non-SCREAMING_SNAKE component tag: <myComponent/>, <svgIcon/>, <my.company/> (namespace also requires allowNamespace). The diagnostic formats the offending component_name into the message.","commonSituations":"Porting eslint-plugin-react settings that enabled allowAllCaps for constant-exported components; teams using UPPER_SNAKE exports for styled/theme constants rendered as components; namespaced components (Foo.Bar) needing the separate allowNamespace option.","solutions":["Rename the component to PascalCase when declaring and using it: <MyComponent/>","Keep SCREAMING_SNAKE_CASE only if the whole-constant style is intentional — that is exactly what allowAllCaps permits","If the tag is genuinely a DOM/web-component element, keep it lowercase and lowercase it fully (<my-element/>) so it is not treated as a component","For namespaced usage, enable allowNamespace or restructure the export to a single PascalCase identifier"],"exampleFix":"// before (allowAllCaps: true)\n<myComponent prop={v} />\n\n// after\n<MyComponent prop={v} />","handlingStrategy":"validation","validationCode":"npx oxlint -D react/jsx-pascal-case src/  # with allowAllCaps: true in config","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Name React components PascalCase at declaration and at every usage site; lowercase-first tags render as DOM nodes","Reserve SCREAMING_SNAKE_CASE for the constant-exported components your config explicitly allows via allowAllCaps","Hyphenated lowercase names belong to web components only — keep that distinction visible in code review"],"tags":["react","jsx","naming-convention","pascalcase","oxlint","lint"],"backgroundTag":"jsx-component-pascal-case","analyzedSha":"1f902a69625cd14e6d8dc58feca94da099d2d251","analyzedAt":"2026-08-20T07:01:07.079Z","contentChangedAt":"2026-08-20T07:01:07.079Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}