ESLint with Prettier issues on Yarn global install - eslint

Question

I'm in the process of setting up my ReactJS environment, and I'm following the FrontendMasters course on the topic.
After having installed eslint and prettier globally via Yarn, the author runs this command eslint js\**\*.{js,jsx} and on his machine, all is good, but I get the following:
Oops! Something went wrong! :(
ESLint couldn't find the plugin "eslint-plugin-prettier". This can happen for a couple different reasons:
If ESLint is installed globally, then make sure eslint-plugin-prettier is also installed globally. A globally-installed ESLint cannot find a locally-installed plugin.
If ESLint is installed locally, then it's likely that the plugin isn't installed correctly. Try reinstalling by running the following:
npm i eslint-plugin-prettier#latest --save-dev
If you still can't figure out the problem, please stop by https://gitter.im/eslint/eslint to chat with the team.
I tried Google, but couldn't find anything relevant. Why is this happening? I am on Windows 10, using the latest version of Yarn (v0.24.6) and my eslintrc.json looks like this:
{
"extends": ["airbnb", "prettier", "prettier/react"],
"plugins": ["prettier"],
"parserOptions": {
"ecmaVersion": 2016,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true
}
}
UPDATE
I followed Daydream's advice below, though I do not have nvm installed. But I did delete the node_modules folder, and after a chat in ESLint's Gitter, I went ahead and uninstalled ESLint, and Prettier globally. I then made ESLint and Prettier devDependencies. Finally I ran yarn command to reinstall everything, and now I get this:
Note: The project is open source, and is on GitHub if you want to see for yourself.

Answer 1

I just ran into the same issue myself. It appears to be an issue with the newest version of eslint, mine was 4.2.0. To fix this I:
run: Yarn remove eslint
or
run: npm uninstall eslint
this will remove it locally, then
run: yarn add eslint#3.19.0
or run: npm install eslint#3.19.0
run: eslint **/*.{js,jsx} --quiet
my paths may be set up different so do this in conjunction with "Daydream Nation" answer you should get it working. I'm not sure what version os eslint Brian is using and I'm sure if you pull down one of his most recent repo's it will tell you but hopefully this will guide you in the right direction.

Answer 2

I was missing several packages. Here is how I fixed it.
npm i eslint-config-prettier -save-dev
npm i eslint-config-standard -save-dev
npm i eslint-plugin-node -save-dev
npm i eslint-plugin-promise -save-dev
Here is my package.json
{
"name": "rpp-react",
"private": true,
"scripts": {
"start": "meteor run"
},
"dependencies": {
"babel-runtime": "^6.20.0",
"meteor-node-stubs": "~0.2.4",
"prop-types": "^15.5.10",
"react": "^15.6.1",
"react-addons-pure-render-mixin": "^15.6.0",
"react-dom": "^15.6.1",
"react-tap-event-plugin": "^2.0.1"
},
"devDependencies": {
"babel-eslint": "^8.0.0",
"eslint": "^4.7.2",
"eslint-config-prettier": "^2.5.0",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-flowtype": "^2.35.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-node": "^5.1.1",
"eslint-plugin-prettier": "^2.3.1",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-react": "^7.3.0",
"eslint-plugin-standard": "^3.0.1",
"prettier": "^1.7.0"
}
}
Here is my .eslintrc.json
{
"extends": [
"standard",
"plugin:flowtype/recommended",
"plugin:react/recommended",
"prettier",
"prettier/flowtype",
"prettier/react",
"prettier/standard"
],
"plugins": [
"flowtype",
"react",
"prettier",
"standard"
],
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"node": true
},
"rules": {
"prettier/prettier": "error"
}
}

Answer 3

This is an UGLY HACK, but it was the ONLY WAY for me... to solve this problem.
I used "strace" tool to check what modules are required, i copied that files (pacience in this step please!) and it worked :)
strace eslint --debug Person.js
Yes... you have to scroll some lines until you found something like this:
stat("/usr/local/share/.config/yarn/global/node_modules/eslint/node_modules/eslint-plugin-prettier", 0x7fff5c139db0) = -1 ENOENT (No such file or directory)
You need to COPY that required modules... and it will work.
These are a list of modules that i had to copy manually (inside /usr/local/share/.config/yarn/global/node_modules/eslint/node_modules/)
eslint-config-airbnb
eslint-config-airbnb-base
eslint-plugin-import
eslint-plugin-jsx-a11y
eslint-plugin-prettier
eslint-plugin-prettier/node_modules/fast-diff
eslint-plugin-react
Please excuse my ugly english, i'm learning :)

Answer 4

I got the same error ("cannot find module eslint-config-prettier/react") while following the steps from the Frontend Masters course you mention and was able to resolve it by installing eslint-config-prettier, as shown below, before running the lint script:
npm install --save-dev eslint-config-prettier
or, if using yarn:
yarn add --dev eslint-config-prettier
Note that eslint-config-prettier "turns off all rules that are unnecessary or might conflict with prettier".

Answer 5

For me it happened after I (intentionally) uninstalled "eslint-plugin-prettier", and forgot to remove "prettier" from the "plugins" array in my eslint config, like so:
package.json:
{
// ...
"eslintConfig": {
// ...
"plugins": [
// ...
// This needed to be removed
"prettier"
]
}
}

Answer 6

I'm also doing the course, and the first tip I saw on the web was to reference the direct path to eslint via the installation by yarn into node_modules:
./node_modules/.bin/eslint **/*.{js,jsx} --quiet
But then after that, I was met with an error message with - Unexpected top-level property "ecmaFeatures"
Ultimately, what I did to solve the problem was to erase node_modules, erase everything from~/.nvm/versions/node/<the version>/lib/node_modules except for the npm and yarn folders, and just typed yarn to re-install everything.
After that,./node_modules/.bin/eslint **/*.{js,jsx} --quiet worked fine (but I still had to specify the path to the installation.
Hope that helps!