oxc-project/oxc · warning · OxcDiagnostic

JSX component {component_name} 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.

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 e1e7af627c)

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 {component_name} must be in PascalCase or SCRE
• Invalid handler name: {handler_name}
• Bad handler name
• Invalid handler prop name: {prop_key}
• `button` elements must have an explicit `type` attribute.

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