oxc-project/oxc · warning · OxcDiagnostic

JSX component {component_name} must be in PascalCase or SCRE

Error message

JSX component {component_name} must be in PascalCase or SCREAMING_SNAKE_CASE

What it means

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.

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 to PascalCase when declaring and using it: <MyComponent/>
2. Keep SCREAMING_SNAKE_CASE only if the whole-constant style is intentional — that is exactly what allowAllCaps permits
3. 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
4. For namespaced usage, enable allowNamespace or restructure the export to a single PascalCase identifier

Example fix

// before (allowAllCaps: true)
<myComponent prop={v} />

// after
<MyComponent prop={v} />

npx oxlint -D react/jsx-pascal-case src/  # with allowAllCaps: true in config

When it happens

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

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

Related errors

• JSX component {component_name} must be in PascalCase
• 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/940a040bb7cc6676. Report an issue: GitHub.