Failed to load plugin 'prettier' declared in '.eslintrc.js': Cannot find module 'eslint-plugin-prettier'

[AgoniNemo]

What version of eslint are you using?
"eslint": "^7.21.0",

What version of prettier are you using?
"prettier": "^2.2.1",

What version of eslint-plugin-prettier are you using?
"eslint-plugin-prettier": "^3.3.1"

Please paste any applicable config files that you're using (e.g. .prettierrc or .eslintrc files)

module.exports = {
  root: true,
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  extends: [ "plugin:prettier/recommended" ],
  parserOptions: {
    parser: "babel-eslint",
    ecmaVersion: 12,
    sourceType: "module"
  },
  rules: {
    "no-console": 0
  },
  globals: {
    getApp: false,
    Page: false,
    wx: false,
    App: false,
    getCurrentPages: false,
    Component: false
  }
}

What did you expect to happen?

[Error] 
Failed to load plugin 'prettier' declared in '.eslintrc.js': Cannot find module 'eslint-plugin-prettier'
Require stack:
- /Users/xxx/Documents/xxxx/xxxx/__placeholder__.js
Referenced from: /Users/xxx/Documents/xxxx/xxxxx/.eslintrc.js
Happened while validating /Users/xxxxx/Documents/xxxxx/xxxxx/xxxxx.js
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-prettier' is installed globally as well.
3. If ESLint is installed locally, then 'eslint-plugin-prettier' isn't installed correctly.

Consider running eslint --debug /Users/xxxxx/Documents/xxxxx/xxxxx/xxxxx.js from a terminal to obtain a trace about the configuration files used.

What actually happened?
normal work

devDependencies version

  "devDependencies": {
    "autoprefixer": "^9.7.3",
    "babel-eslint": "^10.1.0",
    "del": "^6.0.0",
    "eslint": "^7.21.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "gulp": "^4.0.2",
    "gulp-imagemin": "^7.1.0",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^9.0.0",
    "gulp-rename": "^2.0.0",
    "gulp-replace": "^1.0.0",
    "gulp-sass": "^4.1.0",
    "gulp-tap": "^2.0.0",
    "miniprogram-automator": "^0.10.0",
    "path": "^0.12.7",
    "postcss": "^8.2.1",
    "prettier": "^2.2.1",
    "yargs": "^16.2.0"
  }

[kevinprotoss]

I met across the same problem. Exactly the same devDependencies.
All plugins are installed locally.

[lydell]

What command do you run?

[kevinprotoss]

I found the reason why the error occurs. It's the reason of version of ESlint.
If I change the version of ESLint back to v7.16.0 according to the release note of this module, all work again. That means, Eslint v7.21.0 is still not supported by v3.3.1.

[lydell]

@kevinprotoss I just tested it, and eslint-plugin-prettier works well with ESLint v7.21.0.

(That ESLint v7.16.0 is mentioned in the changelog is completely useless. That’s just an internal commit that affects no users of this plugin. If I had written the changelog I wouldn’t have mentioned it.)

What command do you run?

[kevinprotoss]

@lydell I just saw this error message in the output console of VSCode. I did not try using the command. I just want the VSCode extension to do the autofix for me.
I tried to uninstall and reinstall all relevant prettier modules, it does not help.
However, when I changed the version of Eslint back, it works then.

[j0hnm4r5]

I'm running across this issue as well all of a sudden in my shareable config (https://github.com/j0hnm4r5/eslint-config).

All of the other dependencies are installing as expected when I install my config in a new project, but eslint-plugin-prettier is not. Manually installing it as a dev dependency works.

I'm not sure what the issue is here; did something change recently with npm or eslint maybe? It looks like the last update to this package was about 2 months ago, but I'm pretty sure I was able to install correctly in another project after that.

EDIT:

It's actually installing as expected with npm, but not with yarn.

[nickzelei]

I'm running across this issue as well all of a sudden in my shareable config (https://github.com/j0hnm4r5/eslint-config).

All of the other dependencies are installing as expected when I install my config in a new project, but eslint-plugin-prettier is not. Manually installing it as a dev dependency works.

I'm not sure what the issue is here; did something change recently with npm or eslint maybe? It looks like the last update to this package was about 2 months ago, but I'm pretty sure I was able to install correctly in another project after that.

EDIT:

It's actually installing as expected with npm, but not with yarn.

This has been happening to me as well for months now. We have an internal plug we publish and use for all of our repositories. eslint-plugin-prettier is a main dependency of the plugin, but it is not installed when installing the config in any of my repos. We have to manually add it to dev dependencies for it to work properly.
Also using yarn 1.x

[okize]

I have the same issue as @nickzelei -- shared company config -- that suddenly started being unable to find eslint-plugin-prettier. This only happens in CI, not in local dev environment.

