Dealing with "Failed to load plugin 'react' declared in '.eslintrc': Cannot find module 'eslint-plugin-react'" ESLint error

Question

Recently I updated my react project using "create-react-app" (React 16.9)
Everything worked just OK before the update, but suddenly I get following ESLint error: (In the output tab)

 [Error - 16:42:12] 
Failed to load plugin 'react' declared in 'client\.eslintrc': Cannot find module 'eslint-plugin-react'
Require stack:
- C:\Or\Web\VisualizationTool\VisualizationTool\__placeholder__.js
Referenced from: C:\Or\Web\VisualizationTool\VisualizationTool\client\.eslintrc
Happened while validating C:\Or\Web\VisualizationTool\VisualizationTool\client\src\hoc\Layout\Layout.jsx
This can happen for a couple of reasons:
1. The plugin name is spelled incorrectly in an ESLint configuration file (e.g. .eslintrc).
2. If ESLint is installed globally, then make sure 'eslint-plugin-react' is installed globally as well.
3. If ESLint is installed locally, then 'eslint-plugin-react' isn't installed correctly.

My.eslintrc file:

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "react-app",
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaVersion": 2018,
        "ecmaFeatures": {
            "jsx": true
        },
        "sourceType": "module"
    },
    "settings": {
        "react": {
            "pragma": "React",
            "version": "16.8"
        }
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "quotes": [
            "error",
            "single",
            {
                "allowTemplateLiterals": true
            }
        ],
        "semi": "off",
        "default-case": [
            "error",
            {
                "commentPattern": "^no default$"
            }
        ],
        "no-new-wrappers": 0,
        "no-mixed-operators": 0,
        "require-atomic-updates": "off",
        "comma-dangle": "off",
        "no-unused-vars": "off",
        "no-useless-constructor": 0,
        "react/jsx-uses-react": "error",
        "react/jsx-uses-vars": "error",
        "react/no-unescaped-entities": 0,
        "react/display-name": 0,
        "jsx-a11y/href-no-hash": "off",
        "jsx-a11y/anchor-is-valid": "off",
        "no-useless-escape": 0,
        "no-console": 0,
        "no-debugger": 0,
        "no-empty": 0,
        "linebreak-style": 0,
        "import/first": 0,
        "import/imports-first": 0,
        "no-shadow": 0,
        "disable-next-line": 0,
        "no-case-declarations": 0,
    }
}

I have both ESLint and eslint-plugin-react installed both globally and locally, anything else I am missing here?

Answer 1

npm install eslint-plugin-react@latest --save-dev

Thanks, I had the same problem, installing this worked for me

Answer 2

I had the same problem in VS code. Add the following settings in VS code ESLint settings:

{
  "eslint.workingDirectories": [
    "Dir1",
    "Dir2"
  ],
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
  ]
}

Note: Dir1 and Dir2 are two directories with their respective .eslintrc files.

Answer 3

Try to check your ESLint plugin Working directories given that you have a new one for your project with the create-react-app update. Had the same issue and I fixed mine by checking my working directories in the ESLint plugin settings.

Answer 4

I also had a similar error (I can't be sure the reason was the same but this is how I found the issue).

So make sure the Path of the Require Stack (in the error) doesn't point outside your project directory.

So you have a root directory of your project (where you have the node_modules folder and such). In the terminal $ cd .. (go to the folder that holds your project) and there do this:

$ ls -a

If you see a file called .eslintrc.js, then remove it ( $ rm .eslintr.js ). Then just reload your project and the problem (at least in my case) will be gone.

Answer 5

Found it.
1. Keep only the "eslint:recommended" in the "extends" section. Remove all others.
2. Removed the "plugins" section.
3. Restart the VSCode.
4. Works like a charm!

My updated .eslintrc file looks like this:

{
    "extends": "eslint:recommended",
    "env": {
        "browser": true,
        "commonjs": true,
        "node": true,
        "es6": true
    },
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaVersion": 2018,
        "ecmaFeatures": {
            "jsx": true
        },
        "sourceType": "module"
    },
    "settings": {
        "react": {
            "pragma": "React",
            "version": "16.9"
        }
    },
    "rules": {
        "quotes": [
            "error",
            "single",
            {
                "allowTemplateLiterals": true
            }
        ],
        "semi": 0,
        "default-case": [
            "error",
            {
                "commentPattern": "^no default$"
            }
        ],
        "react/jsx-uses-vars": 0,
        "react/react-in-jsx-scope": 0,
        "no-new-wrappers": 0,
        "no-mixed-operators": 0,
        "require-atomic-updates": "off",
        "comma-dangle": "off",
        "no-unused-vars": "off",
        "no-useless-constructor": 0,
        "react/no-unescaped-entities": 0,
        "react/display-name": 0,
        "jsx-a11y/href-no-hash": "off",
        "jsx-a11y/anchor-is-valid": "off",
        "no-useless-escape": 0,
        "no-console": 0,
        "no-debugger": 0,
        "no-empty": 0,
        "linebreak-style": 0,
        "import/first": 0,
        "import/imports-first": 0,
        "no-shadow": 0,
        "disable-next-line": 0,
        "no-case-declarations": 0,
    }
}