处理“无法加载'.eslintrc'中声明的插件'react'：找不到模块'eslint-plugin-react'”ESLint错误

Question

最近我使用“create-react-app”更新了我的react项目（React 16.9）
更新之前一切正常，但突然我收到以下 ESLint 错误：（在输出选项卡中）

 [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.

我的 .eslintrc 文件：

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

我在全局和本地都安装了 ESLint 和 eslint-plugin-react，我还缺少什么吗？

Answer 1

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

谢谢！我遇到了同样的问题，安装这个对我有用

Answer 2

我在 VS code 中也遇到了同样的问题。在 VS code ESLint 设置中添加以下设置：

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

注意：Dir1 和 Dir2 是两个目录，具有各自的 .eslintrc 文件。

Answer 3

我也遇到了类似的错误（我不能确定原因是否相同，但这就是我发现问题的方式）。

因此请确保需求堆栈的路径（在错误中）没有指向项目目录之外。

因此您有项目的根目录（其中有 node_modules 文件夹等）。在终端中

$ cd ..

（转到保存项目的文件夹），然后执行以下操作：

$ ls -a

如果您看到名为 .eslintrc.js 的文件，请将其删除 (

$ rm .eslintr.js

)。然后只需重新加载您的项目，问题（至少在我的情况下）就会消失。

Answer 4

尝试检查您的 ESLint 插件工作目录，因为您的项目通过 create-react-app 更新有了一个新的工作目录。遇到了同样的问题，我通过检查 ESLint 插件设置中的工作目录修复了我的问题。

Answer 5

如果您是 neovim 用户并在这里绊倒：

null-ls 插件维护者无法继续他的伟大工作，该项目已被 none-ls 项目的其他人接管。我猜他们在 none-ls 中解决了这个问题，因为它现在对我有用：

https://github.com/nvimtools/none-ls.nvim

Answer 6

找到了。
1. 仅保留“extends”部分中的“eslint:recommended”。删除所有其他的。
2.删除了“插件”部分。
3. 重新启动 VSCode。
4. 很有魅力！

我更新的 .eslintrc 文件如下所示：

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