{"record":{"id":"3be3757528db0c83","repo":"oxc-project/oxc","slug":"jsx-component-component-name-must-be-in-pascalca-3be375","errorCode":null,"errorMessage":"JSX component {component_name} must be in PascalCase","messagePattern":"JSX component (.+?) must be in PascalCase","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/e1e7af627c8843ab64044ed466b128fcc21a035b/crates/oxc_linter/src/rules/react/jsx_pascal_case.rs#L9-L45","documentation":"Default-form diagnostic of react/jsx-pascal-case (allowAllCaps false, the default): a JSX component name is not PascalCase. React dispatches on the first letter — lowercase first letters make the tag a string DOM element name — so a component used as <myComponent/> does not render the component at all, which is why the rule insists on an initial uppercase letter followed by the PascalCase pattern.","triggerScenarios":"<myComponent/>, <headerNav/>, or any user-defined component tag whose name is lowercase-first or otherwise not PascalCase, with the rule at its default options. Namespaced names (<foo:Bar/>) additionally require allowNamespace to be permitted.","commonSituations":"camelCase helper components; importing a component under an aliased lowercase name; developers assuming the missing render is a React bug when it is actually the lowercase-tag rule; mixing web components (legitimately lowercase, hyphenated) with React components.","solutions":["Rename the component (declaration and usage) to PascalCase: <MyComponent/>","If the tag is a custom web component, keep it lowercase and hyphenated (<my-element/>) and let the rule's semantics distinguish it","Enable allowAllCaps if SCREAMING_SNAKE component names should pass, or allowNamespace for foo:Bar forms","Check the import alias — import { x as MyX } fixes usage without touching the source module"],"exampleFix":"// before\n<headerNav />\n\n// after\n<HeaderNav />","handlingStrategy":"validation","validationCode":"npx oxlint -D react/jsx-pascal-case src/","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Always start component identifiers with an uppercase letter — React's tag dispatch depends on it","Fix import aliases (import { x as MyX }) when the source module's export cannot be renamed","If a lowercase tag is truly a custom element, make it hyphenated (<my-element/>) so it reads as DOM, not a broken component reference"],"tags":["react","jsx","naming-convention","pascalcase","oxlint","lint"],"backgroundTag":"jsx-component-pascal-case","analyzedSha":"e1e7af627c8843ab64044ed466b128fcc21a035b","analyzedAt":"2026-08-20T07:01:07.079Z","contentChangedAt":"2026-08-20T07:01:07.079Z","schemaVersion":2},"datasetVersion":"2026-09-14T00:17:10.932Z"}