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"
  }
}

Liverwort

how you solved the issue none of the solution is working for me – Laquitalar

@Laquitalar I solved this using the accepted answer below – Liverwort

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.

Hamforrd

React issue here: github.com/facebook/react/issues/22545 – Trochophore

npm install -D eslint-plugin-react-hooks@next would work at the moment. – Lanark

@next worked for me, thanks! – Bossuet

Fixed in 4.3.0. – Mantua

Nothing is working Rules with suggestions must set the meta.hasSuggestions property to true. meta.docs.suggestion is ignored by ESLint. – Laquitalar

Upgrading the npm package that provided the rule fixed the problem. – Coincide

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

Magdeburg

Answer 3

Had the same error after bumping react-scripts from 4.x to 5.0.1. Since we also had the "eslint-config-react-app" in our package.json, the fix was to also bump this to current. 7.0.1 in our case. Hope this helps I you come across the same issue.

Wheelhouse

Answer 4

Updating eslint-config-react-app npm package from 5.2.1 to 6.0.0 worked for me!

Ashok