无法加载在 '.eslintrc.json' 中声明的插件 'prettier'：找不到模块 'eslint-plugin-prettier'

Posted 2023-02-22

【中文标题】无法加载在 \'.eslintrc.json\' 中声明的插件 \'prettier\'：找不到模块 \'eslint-plugin-prettier\'

【英文标题】：Failed to load plugin 'prettier' declared in '.eslintrc.json': Cannot find module 'eslint-plugin-prettier'无法加载在 '.eslintrc.json' 中声明的插件 'prettier'：找不到模块 'eslint-plugin-prettier'

【发布时间】：2021-03-31 12:22:06

【问题描述】：

我有一个使用 react 制作的前端项目，可以在 vsCode 上完美运行，但是当我将它上传到 Heroku 时出现此错误：

Failed to load plugin 'prettier' declared in '.eslintrc.json': Cannot find module 'eslint-plugin-prettier'
Require stack:
- /app/node_modules/react-scripts/config/__placeholder__.js
Referenced from: /app/.eslintrc.json

我尝试卸载 eslint 并重新安装，但没有成功。而且由于我是新人，我不知道应该去哪里寻找答案。

这是我的 package.json 的一部分：

"eslintConfig": 
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  ,
"devDependencies": 
    "eslint": "^7.16.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^7.1.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.3.0",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "prettier": "2.2.1"
  

这是我的 .eslintrc.json

    "env": 
        "browser": true,
        "es2021": true
    ,
    "extends": [
        "plugin:react/recommended",
        "plugin:prettier/recommended"
    ],
    "parserOptions": 
        "ecmaFeatures": 
            "jsx": true
        ,
        "ecmaVersion": 12,
        "sourceType": "module"
    ,
    "plugins": [
        "react",
        "prettier"
    ],
    "rules": 
        "no-console": "off",
        "prettier/prettier": ["error"],
        "consistent-return": "off",
        "react/jsx-indent": "off",
        "react/jsx-filename-extension": [1,  "extensions": [".js", ".jsx"] ],
        "implicit-arrow-linebreak": "off",
        "react/button-has-type": "off",
        "jsx-a11y/label-has-associated-control": "off",
        "no-plusplus": "off",
        "react/prop-types": "off"
    

【问题讨论】：

你为什么要在 Heroku 中进行 linting？使用前端应用程序，您应该只部署静态构建输出（html/JS/CSS/assets），而不是源代码。

谢谢，@jonrsharpe。我现在明白了。我使用 create-react-app-buildpack 部署到 Heroku，并且成功了。

【参考方案1】：

我遇到了完全相同的问题。我通过从 package.json 中删除现有的 eslint-config-prettier 和 eslint-plugin-prettier 解决了这个问题.然后在重新安装纱线（或 npm）作为依赖项（而不是开发依赖项）之后。然后我又把它推到了heroku，它起作用了！

【参考方案2】：

有同样的问题。为了解决这个问题，我将 eslint 从版本 8.3.0 降级为

    "eslint": "^7.32.0",
    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-prettier": "^3.4.1",