Registry / testing / eslint-config-react-app

eslint-config-react-app

library7.0.1jsnpmunverified

eslint-config-react-app provides the official ESLint configuration used by Create React App projects. It ensures a consistent and opinionated linting setup, enforcing best practices for React applications, JavaScript/TypeScript syntax, accessibility, and code quality without requiring extensive manual configuration. The package is currently stable at version 7.0.1, with updates typically coinciding with major Create React App releases to align with new React features, tool updates (like Webpack, Jest, ESLint itself), and evolving language standards. Its primary differentiator is its tight integration and maintenance by the Create React App team, offering a battle-tested and low-overhead solution for linting React projects initialized with CRA. This configuration simplifies managing a complex ESLint setup, making it ideal for developers who prefer a zero-configuration start for their React projects and rely on community-vetted defaults.

testing

npm install eslint-config-react-app

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · ESLINT-CONFIG-REAC

eslint-config-react-app

testingjavascriptv7.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ESLint Configuration

✓ { "extends": "react-app" }

✗ import config from 'eslint-config-react-app';

eslint-config-react-app is an ESLint shareable configuration, not a JavaScript module. It is consumed via the `extends` property in an ESLint configuration file (e.g., .eslintrc.json or .eslintrc.js), not imported in source code. Do not use `require()` or `import` statements directly.

ESLint Configuration with Jest

✓ { "extends": [ "react-app", "react-app/jest" ] }

✗ { "extends": "react-app/jest" }

To include Jest-specific linting rules, extend both 'react-app' and 'react-app/jest'. The Jest rules should typically be listed after the base 'react-app' config to ensure proper overriding or extension.

This quickstart shows how to configure ESLint to extend `eslint-config-react-app` in a `.eslintrc.json` file for a Create React App project, including Jest rules, and provides an example `package.json` with relevant dependencies and lint script.

/* .eslintrc.json */ { "extends": [ "react-app", "react-app/jest" ], "rules": { // Override or add custom rules here if necessary // For example, to relax a rule: "no-unused-vars": "warn", // Or to enforce a rule: "react/jsx-uses-react": "off", "react/react-in-jsx-scope": "off" } } /* package.json (example dependencies) */ { "name": "my-react-app", "version": "0.1.0", "private": true, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1" }, "devDependencies": { "eslint": "^8.0.0", "eslint-config-react-app": "^7.0.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "lint": "eslint . --ext .js,.jsx,.ts,.tsx" } }

Debug

Known issues

breakingVersion 5.0.0 introduced significant updates to underlying tools including webpack 5, Jest 27, ESLint 8, and PostCSS 8. Projects upgrading from `eslint-config-react-app` v4 (or earlier) to v5 and beyond will also need to ensure their `eslint` peer dependency is at least `^8.0.0` and that other tooling (e.g., `react-scripts`) is compatible.

fix

Ensure `eslint` is updated to a compatible version (e.g., `^8.0.0`) and that your `react-scripts` package is also updated to v5.0.0 or later to maintain full compatibility with the updated tooling chain.

affects: >=5.0.0

breakingVersion 4.0.0 introduced support for Fast Refresh, React 17 (including the new JSX transform), and TypeScript 4. Upgrading to this version might require updates to your React and TypeScript versions to fully leverage or avoid compatibility issues with the new features and syntax.

fix

Update `react`, `react-dom` to `^17.0.0` (or newer) and `typescript` to `^4.0.0` (or newer) as appropriate for your project. Be aware of the new JSX transform, which changes how `React` needs to be imported for JSX.

affects: >=4.0.0 <5.0.0

gotchaWhile `npm audit` might report vulnerabilities in underlying packages like `resolve-url-loader`, `webpack-dev-server`, or `terser-webpack-plugin`, several release notes explicitly state these vulnerabilities 'did not affect Create React App projects'. This is because CRA's specific usage patterns or included polyfills mitigate the reported issues.

fix

Review the specific vulnerability details and the `eslint-config-react-app` release notes. Often, these warnings can be safely ignored for Create React App projects if the project is up-to-date with `react-scripts` and `eslint-config-react-app` maintenance releases, as they typically include patches or mitigations. Avoid unnecessary manual dependency overrides which might introduce new issues.

affects: >=3.4.2

deprecatedCreate React App 5.0.1 and later templates use `createRoot` for React 18 compatibility. While `eslint-config-react-app` itself doesn't directly enforce this, older React setup patterns might produce linting warnings or runtime issues when used with React 18.

fix

For new React 18 projects, ensure your `index.js` uses `ReactDOM.createRoot().render()` instead of `ReactDOM.render()`. For existing projects, update your `react-scripts` to v5.0.1 or newer and adjust your `index.js` to use `createRoot` if migrating to React 18.

affects: >=5.0.1

Errors

Common errors & fixes

ESLint: Configuration for rule "react/react-in-jsx-scope" is invalid

This error typically occurs when using React 17's new JSX transform feature (`jsx: 'automatic'` in Babel/TypeScript) without disabling the corresponding ESLint rule that checks for explicit `import React from 'react'` in files using JSX.

fix

Add `"react/react-in-jsx-scope": "off"` and `"react/jsx-uses-react": "off"` to the `rules` section of your `.eslintrc.json` file. Ensure your Babel or TypeScript configuration is set to use the automatic JSX runtime.

Error: Cannot find module 'eslint-config-react-app'

The `eslint-config-react-app` package is not installed or ESLint cannot resolve its path.

fix

Run `npm install --save-dev eslint-config-react-app eslint` or `yarn add --dev eslint-config-react-app eslint` to install the package and its peer dependency. Verify your `.eslintrc` file correctly references `"extends": "react-app"`.

error 'React' was used before it was defined (no-undef)

This usually indicates an issue with `eslint-plugin-react` configuration not correctly recognizing the React global or the new JSX transform, particularly in older setups or after partial upgrades.

fix

Ensure `eslint-plugin-react` is correctly configured and that your `.eslintrc.json` extends `react-app`. If using React 17+ and the new JSX transform, ensure `"react/react-in-jsx-scope": "off"` and `"react/jsx-uses-react": "off"` rules are applied as described above.

Upgrade

Version history

7.0.1latest on npm

Audit

Dependencies

eslintrequiredRequired peer dependency for ESLint functionality.

Agent activity

11 hits · last 30 days

node

Resources

githubhttps://github.com/facebook/create-react-app ↗

packagehttps://www.npmjs.com/package/eslint-config-react-app ↗

homepagehttps://create-react-app.dev ↗