{"id":19627,"library":"eslint-config-xo-react","title":"eslint-config-xo-react","description":"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.","status":"active","version":"0.30.1","language":"javascript","source_language":"en","source_url":"https://github.com/xojs/eslint-config-xo-react","tags":["javascript","react","jsx","eslintconfig","xo","xoxo","hugs","kisses","happy","typescript"],"install":[{"cmd":"npm install eslint-config-xo-react","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-config-xo-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-config-xo-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; version >=9.18.0 required as of v0.30.0 (flat config)","package":"eslint","optional":false},{"reason":"provides React-specific lint rules; installed automatically as a dependency","package":"eslint-plugin-react","optional":false},{"reason":"provides hooks rules (e.g., rules-of-hooks, exhaustive-deps); installed automatically","package":"eslint-plugin-react-hooks","optional":false},{"reason":"requires base XO config as a foundation; peers not enforced but recommended","package":"eslint-config-xo","optional":true}],"imports":[{"note":"ESM-only since v0.30.0 (flat config). CommonJS require() will fail.","wrong":"const eslintConfigXoReact = require('eslint-config-xo-react');","symbol":"default (eslintConfigXoReact)","correct":"import eslintConfigXoReact from 'eslint-config-xo-react';"},{"note":"TypeScript users should import the options type for strong typing.","symbol":"Options type","correct":"import type { EslintConfigXoReactOptions } from 'eslint-config-xo-react';"},{"note":"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.","wrong":"export default [ eslintConfigXoReact({ space: true }) ];","symbol":"Spread usage with options","correct":"export default [ ...eslintConfigXoReact({ space: true }) ];"}],"quickstart":{"code":"// Install: npm install --save-dev eslint-config-xo eslint-config-xo-react eslint-plugin-react eslint-plugin-react-hooks\n\n// eslint.config.js\nimport eslintConfigXo from 'eslint-config-xo';\nimport eslintConfigXoReact from 'eslint-config-xo-react';\n\nexport default [\n  ...eslintConfigXo(),\n  ...eslintConfigXoReact({ space: true }),  // Use 2 spaces for JSX\n];","lang":"typescript","description":"Sets up ESLint flat config for React with XO style guide, using spaces for JSX indentation."},"warnings":[{"fix":"Use default import: import eslintConfigXoReact from 'eslint-config-xo-react' and pass options as object.","message":"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.","severity":"breaking","affected_versions":">=0.30.0"},{"fix":"Upgrade ESLint to 9.x and migrate to eslint.config.js flat config.","message":"v0.30.0 requires ESLint >=9.18.0 (flat config only). Legacy ESLint 8 .eslintrc formats are not supported.","severity":"breaking","affected_versions":">=0.30.0"},{"fix":"Use function declarations for named components: function MyComponent() { ... } instead of const MyComponent = () => { ... }.","message":"v0.27.0 requires function declarations for named React components (enforced by react/function-component-definition rule). Arrow function components will be flagged.","severity":"breaking","affected_versions":">=0.27.0"},{"fix":"Always include eslint-config-xo in your ESLint flat config array before eslint-config-xo-react.","message":"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.","severity":"gotcha","affected_versions":"all"},{"fix":"Use ESLint flat config with eslint-config-xo and eslint-config-xo-react directly.","message":"XO style via package.json 'xo' key is deprecated in favor of ESLint flat config. The README tip about XO integration is outdated.","severity":"deprecated","affected_versions":">=0.30.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use ...eslintConfigXoReact() instead of eslintConfigXoReact() alone.","cause":"Forgot to spread the result of eslintConfigXoReact() into the flat config array.","error":"Error: ESLint configuration in eslint.config.js is invalid: config[1] is not a valid config object."},{"fix":"Convert to ESM: use import and set \"type\": \"module\" in package.json, or use dynamic import().","cause":"Using CommonJS require() with an ESM-only package (v0.30.0+).","error":"Error: Cannot find module 'eslint-config-xo-react' or its corresponding type declarations."},{"fix":"Upgrade to ESLint 9 and use eslint.config.js with flat config. Remove .eslintrc files.","cause":"ESLint is still using .eslintrc format (env/parserOptions) instead of flat config.","error":"Parsing error: The keyword 'export' is reserved"},{"fix":"Install eslint-plugin-react: npm install --save-dev eslint-plugin-react","cause":"Missing eslint-plugin-react peer dependency.","error":"Definition for rule 'react/function-component-definition' was not found"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}