Prettier-atom: Failed to load plugin 'prettier' declared in 'CLIOptions': Cannot find module 'eslint-plugin-prettier'

[christroutner]

I reviewed older issues, but didn't find anything that matched this issue.

Prettier is no longer working properly in Atom. I have all my dependencies updated (as far as I can tell). I've tested against older versions of the code and this issue only occurs with these updated dependencies (list below).

Here is the error I get in Atom when I try to run auto-formatting with Prettier:

Here are the dev dependencies from my package.json file:

"eslint": "^6.0.1",
"eslint-config-prettier": "^4.3.0",
"eslint-plugin-node": "9.1.0",
"eslint-plugin-prettier": "^3.1.0",
"prettier": "^1.18.2",

I've rolled the dependencies above back to older versions and the error goes away, prettier functions as expected.

Running prettier on the command line seems to work fine. It's just the Atom integration/plugin that is failing.

[christroutner]

I should also mention: I use a .eslintrc.json file to define my linting rules. Here is the header part of it:

{
  "root": true,
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["prettier"],
  "rules": {
    "no-debugger": ["warn"],
    "no-regex-spaces": ["error"],
    "no-unsafe-negation": ["error"],
    ....

[christroutner]

Oh, I should also mention that this error is occurring in the latest version of prettier-atom: v0.56.6

[christroutner]

This issue seems to be isolated to the use of eslint v6.x. I was able to roll back eslint to version 5.16.0 and the problem went away. Everything else stayed the same.

[robwise]

Can you try running prettier directly from the command line with the 6.x version of eslint and see if you still get the problem?

[scyl]

same problem here

[zslabs]

@robwise It works from the command-line; just not within Atom.

[FbN]

Same for me

[eDubrovsky]

And same for me

[mohib0306]

I also get similar kind of error, not directly related to the eslint-plugin-prettier but the eslint-plugin-import that I am using it locally.

[robwise]

I just pushed a bunch of dependency updates, can you update prettier-atom to get these changes and see if you're still having the problem? I'm crossing my fingers that it's just something related to stale deps.

[romellogoodman]

Im still seeing the same issue as before

[ryanwiemer]

@robwise

I am seeing the same issue too even after updating prettier-atom. Let me know if you need further help testing.

[robwise]

Noticed these issues:

• https://github.com/prettier/eslint-plugin-prettier/issues/208
• https://github.com/microsoft/vscode-eslint/issues/696

I'm definitely thinking that this is an eslint 6.0 thing as reported by @christroutner.

They're reporting similar issues with VSCode and that going to eslint 5 fixes it again. Apparently in ESlint 6 they changed how the plugins get resolved.

I'm not totally sure how to fix the issue if this is really the cause though, and it seems like a lot of people here are already installing everything locally in their project as opposed to globally.

What's not helping is the fact that I can't reproduce locally despite bumping to eslint 6.

[sn3p]

Same happening here.
Error disappeared after removing "prettier" from the plugins in .eslintrc

[robwise]

Can you guys read through here and see if any of this applies to you? https://github.com/microsoft/vscode-eslint/issues/696

They mention issues with not installing the eslint plugins per project (you used to be able to install them globally, but now eslint6 requires them to be local to the project) as well as issues with having configurations in subfolders.

[THernandez03]

In my case, the .eslintrc is in the root of the project and all my plugins are installed locally. Also tried to set root as true but have the same error

prettier-atom failed: Failed to load plugin 'emotion' declared in 'CLIOptions': Cannot find module 'eslint-plugin-emotion' 

[sn3p]

Can you guys read through here and see if any of this applies to you?

I have everything installed locally in the root of my project as well.

package.json

"devDependencies": {
  "babel-eslint": "^10.0.2",
  "eslint": "^6.1.0",
  "eslint-plugin-prettier": "^3.1.0",
  "prettier": "^1.18.2",
  "prettier-eslint": "^9.0.0"
}

.eslintrc

"parser": "babel-eslint",
"parserOptions": {
  "ecmaVersion": 6,
  "sourceType": "module",
  "ecmaFeatures": {
    "modules": true
  }
},
"plugins": ["prettier"],
"rules": {
  "prettier/prettier": "error"
}

Error:

prettier-atom failed: Failed to load plugin 'prettier' declared in 'CLIOptions': Cannot find module 'eslint-plugin-prettier' Require stack: /placeholder.js

[robwise]

Jeez this is weird. Can you also please verify that you've gotten the latest prettier-atom version (released yesterday). There was a bug that had to do with our read-pkg-up and I notice that some people's errors are leading to very close to their home directory to a file named placeholder.js, as though we are incorrectly detecting the local project and falling back to looking into the home directory, but maybe that's a red herring?

[eDubrovsky]

Jeez this is weird. Can you also please verify that you've gotten the latest prettier-atom version (released yesterday). There was a bug that had to do with our read-pkg-up and I notice that some people's errors are leading to very close to their home directory to a file named placeholder.js, as though we are incorrectly detecting the local project and falling back to looking into the home directory, but maybe that's a red herring?

I have same error with latest prettier-atom version . (

[THernandez03]

I have the latest prettier-atom version 0.57.2.

[robwise]

Sorry for all of the questions, trying to figure out what the heck is going on here.

I assume you're using the eslint-integration feature of prettier-atom since this is an eslint error that's coming up. That functionality is actually calling out to prettier-eslint under the hood instead of prettier directly.

I think what's going on is that prettier-eslint is not detecting the current working directory properly for eslint 6: https://github.com/prettier/prettier-eslint/issues/222

This causes eslint to be unable to find the plugin packages?

[THernandez03]

In my case, yes, i'm using prettier-atom and the ESLint Integration option.

How can i help you to debug this problem ?? Should install prettier-eslint and run it ??

[robwise]

Yeah that might be a good idea, see if you can reproduce with prettier-eslint.

Another thing you could try just to at least workaround the problem right now is just to disable the eslinit integration and then use the linter-eslint Atom package. That's what I currently run personally and it works pretty well if you have the prettier plugin running inside of eslint and are extending eslint-config-prettier as it prevents any linter collisions.

[THernandez03]

Well, i used prettier-eslint and i have no problem using the following options

const format = require('prettier-eslint');
format({ eslintConfig: './.eslintrc', filePath: './src/file.js' });

---

About linter-eslint there are no differences with prettier ?? I'm also using eslint-config-prettier.

[robwise]

There aren't differences if you use eslint-config-prettier, it basically turns off the eslint rules that have to do with things that prettier takes care of.

[THernandez03]

It worked @robwise. I disabled ESLint integration from prettier-atom and continues working because of linter-eslint Atom plugin and eslint-config-prettier ESLint rule. 👍👍👍

[eugenet8k]

Thanks for your comment @THernandez03! Following your suggestion, I uninstalled prettier-atom completely, and instead updated my .eslintrc to use prettier as a plugin as described at https://prettier.io/docs/en/integrating-with-linters.html#use-eslint-to-run-prettier. Then having linter-eslint "Fix errors on save" option on, I managed to achieve the same UX as if I'd use prettier-atom.

[robwise]

I use both that way I can still use prettier for non-JS code. As long as you have eslint-config-prettier for eslint then they can both run happily side-by-side. This is really the recommended way to do it, as prettier-eslint's own creator (Kent C. Dodds) doesn't agree with its use anymore. I just keep it in here because people want to seem to keep using it for some reason, but it can cause a lot of issues (like this one).

[eugenet8k]

@robwise thanks for confirming my guess that the usage of this (prettier-atom) Atom plugin is rather obsolete.

[robwise]

Well I was talking about prettier-eslint not really being a recommended thing to keep using, not prettier-atom. If you want to use prettier without eslint, which many people do for JS and is required for other languages that Prettier supports (since ESLint is only for JS), then you still need prettier-atom.

[nerdyman]

Downgrading to ESLint 5.16.0 has fixed this for me for now, but it's not an ideal solution.

[tylergraf]

https://github.com/facebook/react/issues/16531#issuecomment-523620795

rm -rf node_modules && npm i and then restart atom fixed it for me.

[samuraijane]

For me the issue was in Prettier's settings. If Format Files on Save is checked, make sure that ESLint Integration is unchecked.

[robwise]

Yes this is a problem with prettier-eslint, so if you turn off the ESLint integration it will just work normally. I recommend people do this normally but I didn't want to have the prettier-eslint devotees get mad lol!

Personally, I don't use prettier-eslint because I set up ESLint to just not touch the types of things that would disagree with prettier (using eslint-config-prettier). So I would use eslint-config-prettier in your ESLint settings to make sure ESLint plays nicely, then have both prettier-atom and linter-eslint on as Atom packages. Then disable ESLint Integration in your prettier-atom settings so that we don't bother trying to integrate the two (which is where prettier-eslint has a bug). That's what I do personally as I love both ESLint and Prettier and this works great.

[lewisl9029]

I would personally still love to keep using this plugin and the prettier-eslint integration, because it seems to be the only way afaik to apply eslint styling rules that don't agree with prettier's output without a bunch of permanent linting errors.

Even the eslint-plugin-prettier project still points users to prettier-eslint for this use case: https://github.com/prettier/eslint-plugin-prettier#recommended-configuration

If your desired formatting does not match the prettier output, you should use a different tool such as prettier-eslint instead.

I personally love using prettier's max-length based formatting algorithm, but prettier itself is still far too opinionated and inflexible to satisfy everybody's styling preferences, so having prettier-eslint as an escape hatch has proven to be incredibly valuable for me (fwiw one of the things I use it for currently is to change the way nested ternaries are formatted: https://github.com/prettier/prettier/issues/5814).

I'll see if I can find some time later this week to put up a PR to fix this, or at least set up a repo to repro this so people more familiar with the plugin can take a look.

[robwise]

it seems to be the only way afaik to apply eslint styling rules that don't agree with prettier's output without a bunch of permanent linting errors.

Yes I agree, if you actually don't like the way Prettier is doing something and want ESLint to override it, then you sort of have to use prettier-eslint.

I'm totally fine with continuing to support prettier-eslint but this bug specifically I'm thinking is actually a problem with prettier-eslint and not prettier-atom AFAICT, so it really would need to be fixed there. Unless, that is, we are passing some arguments in a weird way to prettier-eslint and that's what's causing it to get confused?

[lewisl9029]

Looked into this a bit more and made a PR to prettier-eslint that seems to resolve the issue (for my setup at least): https://github.com/prettier/prettier-eslint/pull/242

Will open a PR here to update when that gets merged & released so we can close this one off. :)

[robwise]

You're a beast!

[digitalmaster]

@lewisl9029 Amazing work - as usual. 🙌🏽

[dreadrocksean]

So how do I get the fix?

[robwise]

prettier-eslint needs to merge in his branch and then I can cut a new release of prettier-atom immediately, but they haven't merged it yet for some reason.

[AndresAusecha]

This issue seems to be isolated to the use of eslint v6.x. I was able to roll back eslint to version 5.16.0 and the problem went away. Everything else stayed the same.

this guy is a hero

[dreadrocksean]

So was it merged? I see that the issue is closed.

[lewisl9029]

Hi all, since the maintainer of prettier-eslint hasn't been responsive in reviewing my upstream fix for this issue, I thought it might be a good idea to switch to a (hopefully 🤞) temporary fork of prettier-eslint here instead, and created this PR: https://github.com/prettier/prettier-atom/pull/564

@robwise wdyt?

[robwise]

Agreed, merged for now. I think I may add a deprecation notice in the README or something. Really I think using eslint-config-prettier to turn off conflicting rules seems to be the best way to go.

[damianjnc]

I updated prettier-atom and restarted Atom and it fixed the issue

[FabianoLothor]

facebook/react#16531 (comment)

rm -rf node_modules && npm i and then restart atom fixed it for me.

This works to me.