Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 486
Or Assayag Avatar asked Aug 19 '19 13:08

Or Assayag


People also ask

Can not find Eslint plugin react?

Try reinstalling by running the following: npm install eslint-plugin-react@latest --save-dev The plugin "eslint-plugin-react" was referenced from the config file in ". eslintrc. js". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

What is Eslint plugin react?

Basically, it is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code. It analyzes your code quickly, finds any problems in your code, and even fixes them automatically. In this article, we are going to explore four essential ESLint plugins you will need in your React setup.

Does ESLint work with JSX?

ESLint is a JavaScript linter (static analysis tool) that offers full support for ES6, JSX, and other modern tools via plugins.


4 Answers

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.

like image 163
Ashok Kumar Sundar Avatar answered Oct 24 '22 09:10

Ashok Kumar Sundar


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

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

like image 31
Jonathan Gomez Avatar answered Oct 24 '22 08:10

Jonathan Gomez


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.

like image 3
Xelphin Avatar answered Oct 24 '22 08:10

Xelphin


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.

like image 1
Jtaw Cañada Avatar answered Oct 24 '22 07:10

Jtaw Cañada