react/jsx-no-undef

<Header /> reads a variable named Header. If nothing declares or imports it, usually because of a typo or a forgotten import, rendering throws a ReferenceError.

Names that start with a lowercase letter, such as <div> or <my-element>, are HTML elements, so the rule skips them. In <Menu.Item>, it only checks Menu.

Configure

Off by default. To turn it on:

[lint.rules]
"react/jsx-no-undef" = "error" # or "warn"

Every option, set to its default:

[lint.rules]
"react/jsx-no-undef" = ["error", {
  allowGlobals = false,
}]

Examples

Reported:

export function Page() {
  return <Header title="Home" />;
}

Not reported:

import { Header } from "./header";

export function Page() {
  return <Header title="Home" />;
}

Options

By default a global doesn't count in a module, even one you declared:

/* global Header */

export function Page() {
  return <Header title="Home" />;
}

/* global Header */

export function Page() {
  return <Header title="Home" />;
}