oxc-project/oxc · warning · OxcDiagnostic

JSX component must be in PascalCase

Error message

JSX component {component_name} must be in PascalCase

What it means

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.

Solutions

1. Rename the component (declaration and usage) to PascalCase: <MyComponent/>
2. If the tag is a custom web component, keep it lowercase and hyphenated (<my-element/>) and let the rule's semantics distinguish it
3. Enable allowAllCaps if SCREAMING_SNAKE component names should pass, or allowNamespace for foo:Bar forms
4. Check the import alias — import { x as MyX } fixes usage without touching the source module

Example fix

// before
<headerNav />

// after
<HeaderNav />

npx oxlint -D react/jsx-pascal-case src/

When it happens

Trigger: <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.

Common situations: 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.

Related errors

• JSX component must be in PascalCase or SCREAMING_SNAKE_CASE
• Bad handler name
• Invalid handler name
• Invalid handler prop name
• `button` elements must have a valid `type` attribute.

AI-assisted analysis of oxc-project/oxc@1f902a6962 (2026-08-20). Data as JSON: /api/errors/3be3757528db0c83. Report an issue: GitHub.

Appendix: source

Thrown at crates/oxc_linter/src/rules/react/jsx_pascal_case.rs:27

use crate::{
    AstNode,
    context::LintContext,
    rule::{DefaultRuleConfig, Rule},
};

fn jsx_pascal_case_diagnostic(
    span: Span,
    component_name: &str,
    allow_all_caps: bool,
) -> OxcDiagnostic {
    let message = if allow_all_caps {
        format!("JSX component {component_name} must be in PascalCase or SCREAMING_SNAKE_CASE")
    } else {
        format!("JSX component {component_name} must be in PascalCase")
    };

    OxcDiagnostic::warn(message).with_label(span)
}

#[derive(Debug, Default, Clone, Deserialize)]
pub struct JsxPascalCase(Box<JsxPascalCaseConfig>);

#[derive(Debug, Default, Clone, JsonSchema, Deserialize)]
#[serde(rename_all = "camelCase", default, deny_unknown_fields)]
pub struct JsxPascalCaseConfig {
    /// Whether to allow all-caps component names.
    pub allow_all_caps: bool,
    /// Whether to allow namespaced component names.
    pub allow_namespace: bool,
    /// Whether to allow leading underscores in component names.
    pub allow_leading_underscore: bool,
    /// List of component names to ignore.
    pub ignore: Vec<CompactStr>,
}

View on GitHub (pinned to 1f902a6962)