Plugin: react-featuresRules
react-in-jsx-scope
react-in-jsx-scope rule
Prevent missing React in scope when using JSX. This rule is part of eslint-plugin-react-features.
Quick Summary
| Aspect | Details |
|---|---|
| Severity | Error (for React <17) |
| Auto-Fix | ✅ Yes (adds import) |
| Category | React |
| ESLint MCP | ✅ Optimized for ESLint MCP integration |
| Best For | React projects before version 17 |
Rule Details
Before React 17, JSX was transformed to React.createElement(), requiring React in scope.
React Version Behavior
| React Version | JSX Transform | React Import Required |
|---|---|---|
| < 17 | Classic | ✅ Yes |
| 17+ | New | ❌ No |
Examples
❌ Incorrect (React < 17)
// No React binding: the classic runtime compiles this to React.createElement
export function Component() {
return <div>Hello</div>;
}
// Named imports do not bring `React` into scope
import { useState } from 'react';
export const Fragment = () => <>Hello</>;
// A type-only import is erased at compile time
import type React from 'react';
export const el: React.ReactNode = <span />;Every JSX element and fragment needs a value named React in scope: a default
or namespace import, a require, or any other binding. A file that declares
/** @jsxRuntime automatic */ needs none.
✅ Correct
// React < 17: Import required
import React from 'react';
export function Component() {
return <div>Hello</div>;
}
// React 17+: Import optional (rule can be disabled)
export function Component() {
return <div>Hello</div>;
}Configuration Examples
Basic Usage (React < 17)
{
rules: {
'react-features/react-in-jsx-scope': 'error'
}
}React 17+ (Disable Rule)
{
rules: {
'react-features/react-in-jsx-scope': 'off'
}
}Related Rules
jsx-key- JSX key requirementsdisplay-name- Component naming
Further Reading
- New JSX Transform - React blog
Known False Negatives
- A custom
@jsxpragma (/** @jsx h */) is not read: the rule still asks forReact.
Use this rule
npm install -D oxlint-plugin-react-features{ "jsPlugins": ["oxlint-plugin-react-features"], "rules": { "react-features/react-in-jsx-scope": "error" }}import { defineConfig } from 'vite-plus';export default defineConfig({ lint: { jsPlugins: ['oxlint-plugin-react-features'], rules: { 'react-features/react-in-jsx-scope': 'error', }, },});oxlint-plugin-react-features re-exports eslint-plugin-react-features/oxlint: the same rules under the same IDs, and no ESLint install. Why oxlint.
Did this rule catch something? Star the repo to get new CWE coverage as we ship it — or follow the AI-code-security benchmarks behind these rules.