ESLint broken: Rules with suggestions must set the `meta.hasSuggestions` property to `true`

Question

I am using VSCode, and when I add the line 'react-hooks/exhaustive-deps': 'warn' to my .eslintrc.js, I get the following in the ESLint output:

Rules with suggestions must set the `meta.hasSuggestions` property to `true`. Occurred while linting
C:\Users\filepath.jsx:72 Rule: "react-hooks/exhaustive-deps"

This breaks all other linting. I've tried adding the following to my .eslintrc.js:

meta: {
    hasSuggestions: true
},

which gives me the following error:

UnhandledPromiseRejectionWarning: Error: ESLint configuration in .eslintrc.js is invalid:
    - Unexpected top-level property "meta".

Any help would be appreciated.

Here is my .eslintrc.js:

module.exports = {
    env: {
        browser: true,
        es2021: true,
    },
    extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:react-hooks/recommended'],
    settings: {
        'react': {
            'version': 'detect'
        }
    },
    parserOptions: {
        ecmaFeatures: {
            jsx: true,
        },
        ecmaVersion: 13,
        sourceType: 'module',
    },
    plugins: ['react-hooks', 'react'],
    rules: {
        'react/prop-types': [0],
        quotes: ['error', 'single'],
        semi: [1],
        'react/jsx-indent': [1],
        'no-multi-spaces': [1],
        'indent': [2],
        'react/jsx-newline': [2, { prevent: true }],
        'no-trailing-spaces': [1],
        'no-multiple-empty-lines': [1, { max: 1 }],
        'space-infix-ops': [1],
        'object-curly-spacing': [1, 'always'],
        'comma-spacing': [1],
        'react-hooks/rules-of-hooks': 'error',
        'react/self-closing-comp': 1,
        'react/jsx-closing-tag-location': 1,
        'no-unreachable': 1,
        'react-hooks/exhaustive-deps': 'warn'
    },
};

Here's is my package.json:

{
  "name": "app",
  "private": true,
  "dependencies": {
    "@babel/preset-react": "^7.14.5",
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@mui/icons-material": "^5.0.4",
    "@mui/material": "^5.0.3",
    "@mui/styles": "^5.0.1",
    "@rails/actioncable": "^6.1.4-1",
    "@rails/activestorage": "^6.1.4-1",
    "@rails/ujs": "^6.1.4-1",
    "@rails/webpacker": "^6.0.0-rc.5",
    "babel-plugin-macros": "^3.1.0",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-on-rails": "12.3.0",
    "react-player": "^2.9.0",
    "turbolinks": "^5.2.0",
    "webpack": "^5.53.0",
    "webpack-cli": "^4.8.0"
  },
  "version": "0.1.0",
  "babel": {
    "presets": [
      "./node_modules/@rails/webpacker/package/babel/preset.js"
    ]
  },
  "browserslist": [
    "defaults"
  ],
  "devDependencies": {
    "@webpack-cli/serve": "^1.6.0",
    "eslint": "^8.0.0",
    "eslint-plugin-react": "^7.26.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    "webpack-dev-server": "^4.3.1"
  }
}

Answer 1

ESLint 8.0.0 comes with a breaking change for rules that provide suggestions. There is nothing you can put into your .eslintrc.js to make it work if you use rules that haven't been updated to work after this change.

What you can do:

• Use ESLint 7 until the plugin is updated to work with ESLint 8.
• In case of eslint-plugin-react-hooks, the offending rule has already been updated (check this line on GitHub), it's just that there hasn't been a stable release of the package since. However there have been daily alpha releases, at the time of writing the latest version is 4.2.1-alpha-c3a19e5af-20211014. If you really need both ESLint 8 and this plugin, you can use an alpha version until the next stable version comes out.

Answer 2

I had to remove the rule "react/require-default-props": "off", to get rid of the problem. Not a complete fix but it worked for now with react v18