[akwodkiewicz]

I had a similar problem with my monorepo. Moving the eslint-plugin-prettier and prettier dependencies from a subproject to the yarn workspace dependencies did the trick.

[mgrsskls]

We are experiencing this as well. We have a node module which requires eslint-plugin-prettier as a dependency and in all our projects it installs eslint-plugin-prettier directly in node_modules (in that case everything works fine), but in one project it installs it in node_modules/OUR_NODE_MODULE/node_modules (in this case it doesn't work).
In both cases, our node module is the only one which requires eslint-plugin-prettier, yarn why eslint-plugin-prettier also outputs the same information (only our node module).
I figured out that installing https://www.npmjs.com/package/@nuxtjs/storybook causes eslint-plugin-prettier to be installed node_modules/OUR_NODE_MODULE/node_modules, but it is still the only eslint-plugin-prettier being installed and I have no clue why @nuxtjs/storybook would cause that.

However, this seems to be a bug (I think) in yarn v1 as this only happens with yarn v1. This does not happen with yarn v3 anymore (I would assume it also works with yarn v2). As yarn v1 is not updated anymore (except for critical vulnerabilities), you might want to upgrade to yarn v3 (if possible for you).

[mattymess]

Any updates with this? I can run using an npm command via package.json that calls eslint ., but when I save any file, VSCode outputs the following:

Failed to load plugin 'prettier' declared in '.eslintrc.json': Cannot find module 'eslint-plugin-prettier'

Here is what my files look like...

package.json

{
  "name": "vite-project",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint ."
  },
  "devDependencies": {
    "autoprefixer": "^10.4.2",
    "eslint": "7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-simple-import-sort": "^7.0.0",
    "postcss": "^8.4.5",
    "prettier": "^2.5.1",
    "tailwindcss": "^3.0.13",
    "vite": "^2.7.2",
    "vite-plugin-eslint": "^1.3.0"
  }
}

.eslintrc.json

{
  "root": true,
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "env": {
    "es6": true,
    "browser": true
  },
  "plugins": [
    "simple-import-sort"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "import/prefer-default-export": "off",
    "no-console": "off",
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error"
  }
}

[baxelson12]

Running npm i eslint-plugin-prettier@latest -D solved this for me.

[mattymess]

@baxelson12 Thanks for the response, but I already have the latest version (4.0.0) installed. Just to be sure, I uninstalled the plugin and reinstalled it using that command, but I'm still receiving the same error in VSCode.

[jamesgordo]

I've been struggling to find a fix for this one for several days already and finally made it work on my end.

It seems that even if I run npm install or npm i eslint-plugin-prettier@latest -D , the eslint-plugin-prettier folder is not created in the node_modules directory. Based from my observation, some dev dependency packages are not installed if NODE_ENV=production

Try checking the NODE_ENV value of your machine by running echo $NODE_ENV . if the current value is production try changing the values to development by running export NODE_ENV=development .

After changing the values, try running npm install again and check if the plugin is installed and folder exists:
ls -lah node_modules/eslint-plugin-prettier

If the folder exists, try running npm run build if it works.

Hope this can help.

[mattymess]

@jamesgordo I was able to get it working the other day. I just wiped out node_modules and did a fresh npm i. It still wasn't working, but after I restarted VSCode, it did 🤷

[DedaDev]

I moved eslint-plugin-prettier from dev dependencies into dependencies, and it works now.

[kmiasko]

I've had the same problem with eslint@8.x.x and eslint-config-prettier@8.x.x . After downgrading

npm i -D eslint@^7 eslint-config-prettier@^7

things started to work again.

[AliRezaBeigy]

still, I can't fix the issue with these solutions

[Diego-Gnoatto]

Running npm i eslint-plugin-prettier@latest -D solved this for me.

this worked for me ,tks

[yubaoquan]

reason

Same problem in a monorepo. I have a custom eslint config dependency eslint-config-xxx, it depends eslint-plugin-prettrier
I don't know whether this is the bug reason for all scenarios:

The root package.json has a config

"workspaces": {
    "packages": [
      "Packages/*"
    ],
    "nohoist": [
      "**"
    ]
  },
"devDependencies": {
  "eslint-config-xxx": "1.1.1",
}

So eslint-plugin-prettrier is not installed in the root node_modules, but in node_modules/eslint-config-xxx/node_modules/.

resolve

I found this post, following its instruction, add a dependency @rushstack/eslint-patch. then add it in config file:

.eslintrc.js:

require('@rushstack/eslint-patch/modern-module-resolution')

// Add your "extends" boilerplate here, for example:
module.exports = {
  extends: ['xxx', 'yyy'],
  rules: {
    'no-magic-numbers': 'off',
    complexity: 'off',
    'no-return-assign': 'off',
  },
}

