oxc-project/oxc · error · OxcDiagnostic

No duplicate props allowed. The prop "{prop_name}" is duplic

Error message

No duplicate props allowed. The prop "{prop_name}" is duplicated.

What it means

Diagnostic from react/jsx-no-duplicate-props (category: correctness). The same attribute name appears twice on one JSX opening element; the diagnostic carries labels on both the original and duplicate spans. React silently applies only the last duplicate prop, so a duplicate almost always hides a bug rather than being intentional. Note: this oxc port intentionally does NOT support the ignoreCase option — props are compared case-sensitively, so <App foo Foo /> is not flagged.

Source

Thrown at crates/oxc_linter/src/rules/react/jsx_no_duplicate_props.rs:18

use oxc_ast::{
    AstKind,
    ast::{JSXAttributeItem, JSXAttributeName},
};
use oxc_diagnostics::OxcDiagnostic;
use oxc_macros::declare_oxc_lint;
use oxc_span::Span;
use oxc_str::Str;
use rustc_hash::FxHashMap;

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

fn jsx_no_duplicate_props_diagnostic(prop_name: &str, span1: Span, span2: Span) -> OxcDiagnostic {
    OxcDiagnostic::warn(format!(
        "No duplicate props allowed. The prop \"{prop_name}\" is duplicated."
    ))
    .with_help("Remove one of the props, or rename them so each prop is distinct.")
    .with_labels([span1, span2])
}

#[derive(Debug, Default, Clone)]
pub struct JsxNoDuplicateProps;

declare_oxc_lint!(
    /// ### What it does
    ///
    /// This rule prevents duplicate props in JSX elements.
    ///
    /// ### Why is this bad?
    ///
    /// Having duplicate props in a JSX element is most likely a mistake.
    /// Creating JSX elements with duplicate props can cause unexpected behavior in your application.

View on GitHub (pinned to e1e7af627c)

Solutions

1. Delete one of the duplicated attributes, keeping the intended value (remember React uses the LAST occurrence)
2. If the duplicate comes from a merge conflict, re-resolve the conflict instead of keeping both sides
3. If you were relying on eslint-plugin-react's ignoreCase, note it is unsupported here: make casing consistent instead
4. Add a pre-commit oxlint run so duplicates never land

Example fix

// before
<App a="1" b="2" a="3" />

// after
<App a="3" b="2" />

npx oxlint -D react/jsx-no-duplicate-props src/

When it happens

Trigger: <App a a />, <App foo={2} bar baz foo={3} />, <App a="a" {...this.props} a="a" /> — i.e. the same JSXAttribute identifier name occurring twice among the element's attributes (spread attributes are skipped, only plain attributes are tracked in a name->span map).

Common situations: Merging props from multiple sources during refactor (base props + override props copy-pasted); long attribute lists where a prop is added twice by different people; class components migrating defaultProps inline; merge conflicts duplicating an attribute block.

Related errors

• Invalid handler prop name: {prop_key}
• `button` elements must have an explicit `type` attribute.
• `button` elements must have a valid `type` attribute.
• `checked` should be used with either `onChange` or `readOnly
• Use either `checked` or `defaultChecked`, but not both.

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