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

Question

I have a frontend project made with react that runs perfectly on vsCode, but when I uploaded it to Heroku I got this error:

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

I tried to uninstall eslint and installed it again but it didn't work. And since I'm kinda new I don't know where should I be looking around for an answer.

This is part of my 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"
  }

And this is my.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"
    }
}

Answer 1

I got the exact same problem. I solved this issue by removing existing eslint-config-prettier and eslint-plugin-prettier from package.json. Then after re-installed with yarn (or npm) as dependencies (not as dev-dependencies). Then again I pushed it to heroku, it worked!

Answer 2

Had the same issue. To solve it, I downgraded eslint from version 8.3.0 to

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