{"id":10817,"library":"eslint-config-react-app","title":"ESLint Configuration for Create React App","description":"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.","status":"active","version":"7.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/facebook/create-react-app","tags":["javascript"],"install":[{"cmd":"npm install eslint-config-react-app","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-config-react-app","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-config-react-app","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for ESLint functionality.","package":"eslint","optional":false}],"imports":[{"note":"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.","wrong":"import config from 'eslint-config-react-app';","symbol":"ESLint Configuration","correct":"{\n  \"extends\": \"react-app\"\n}"},{"note":"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.","wrong":"{\n  \"extends\": \"react-app/jest\"\n}","symbol":"ESLint Configuration with Jest","correct":"{\n  \"extends\": [\n    \"react-app\",\n    \"react-app/jest\"\n  ]\n}"}],"quickstart":{"code":"/* .eslintrc.json */\n{\n  \"extends\": [\n    \"react-app\",\n    \"react-app/jest\"\n  ],\n  \"rules\": {\n    // Override or add custom rules here if necessary\n    // For example, to relax a rule:\n    \"no-unused-vars\": \"warn\",\n    // Or to enforce a rule:\n    \"react/jsx-uses-react\": \"off\",\n    \"react/react-in-jsx-scope\": \"off\"\n  }\n}\n\n/* package.json (example dependencies) */\n{\n  \"name\": \"my-react-app\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"dependencies\": {\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\",\n    \"react-scripts\": \"5.0.1\"\n  },\n  \"devDependencies\": {\n    \"eslint\": \"^8.0.0\",\n    \"eslint-config-react-app\": \"^7.0.1\"\n  },\n  \"scripts\": {\n    \"start\": \"react-scripts start\",\n    \"build\": \"react-scripts build\",\n    \"test\": \"react-scripts test\",\n    \"eject\": \"react-scripts eject\",\n    \"lint\": \"eslint . --ext .js,.jsx,.ts,.tsx\"\n  }\n}","lang":"json","description":"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."},"warnings":[{"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.","message":"Version 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.","severity":"breaking","affected_versions":">=5.0.0"},{"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.","message":"Version 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.","severity":"breaking","affected_versions":">=4.0.0 <5.0.0"},{"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.","message":"While `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.","severity":"gotcha","affected_versions":">=3.4.2"},{"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.","message":"Create 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.","severity":"deprecated","affected_versions":">=5.0.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"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.","error":"ESLint: Configuration for rule \"react/react-in-jsx-scope\" is invalid"},{"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\"`.","cause":"The `eslint-config-react-app` package is not installed or ESLint cannot resolve its path.","error":"Error: Cannot find module 'eslint-config-react-app'"},{"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.","cause":"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.","error":"error  'React' was used before it was defined (no-undef)"}],"ecosystem":"npm"}