oxc-project/oxc · error · OxcDiagnostic

' ' is not defined.

Error message

'{ident_name}' is not defined.

What it means

Diagnostic from react/jsx-no-undef (category: correctness). An identifier used inside JSX — a component tag (<Foo/>), or a reference inside an expression container — is not declared in scope (no import, variable, or global definition). The linter resolves the name against the module's scopes; JSX expression containers are treated like normal expressions, so undefined references there are flagged even though classic ESLint's no-undef did not look inside JSX without this rule. The rule's docs note it is largely redundant in TypeScript, where the compiler already catches undeclared variables.

Solutions

1. Add the missing import or declaration for the identifier
2. If the name is a legitimate global (e.g. an injected analytics object), declare it in .oxlintrc.json globals (or env) rather than silencing per line
3. If the identifier is only declared in a script type or ambient .d.ts, make sure that declaration is part of the linted project
4. In TypeScript projects where the compiler covers this, disable react/jsx-no-undef to remove duplicate reporting

Example fix

// before
function App() {
  return <Modal open={open}/>;
}

// after
import Modal from './Modal';
import { useOpen } from './state';
function App() {
  const open = useOpen();
  return <Modal open={open}/>;
}

npx oxlint -D react/jsx-no-undef src/

When it happens

Trigger: Rendering a component that was never imported: <Modal open={open}/>; referencing an undefined variable inside JSX: <div>{undefinedVar}</div>; using browser/Node globals (window is fine, but e.g. ga, dataLayer, process) that are not declared or not enabled in the lint environment/globals configuration.

Common situations: Auto-import failing when adding a component; copy-pasted JSX referencing helpers that were not copied; globals from analytics scripts or injected variables not listed in oxlint's globals/env config; projects where the rule duplicates what the TS compiler already reports.

Related errors

• Bad handler name
• `button` elements must have a valid `type` attribute.
• `button` elements must have an explicit `type` attribute.
• `checked` should be used with either `onChange` or…
• Comments inside children section of tag should be placed…

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

Appendix: source

Thrown at crates/oxc_linter/src/rules/react/jsx_no_undef.rs:16

use oxc_ast::{
    AstKind,
    ast::{IdentifierReference, JSXElementName, JSXMemberExpression, JSXMemberExpressionObject},
};
use oxc_diagnostics::OxcDiagnostic;
use oxc_macros::declare_oxc_lint;
use oxc_span::Span;

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

fn jsx_no_undef_diagnostic(ident_name: &str, span: Span) -> OxcDiagnostic {
    OxcDiagnostic::warn(format!("'{ident_name}' is not defined.")).with_label(span)
}

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

declare_oxc_lint!(
    /// ### What it does
    ///
    /// Disallow undeclared variables in JSX.
    ///
    /// Note that this rule is generally unnecessary if you are using TypeScript, as
    /// TypeScript will catch undeclared variables for you.
    ///
    /// ### Why is this bad?
    ///
    /// It is most likely a potential ReferenceError caused by a misspelling of a variable or parameter name.
    ///
    /// ### Examples

View on GitHub (pinned to e1e7af627c)