react/jsx-no-undef

Disallow components in JSX that are not declared or imported

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

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

Every option, set to its default:

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

Examples#

example.jsx1 problem
export function Page() {
  return <Header title="Home" />;
}
example.jsxNo problems
import { Header } from "./header";

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

Options#

OptionDefaultWhat it does
allowGlobalsfalseAccept components that are global variables.

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

example.jsx1 problem
/* global Header */

export function Page() {
  return <Header title="Home" />;
}
example.jsxwith { "allowGlobals": true }No problems
/* global Header */

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