nikitaNaredi
commented
1 month ago My app is in CRA JS and am trying to migrate from .eslintrc to eslint.config.mjs by using the migrator. This is my eslint.config.mjs file after migration:
import { fixupConfigRules, fixupPluginRules } from "@eslint/compat";
import jsxA11Y from "eslint-plugin-jsx-a11y";
import reactHooks from "eslint-plugin-react-hooks";
import prettier from "eslint-plugin-prettier";
import react from "eslint-plugin-react";
import babelParser from "@babel/eslint-parser";
import path from "node:path";
import { fileURLToPath } from "node:url";
import js from "@eslint/js";
import { FlatCompat } from "@eslint/eslintrc";
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
baseDirectory: __dirname,
recommendedConfig: js.configs.recommended,
allConfig: js.configs.all,
});
export default [
{
ignores: [
"src/registerServiceWorker.js",
],
},
...fixupConfigRules(
compat.extends(
"airbnb",
"plugin:jsx-a11y/recommended",
"prettier",
"plugin:prettier/recommended",
"react-app",
"eslint:recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended"
)
),
{
plugins: {
"jsx-a11y": fixupPluginRules(jsxA11Y),
"react-hooks": fixupPluginRules(reactHooks),
prettier: fixupPluginRules(prettier),
react: fixupPluginRules(react),
},
languageOptions: {
parser: babelParser,
ecmaVersion: 2023,
sourceType: "module",
parserOptions: {
ecmaFeatures: {
jsx: true,
},
requireConfigFile: true,
},
},
rules: {
...reactHooks.configs.recommended.rules,
semi: 0,
"react/destructuring-assignment": 0,
"react/jsx-filename-extension": [
1,
{
extensions: [".js", ".jsx"],
},
],
"react/jsx-fragments": ["off", "element"],
"react/jsx-props-no-spreading": [
"error",
{
custom: "ignore",
},
],
"jsx-a11y/href-no-hash": "off",
"jsx-a11y/click-events-have-key-events": 0,
"jsx-a11y/label-has-associated-control": 0,
"react/button-has-type": 0,
"react/prop-types": "off",
"default-param-last": "error",
"no-promise-executor-return": "off",
"react/no-unstable-nested-components": "off",
"prettier/prettier": [
"error",
{
endOfLine: "auto",
},
],
"arrow-body-style": "off",
"prefer-arrow-callback": "off",
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"react/display-name": "off",
},
},
{
files: ["src/app/*.js"],
rules: {
"no-unused-expressions": "off",
"import/no-cycle": "off",
"no-param-reassign": "off",
},
},
{
files: [
"src/features/**",
],
rules: {
"default-param-last": "off",
},
},
];
Package.json:
{
"name": "abc",
"version": "1.0.0",
"private": true,
"dependencies": {
"@reduxjs/toolkit": "^1.9.1",
"axios": "^1.6.7",
"classnames": "^2.3.2",
"cross-env": "^7.0.3",
"deepmerge": "^4.3.1",
"delay": "^5.0.0",
"dompurify": "^2.4.1",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"env-cmd": "^10.1.0",
"html-react-parser": "^3.0.4",
"html-to-draftjs": "^1.5.0",
"lodash": "^4.17.21",
"pdf-lib": "^1.17.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-draft-wysiwyg": "^1.15.0",
"react-error-overlay": "^6.0.11",
"react-helmet-async": "^1.3.0",
"react-pdf": "^9.1.0",
"react-redux": "^8.0.5",
"react-router-dom": "^6.4.5",
"react-signature-canvas": "^1.0.6",
"recharts": "^2.2.0",
"repo": "0.0.15",
"uuid": "^9.0.0"
},
"scripts": {
// sdf
},
"devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@babel/preset-env": "^7.23.9",
"@babel/preset-react": "^7.23.3",
"@commitlint/cli": "^19.3.0",
"@commitlint/config-conventional": "^19.2.2",
"@eslint/compat": "^1.1.1",
"@eslint/eslintrc": "^3.1.0",
"@eslint/js": "^9.11.1",
"@faker-js/faker": "^8.4.1",
"@nightwatch/selenium-server": "^4.5.0",
"@playwright/test": "^1.43.1",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.4.3",
"@types/node": "^20.12.7",
"babel-jest": "^29.7.0",
"dotenv": "^16.4.5",
"eslint": "^8.57.1",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.30.0",
"eslint-plugin-jsx-a11y": "^6.10.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.36.1",
"eslint-plugin-react-hooks": "^4.6.2",
"husky": "^9.0.11",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.5.0",
"lint-staged": "^15.2.10",
"mini-css-extract-plugin": "^2.9.1",
"msw": "^1.2.2",
"prettier": "^2.8.1",
"process": "^0.11.10",
"react-scripts": "^5.0.1",
"webpack": "^5.93.0",
"webpack-cli": "^5.1.4"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"jest": {
"moduleNameMapper": {
"axios": "axios/dist/node/axios.cjs"
},
},
"overrides": {
"nth-check": "^2.1.1",
"semver": "^7.6.0",
"@babel/traverse": "^7.23.9",
"follow-redirects": "^1.15.5"
},
"engines": {
"node": "20.11.0",
"npm": "10.2.4"
}
}now when am trying to build the project am getting:
Definition for rule 'react-hooks/exhaustive-deps' was not found react-hooks/exhaustive-deps. Please help.
Starting with the next version 9, ESLint will deprecate the current eslintrc format and will default use the new flat config format (
eslint.config.js). Already from version 8.2.23 you can fully use the flat config format. Still, neither the README (which is used as a description for the NPM package) nor the documentation says anything about how to configure it correctly. And also no one answered the question on StackOverflow about this. Please add this information to the documentation.