oxc-project/oxc · warning · OxcDiagnostic

Please provide an explicit key value. Using \"key\" as a sho

Error message

Please provide an explicit key value. Using \"key\" as a shorthand for \"key={true}\" is not allowed.

What it means

During the JSX transform, Oxc warns when it encounters a JSX attribute named `key` with no value, e.g. `<div key />`. Unlike boolean-ish HTML attributes, React assigns special meaning to `key` and requires an explicit value; `key` alone does NOT mean `key={true}`. The check lives in the attribute loop of `get_create_element_arguments` at crates/oxc_transformer/src/jsx/jsx_impl.rs:635-637: when the attribute name is the identifier `key` and `value.is_none()`, the `valueless_key` diagnostic (jsx/diagnostics.rs:44) is reported. In automatic runtime mode a valued `key` is hoisted to the third argument of `jsx()`; a valueless one cannot be.

Source

Thrown at crates/oxc_transformer/src/jsx/diagnostics.rs:44

        .with_help("Remove `importSource` option.")
}

#[cold]
#[expect(dead_code)]
pub fn invalid_import_source() -> OxcDiagnostic {
    OxcDiagnostic::warn("importSource cannot be an empty string or longer than u32::MAX bytes")
        .with_help("Fix `importSource` option.")
}

#[cold]
pub fn namespace_does_not_support(span: Span) -> OxcDiagnostic {
    OxcDiagnostic::warn("Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.")
        .with_label(span)
}

#[cold]
pub fn valueless_key(span: Span) -> OxcDiagnostic {
    OxcDiagnostic::warn("Please provide an explicit key value. Using \"key\" as a shorthand for \"key={true}\" is not allowed.")
        .with_label(span)
}

View on GitHub (pinned to e1e7af627c)

Solutions

1. Give the key an explicit stable value: `<Component key={item.id} />`
2. If the key is genuinely constant, write `<Component key="k" />` or `key={true}` explicitly as a string/literal
3. Remove the `key` attribute entirely if the element is not in a list and React does not need to track it

Example fix

// before
{items.map(item => <Row key />)}

// after
{items.map(item => <Row key={item.id} />)}

// Catch bare `key` attributes before running the transform
function hasValuelessKey(src: string): boolean {
  return /<[^>]*\skey(?:\s|=\s*\{\s*\})?[\s/>]/.test(src) && /\skey(?![=\w])/.test(src);
}
// or structurally: parse and walk JSXAttribute { name: 'key', value: null }

// Component-level guard in app code: require a usable key value
function safeKey(v: string | number | undefined): string | number {
  if (v === undefined || v === null) throw new Error('key requires an explicit value');
  return v;
}

When it happens

Trigger: Transforming JSX that contains `<Component key />` or `<li key />` with the JSX plugin enabled (any runtime, classic or automatic — the check runs before the runtime branch). The diagnostic fires per valueless `key` attribute; everything else about the element is still transformed.

Common situations: Copy-pasting list markup where `key` was written like a boolean HTML attribute (`<li key>` next to `<li disabled>`); refactoring template code and deleting the `key={item.id}` expression but leaving the attribute name; muscle memory from frameworks where bare attributes are truthy flags. Mirrors React/Babel's own 'key={true}' rejection so behavior parity is expected.

Related errors

• Namespace tags are not supported by default. React's JSX doe
• `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/3df8f299623778d0. Report an issue: GitHub.