I have recently updated my eslint version in create-react-app project. Previously I was using eslint V7.24 and I was using .eslintrc.js file but after updating to eslint v9.0.0 I started getting error that old format is not supported so I created new eslint.config.js file to migrate from V8 to V9 and also updated other required packages. I have migrated most of the code but now when I am running npm run lint, I am getting below mentioned error. I am sharing my devDependancies from package.json file and eslint.config.js file code here. Please let me know what am I missing here.
Oops! Something went wrong! :(
ESLint: 9.0.0
TypeError: Key "rules": Key "react/jsx-closing-bracket-location": Could not find "jsx-closing-bracket-location" in plugin "react".
at throwRuleNotFoundError (/Users/Pradhumn_Sharma/Projects/impro-fe/node_modules/eslint/lib/config/rule-validator.js:66:11)
at RuleValidator.validate (/Users/Pradhumn_Sharma/Projects/impro-fe/node_modules/eslint/lib/config/rule-validator.js:147:17)
at [finalizeConfig] (/Users/Pradhumn_Sharma/Projects/impro-fe/node_modules/eslint/lib/config/flat-config-array.js:211:23)
at FlatConfigArray.getConfig (/Users/Pradhumn_Sharma/Projects/impro-fe/node_modules/@humanwhocodes/config-array/api.js:1022:55)
at FlatConfigArray.isFileIgnored (/Users/Pradhumn_Sharma/Projects/impro-fe/node_modules/@humanwhocodes/config-array/api.js:1046:15)
at /Users/Pradhumn_Sharma/Projects/impro-fe/node_modules/eslint/lib/eslint/eslint-helpers.js:322:49
at Array.reduce (<anonymous>)
at entryFilter (/Users/Pradhumn_Sharma/Projects/impro-fe/node_modules/eslint/lib/eslint/eslint-helpers.js:309:28)
at Object.isAppliedFilter (/Users/Pradhumn_Sharma/Projects/impro-fe/node_modules/@nodelib/fs.walk/out/readers/common.js:12:31)
at AsyncReader._handleEntry (/Users/Pradhumn_Sharma/Projects/impro-fe/node_modules/@nodelib/fs.walk/out/readers/async.js:86:20)
"devDependencies": {
"@babel/eslint-parser": "~7.24.1",
"@eslint/js": "^9.0.0",
"@testing-library/dom": "~9.3.3",
"@testing-library/jest-dom": "~6.4.2",
"@testing-library/react": "~14.2.2",
"@testing-library/user-event": "~14.5.1",
"@typescript-eslint/eslint-plugin": "~7.5.0",
"@typescript-eslint/parser": "~7.5.0",
"crypto-browserify": "^3.12.0",
"eslint": "~9.0.0",
"eslint-config-prettier": "~9.1.0",
"eslint-config-react-app": "~7.0.1",
"eslint-plugin-import": "~2.29.0",
"eslint-plugin-jest": "~28.2.0",
"eslint-plugin-jsdoc": "~48.2.3",
"eslint-plugin-jsonc": "~2.15.0",
"eslint-plugin-jsx-a11y": "~6.8.0",
"eslint-plugin-prettier": "~5.1.3",
"eslint-plugin-react": "~7.34.1",
"eslint-plugin-react-hooks": "~4.6.0",
"eslint-plugin-sort-keys-fix": "~1.1.2",
"eslint-plugin-spellcheck": "0.0.20",
"eslint-plugin-testing-library": "~6.2.0",
"fake-indexeddb": "5.0.1",
"globals": "^15.0.0",
"pre-commit": "~1.2.2",
"prettier": "~3.2.5",
"prettier-eslint": "~16.3.0",
"prettier-eslint-cli": "~8.0.1",
"react-scripts": "~5.0.1",
"sass": "~1.74.1",
"stylelint": "~16.3.1",
"stylelint-config-prettier": "~9.0.5",
"stylelint-config-standard-scss": "~13.1.0",
"stylelint-prettier": "~5.0.0",
"stylelint-scss": "~6.2.1"
}
**ESLINT CODE FROM eslint.config.js**
import babelParser from "@babel/eslint-parser";
import pluginJs from "@eslint/js";
import importConfig from "eslint-plugin-import";
import jest from "eslint-plugin-jest";
import jsdocConfig from "eslint-plugin-jsdoc";
import jsoncConfig from "eslint-plugin-jsonc";
import reactHooks from "eslint-plugin-react-hooks";
import pluginReactAllConfig from "eslint-plugin-react/configs/all.js";
import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
import sortKeysFixConfig from "eslint-plugin-sort-keys-fix";
import spellcheck from "eslint-plugin-spellcheck";
import globals from "globals";
// export default [
// {languageOptions: { globals: globals.browser }},
// pluginJs.configs.recommended,
// pluginReactConfig,
// ];
export default [
pluginJs.configs.recommended,
{
files: ["**/*.{js,jsx}"],
...jest.configs["flat/recommended"],
plugins: {
react: { ...pluginReactAllConfig, ...pluginReactConfig },
jest,
import: importConfig,
jsdoc: jsdocConfig,
jsonc: jsoncConfig,
"react-hooks": reactHooks,
"sort-keys-fix": sortKeysFixConfig,
spellcheck: spellcheck
},
languageOptions: {
parser: babelParser,
parserOptions: {
requireConfigFile: false,
babelOptions: {
babelrc: false,
configFile: false,
presets: ["@babel/preset-react", "@babel/preset-env"]
},
ecmaFeatures: {
jsx: true
}
},
globals: {
...globals.browser,
...globals.node,
it: "readonly",
jest: "readonly",
test: "readonly",
expect: "readonly",
indexedDB: "readonly",
describe: "readonly"
}
},
settings: { react: { version: "detect" } },
rules: {
"array-bracket-newline": ["error", "consistent"],
"array-bracket-spacing": ["error", "never"],
"array-callback-return": "error",
"array-element-newline": [
"error",
{
"ArrayExpression": "consistent",
"ArrayPattern": { "minItems": 3 }
}
],
"arrow-spacing": "error",
"brace-style": ["error", "1tbs"],
"camelcase": ["error", { "ignoreDestructuring": true, "properties": "never" }],
"comma-dangle": ["error", "never"],
"comma-spacing": [
"error",
{
"after": true,
"before": false
}
],
"curly": ["error", "all"],
"default-case": "off",
"eqeqeq": ["error", "always"],
"func-call-spacing": ["error", "never"],
"function-call-argument-newline": ["error", "consistent"],
"import/first": "off",
"import/order": ["error", { "groups": ["builtin", "external", "internal", "parent", "sibling", "index"] }],
"indent": ["error", 4, { "SwitchCase": 1, "ignoredNodes": ["ConditionalExpression"] }],
"jest/no-mocks-import": "off",
"jsdoc/newline-after-description": 0, // Required for vs code auto formatting
"jsdoc/require-hyphen-before-param-description": 1,
"jsdoc/require-jsdoc": [
"error",
{
"require": {
"ArrowFunctionExpression": true,
"ClassExpression": true,
"FunctionDeclaration": true,
"FunctionExpression": true,
"MethodDefinition": true
}
}
],
"jsonc/sort-keys": "error",
"keyword-spacing": ["error", { "after": true, "before": true }],
"max-len": [
"error",
{
"code": 120,
"ignorePattern": '".*": ".*"' // Ignore pattern for strings in json as they can't be broken in multi lines
}
],
"no-console": "error",
"no-dupe-else-if": "error",
"no-extend-native": "off",
"no-nested-ternary": "error",
"no-useless-escape": "off",
"no-var": "error",
"object-curly-newline": ["error", { "consistent": true, "multiline": true }],
"object-curly-spacing": ["error", "always"],
"object-property-newline": ["error", { "allowAllPropertiesOnSameLine": true }],
"padding-line-between-statements": [
"error",
// Always one empty line before return statement
{
"blankLine": "always",
"next": "return",
"prev": "*"
},
// Always one empty line between methods
{
"blankLine": "always",
"next": ["block-like", "multiline-block-like"],
"prev": ["block-like", "multiline-block-like"]
},
// Avoids more than one empty line
{
"blankLine": "never",
"next": "empty",
"prev": "empty"
}
],
"prefer-const": "error",
"quote-props": ["error", "always"],
"quotes": ["error", "double"],
"radix": "off",
"react-hooks/exhaustive-deps": "error",
"react-hooks/rules-of-hooks": "error",
// "react/jsx-boolean-value": ["warn", "always"],
"react/jsx-closing-bracket-location": "error",
"react/jsx-closing-tag-location": "error",
"react/jsx-curly-brace-presence": [
"error",
{
"children": "ignore",
"props": "always"
}
],
"react/jsx-tag-spacing": ["error", { "beforeSelfClosing": "always" }],
"react/no-multi-comp": ["error", { "ignoreStateless": true }],
"react/react-in-jsx-scope": "off",
"semi": ["error", "always"],
"sort-keys": [
"error",
"asc",
{
"caseSensitive": true,
"minKeys": 2,
"natural": false
}
],
"sort-keys-fix/sort-keys-fix": "error",
"space-before-blocks": "error",
"space-infix-ops": ["error", { "int32Hint": false }],
"spellcheck/spell-checker": [
"error",
{
"minLength": 4,
"skipWords": [
"datasource",
"apis"
]
}
],
// Added this so test file don't give error when accessing dom element using DOM api
"testing-library/no-node-access": "off"
}
}
];
I have recently updated my eslint version in create-react-app project. Previously I was using eslint V7.24 and I was using .eslintrc.js file but after updating to eslint v9.0.0 I started getting error that old format is not supported so I created new eslint.config.js file to migrate from V8 to V9 and also updated other required packages. I have migrated most of the code but now when I am running npm run lint, I am getting below mentioned error. I am sharing my devDependancies from package.json file and eslint.config.js file code here. Please let me know what am I missing here.
Oops! Something went wrong! :(
ESLint: 9.0.0
TypeError: Key "rules": Key "react/jsx-closing-bracket-location": Could not find "jsx-closing-bracket-location" in plugin "react".
at throwRuleNotFoundError (/Users/Pradhumn_Sharma/Projects/impro-fe/node_modules/eslint/lib/config/rule-validator.js:66:11)
at RuleValidator.validate (/Users/Pradhumn_Sharma/Projects/impro-fe/node_modules/eslint/lib/config/rule-validator.js:147:17)
at [finalizeConfig] (/Users/Pradhumn_Sharma/Projects/impro-fe/node_modules/eslint/lib/config/flat-config-array.js:211:23)
at FlatConfigArray.getConfig (/Users/Pradhumn_Sharma/Projects/impro-fe/node_modules/@humanwhocodes/config-array/api.js:1022:55)
at FlatConfigArray.isFileIgnored (/Users/Pradhumn_Sharma/Projects/impro-fe/node_modules/@humanwhocodes/config-array/api.js:1046:15)
at /Users/Pradhumn_Sharma/Projects/impro-fe/node_modules/eslint/lib/eslint/eslint-helpers.js:322:49
at Array.reduce (<anonymous>)
at entryFilter (/Users/Pradhumn_Sharma/Projects/impro-fe/node_modules/eslint/lib/eslint/eslint-helpers.js:309:28)
at Object.isAppliedFilter (/Users/Pradhumn_Sharma/Projects/impro-fe/node_modules/@nodelib/fs.walk/out/readers/common.js:12:31)
at AsyncReader._handleEntry (/Users/Pradhumn_Sharma/Projects/impro-fe/node_modules/@nodelib/fs.walk/out/readers/async.js:86:20)
"devDependencies": {
"@babel/eslint-parser": "~7.24.1",
"@eslint/js": "^9.0.0",
"@testing-library/dom": "~9.3.3",
"@testing-library/jest-dom": "~6.4.2",
"@testing-library/react": "~14.2.2",
"@testing-library/user-event": "~14.5.1",
"@typescript-eslint/eslint-plugin": "~7.5.0",
"@typescript-eslint/parser": "~7.5.0",
"crypto-browserify": "^3.12.0",
"eslint": "~9.0.0",
"eslint-config-prettier": "~9.1.0",
"eslint-config-react-app": "~7.0.1",
"eslint-plugin-import": "~2.29.0",
"eslint-plugin-jest": "~28.2.0",
"eslint-plugin-jsdoc": "~48.2.3",
"eslint-plugin-jsonc": "~2.15.0",
"eslint-plugin-jsx-a11y": "~6.8.0",
"eslint-plugin-prettier": "~5.1.3",
"eslint-plugin-react": "~7.34.1",
"eslint-plugin-react-hooks": "~4.6.0",
"eslint-plugin-sort-keys-fix": "~1.1.2",
"eslint-plugin-spellcheck": "0.0.20",
"eslint-plugin-testing-library": "~6.2.0",
"fake-indexeddb": "5.0.1",
"globals": "^15.0.0",
"pre-commit": "~1.2.2",
"prettier": "~3.2.5",
"prettier-eslint": "~16.3.0",
"prettier-eslint-cli": "~8.0.1",
"react-scripts": "~5.0.1",
"sass": "~1.74.1",
"stylelint": "~16.3.1",
"stylelint-config-prettier": "~9.0.5",
"stylelint-config-standard-scss": "~13.1.0",
"stylelint-prettier": "~5.0.0",
"stylelint-scss": "~6.2.1"
}
**ESLINT CODE FROM eslint.config.js**
import babelParser from "@babel/eslint-parser";
import pluginJs from "@eslint/js";
import importConfig from "eslint-plugin-import";
import jest from "eslint-plugin-jest";
import jsdocConfig from "eslint-plugin-jsdoc";
import jsoncConfig from "eslint-plugin-jsonc";
import reactHooks from "eslint-plugin-react-hooks";
import pluginReactAllConfig from "eslint-plugin-react/configs/all.js";
import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
import sortKeysFixConfig from "eslint-plugin-sort-keys-fix";
import spellcheck from "eslint-plugin-spellcheck";
import globals from "globals";
// export default [
// {languageOptions: { globals: globals.browser }},
// pluginJs.configs.recommended,
// pluginReactConfig,
// ];
export default [
pluginJs.configs.recommended,
{
files: ["**/*.{js,jsx}"],
...jest.configs["flat/recommended"],
plugins: {
react: { ...pluginReactAllConfig, ...pluginReactConfig },
jest,
import: importConfig,
jsdoc: jsdocConfig,
jsonc: jsoncConfig,
"react-hooks": reactHooks,
"sort-keys-fix": sortKeysFixConfig,
spellcheck: spellcheck
},
languageOptions: {
parser: babelParser,
parserOptions: {
requireConfigFile: false,
babelOptions: {
babelrc: false,
configFile: false,
presets: ["@babel/preset-react", "@babel/preset-env"]
},
ecmaFeatures: {
jsx: true
}
},
globals: {
...globals.browser,
...globals.node,
it: "readonly",
jest: "readonly",
test: "readonly",
expect: "readonly",
indexedDB: "readonly",
describe: "readonly"
}
},
settings: { react: { version: "detect" } },
rules: {
"array-bracket-newline": ["error", "consistent"],
"array-bracket-spacing": ["error", "never"],
"array-callback-return": "error",
"array-element-newline": [
"error",
{
"ArrayExpression": "consistent",
"ArrayPattern": { "minItems": 3 }
}
],
"arrow-spacing": "error",
"brace-style": ["error", "1tbs"],
"camelcase": ["error", { "ignoreDestructuring": true, "properties": "never" }],
"comma-dangle": ["error", "never"],
"comma-spacing": [
"error",
{
"after": true,
"before": false
}
],
"curly": ["error", "all"],
"default-case": "off",
"eqeqeq": ["error", "always"],
"func-call-spacing": ["error", "never"],
"function-call-argument-newline": ["error", "consistent"],
"import/first": "off",
"import/order": ["error", { "groups": ["builtin", "external", "internal", "parent", "sibling", "index"] }],
"indent": ["error", 4, { "SwitchCase": 1, "ignoredNodes": ["ConditionalExpression"] }],
"jest/no-mocks-import": "off",
"jsdoc/newline-after-description": 0, // Required for vs code auto formatting
"jsdoc/require-hyphen-before-param-description": 1,
"jsdoc/require-jsdoc": [
"error",
{
"require": {
"ArrowFunctionExpression": true,
"ClassExpression": true,
"FunctionDeclaration": true,
"FunctionExpression": true,
"MethodDefinition": true
}
}
],
"jsonc/sort-keys": "error",
"keyword-spacing": ["error", { "after": true, "before": true }],
"max-len": [
"error",
{
"code": 120,
"ignorePattern": '".*": ".*"' // Ignore pattern for strings in json as they can't be broken in multi lines
}
],
"no-console": "error",
"no-dupe-else-if": "error",
"no-extend-native": "off",
"no-nested-ternary": "error",
"no-useless-escape": "off",
"no-var": "error",
"object-curly-newline": ["error", { "consistent": true, "multiline": true }],
"object-curly-spacing": ["error", "always"],
"object-property-newline": ["error", { "allowAllPropertiesOnSameLine": true }],
"padding-line-between-statements": [
"error",
// Always one empty line before return statement
{
"blankLine": "always",
"next": "return",
"prev": "*"
},
// Always one empty line between methods
{
"blankLine": "always",
"next": ["block-like", "multiline-block-like"],
"prev": ["block-like", "multiline-block-like"]
},
// Avoids more than one empty line
{
"blankLine": "never",
"next": "empty",
"prev": "empty"
}
],
"prefer-const": "error",
"quote-props": ["error", "always"],
"quotes": ["error", "double"],
"radix": "off",
"react-hooks/exhaustive-deps": "error",
"react-hooks/rules-of-hooks": "error",
// "react/jsx-boolean-value": ["warn", "always"],
"react/jsx-closing-bracket-location": "error",
"react/jsx-closing-tag-location": "error",
"react/jsx-curly-brace-presence": [
"error",
{
"children": "ignore",
"props": "always"
}
],
"react/jsx-tag-spacing": ["error", { "beforeSelfClosing": "always" }],
"react/no-multi-comp": ["error", { "ignoreStateless": true }],
"react/react-in-jsx-scope": "off",
"semi": ["error", "always"],
"sort-keys": [
"error",
"asc",
{
"caseSensitive": true,
"minKeys": 2,
"natural": false
}
],
"sort-keys-fix/sort-keys-fix": "error",
"space-before-blocks": "error",
"space-infix-ops": ["error", { "int32Hint": false }],
"spellcheck/spell-checker": [
"error",
{
"minLength": 4,
"skipWords": [
"datasource",
"apis"
]
}
],
// Added this so test file don't give error when accessing dom element using DOM api
"testing-library/no-node-access": "off"
}
}
];
1 Answer
Reset to default 21The plugin eslint-plugin-react is not compatible with eslint V9 yet - see here.
In the last comment of the linked issue, the maintainer states "new eslint majors always take months before everything supports them, and this one will take longer" - so maybe the best way to solve your problem would be to just wait until all plugins will be upgraded to be compatible with the new eslint version.