eslint-config-xo-react

0.30.1 verified Sat Apr 25 auth: no javascript

ESLint shareable config for React projects, designed to be used with eslint-config-xo. Current stable version is 0.30.1, released in early 2025. This package enforces a strict, opinionated set of React and JSX rules including hooks, prop types, accessibility, and security. It supports both React and Preact, and requires Node.js >=18.18 and ESLint >=9.18.0. Unlike generic React ESLint configs, it integrates tightly with the XO style guide and provides options for spaces vs tabs in JSX. Ships TypeScript types, but is ESLint 9 (flat config) only from v0.30.0.

Common errors

error Error: ESLint configuration in eslint.config.js is invalid: config[1] is not a valid config object. ↓

cause Forgot to spread the result of eslintConfigXoReact() into the flat config array.

fix

Use ...eslintConfigXoReact() instead of eslintConfigXoReact() alone.

error Error: Cannot find module 'eslint-config-xo-react' or its corresponding type declarations. ↓

cause Using CommonJS require() with an ESM-only package (v0.30.0+).

fix

Convert to ESM: use import and set "type": "module" in package.json, or use dynamic import().

error Parsing error: The keyword 'export' is reserved ↓

cause ESLint is still using .eslintrc format (env/parserOptions) instead of flat config.

fix

Upgrade to ESLint 9 and use eslint.config.js with flat config. Remove .eslintrc files.

error Definition for rule 'react/function-component-definition' was not found ↓

cause Missing eslint-plugin-react peer dependency.

fix

Install eslint-plugin-react: npm install --save-dev eslint-plugin-react

Warnings

breaking In v0.30.0, the config moved from subexports to options. The import path changed; subexports like 'eslint-config-xo-react/react' no longer work. ↓

fix Use default import: import eslintConfigXoReact from 'eslint-config-xo-react' and pass options as object.

breaking v0.30.0 requires ESLint >=9.18.0 (flat config only). Legacy ESLint 8 .eslintrc formats are not supported. ↓

fix Upgrade ESLint to 9.x and migrate to eslint.config.js flat config.

breaking v0.27.0 requires function declarations for named React components (enforced by react/function-component-definition rule). Arrow function components will be flagged. ↓

fix Use function declarations for named components: function MyComponent() { ... } instead of const MyComponent = () => { ... }.

gotcha This config is meant to be used together with eslint-config-xo. If used alone, many base rules from XO (e.g., indent, quotes) will be missing, causing conflicts. ↓

fix Always include eslint-config-xo in your ESLint flat config array before eslint-config-xo-react.

deprecated XO style via package.json 'xo' key is deprecated in favor of ESLint flat config. The README tip about XO integration is outdated. ↓

fix Use ESLint flat config with eslint-config-xo and eslint-config-xo-react directly.

Install

npm install eslint-config-xo-react

yarn add eslint-config-xo-react

pnpm add eslint-config-xo-react

Imports

default (eslintConfigXoReact)

wrong

const eslintConfigXoReact = require('eslint-config-xo-react');

correct

import eslintConfigXoReact from 'eslint-config-xo-react';

ESM-only since v0.30.0 (flat config). CommonJS require() will fail.

Options type
```
import type { EslintConfigXoReactOptions } from 'eslint-config-xo-react';
```
TypeScript users should import the options type for strong typing.
Spread usage with options
wrong
```
export default [ eslintConfigXoReact({ space: true }) ];
```
correct
```
export default [ ...eslintConfigXoReact({ space: true }) ];
```
The function returns an array of config objects; you must spread it into the flat config array. Failure to spread will cause 'undefined' or invalid config errors.

Quickstart

Sets up ESLint flat config for React with XO style guide, using spaces for JSX indentation.

// Install: npm install --save-dev eslint-config-xo eslint-config-xo-react eslint-plugin-react eslint-plugin-react-hooks

// eslint.config.js
import eslintConfigXo from 'eslint-config-xo';
import eslintConfigXoReact from 'eslint-config-xo-react';

export default [
  ...eslintConfigXo(),
  ...eslintConfigXoReact({ space: true }),  // Use 2 spaces for JSX
];