Then errors disappeared.

[bal1anD]

I am facing the same issue for a node/typescript application, none of the solutions mentioned here solved it for me.
These are my packages:

"@typescript-eslint/eslint-plugin": "^5.14.0",
    "@typescript-eslint/parser": "^5.14.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-prettier": "^4.0.0",

I had installed the latest versions of these packages but it didn't help.

[git-ashish]

I have the same issue as @nickzelei -- shared company config -- that suddenly started being unable to find eslint-plugin-prettier. This only happens in CI, not in local dev environment.

Did you find a solution for CI @okize?

[bal1anD]

@git-ashish no, this was happening only on my mac and not on my linux dev-box, so I run this only on linux now.

[okize]

@git-ashish the only thing that worked in CI was adding eslint-plugin-prettier as a top-level dependency in package.json, even though it shouldn't need to be added as it's already a dependency of our organization's eslint-config package,

[git-ashish]

Thanks! I'll give that a go. For th time being I used just _npm ci _ and that worked

[shona-duan]

you need wiped out node_modules .cache. I am facing the same issue.

[EmilMalanczak]

In my case, I'm working on monorepo with yarn workspaces with a single .eslintrc.js file in the root.
Something was wrong with how these dependencies were installed. I simply removed all of the packages related to eslint/prettier by: yarn remove -W [packages] and install them again with yarn add -D -W [packages].

None of the solutions mentioned before have worked

[ilyakonrad]

Deleting node_modules, reopening the VS Code and running yarn install helped me.

[JounQin]

This issue seems stale, feel free to create a new one with reproduction instead.

[ThanosDi]

For me in vscode I pressed F1 then typed reload window and the error was gone.

[ginabeki]

@baxelson12 Thanks for the response, but I already have the latest version (4.0.0) installed. Just to be sure, I uninstalled the plugin and reinstalled it using that command, but I'm still receiving the same error in VSCode.

this one helped

[nhebling]

We are running into the same issue. We are using yarn 1.22 during local development and npm 6.13.17 centrally.
We are experiencing this issue "Failed to load plugin '' declared in '.eslintrc': Cannot find module '" for multiple plug-ins:

• eslint-plugin-prettier
• @typescript-eslint/eslint-plugin

Tried using:

• eslint: 7.32.0, 8.0.4
• eslint-plugin-prettier: 4.2.1
• @typescript-eslint/eslint-plugin: 5.53.0

So I think this is still a problem and somehow the resolution does not work correctly. Based on the various pages and issues describing the same problem again and again with various versions - I don't think it's a problem specific to a specific version but rather a general problem in some environments on how e.g. the node_modules are loaded and organized.

[ravenberg]

Restarting WebStorm was sufficient for me

[danielwijaw]

Im just doing this step

1. switch to node v18
2. Update settings.json
   { "eslint.enable": true, "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact" ], "editor.codeActionsOnSave": { "source.fixAll": true, "source.fixAll.eslint": true, }, "eslint.options": { "overrideConfigFile": "LOCATION YOUR PROJECT DIRECTORY/.eslintrc.json" } }
3. remove node_modules and npm install
4. close VS Code then open again

[tanejaparul46]

For me this error resolved when i update my node version to v18.11.0 and npm -v is 8.19.2

[LucasNasc3000]

I had this same error and what resolved it for me was updating the node to version 18.20.1, the same version in which my project was developed. I suspected that the error could be due to the node version, which on the server I was trying to run build on was v12. After I updated using NVM it worked. (The OS on the server is Ubuntu 22.04 ).

[nathanbabcock]

For anyone still struggling with this, I had almost the exact same scenario as @mgrsskls mentioned above: #396 (comment).

Next.js v13.5, Yarn 1 workspaces, Storybook v7, and a custom shared eslint config package. Adding Storybook broke the module resolution somehow, preventing the shared eslint deps from getting hoisted up to the root level.

My solution was to add the "resolutions" field to the Storybook package.json that exactly matched the versions I used in the shared eslint config package. In my case it looks like this:

  "resolutions": {
    "@typescript-eslint/eslint-plugin": "^6.4.0",
    "@typescript-eslint/parser": "^6.4.0",
    "eslint": "^8.47.0",
    "eslint-config-next": "^13.4.17",
    "eslint-config-prettier": "^9.0.0",
    "eslint-config-react": "^1.1.7",
    "eslint-config-turbo": "^1.10.12",
    "eslint-plugin-import": "^2.28.0",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-prettier": "^5.0.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "prettier": "^3.0.2"
  }

[mehdinajafi]

This issue occurred for me in CI. I resolved it by updating my package versions in nextjs project to:

"eslint": "^8",
"eslint-config-next": "^14.0.4",
"eslint-plugin-storybook": "^0.11.0",