ESLint fails to load plugins when using ESLint 6.x

samrith-s commented 5 years ago

I have the following packages installed as dev deps:

{
    "babel-eslint": "^10.0.2",
    "eslint": "^6.0.1",
    "eslint-config-prettier": "^5.1.0",
    "eslint-plugin-import": "^2.18.0",
    "eslint-plugin-prettier": "^3.1.0",
}

And this is my .eslintrc file:

{
    "parser": "babel-eslint",
    "plugins": ["import", "prettier"],
    "extends": [
        "eslint:recommended",
        "plugin:import/errors",
        "plugin:import/warnings",
        "prettier"
    ],
    "settings": {
        "import/resolver": {
            "node": {
                "extensions": [".js"]
            }
        }
    },
    "env": {
        "es6": true,
        "browser": false,
        "node": true,
        "jquery": false,
        "jest": true
    },
    "rules": {
        "quotes": 0,
        "no-console": 1,
        "no-debugger": 1,
        "no-var": 1,
        "no-trailing-spaces": 0,
        "eol-last": 0,
        "no-underscore-dangle": 0,
        "no-alert": 0,
        "no-lone-blocks": 0,
        "import/extensions": 1,
        "import/no-named-as-default": 0,
        "prettier/prettier": [
            "error",
            {
                "singleQuote": true
            }
        ]
    },
    "globals": {
        "Atomics": false,
        "SharedArrayBuffer": false
    }
}

I have Format on Save on. When I run eslint --fix, it works properly. But when I hit save, I get the following error. It doesn't work for any plugin, even though I have all of them installed.

CodingDive commented 5 years ago

I'm getting the same error. I'm using TypeScript + Yarn workspaces + Lerna and have all the plugins installed locally and globally.

Failed to load plugin prettier: Cannot find module 'eslint-plugin-prettier'
Happened while validating foo.tsx 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.

Restarting Visual Studio Code seemed to have fixed it temporarily for me but the issue keeps coming back.

samrith-s commented 5 years ago

I still continue to have this problem, even after restarting VS Code. I've tried everything:

Deleting node_modules and yarn.lock and running yarn install again.
Removing the packages and adding them again.
Removing ESLint and adding it again.

And weirdly, it's just a problem with this project. In another project, I get this error:

6/26/2019, 6:35:31 PM:
----------------------
Cannot find module './utils/ast-utils'

dbaeumer commented 5 years ago

@samrith-s since this seems to be setup specific can you share a GitHub repository I can clone that demos this.

samrith-s commented 5 years ago

I unfortunately cannot share the repository, it's a private one on GitHub. I'll setup a repository which tries to replicate this.

Also, could you just tell me what does plugin 'import' specified in CLIOptions means?? I do not have ESLint globally, and I get this error even when I remove the plugins attribute from my RC file.

samrith-s commented 5 years ago

@dbaeumer Here is a reproducible repository. Do let me know if you get the error, because I am getting it in this repository as well.

https://github.com/samrith-s/vscode-eslint-reproduce-error

samrith-s commented 5 years ago

Also most likely related to this: https://github.com/prettier/prettier-vscode/issues/672

dbaeumer commented 5 years ago

@samrith-s actually it works for me

samrith-s commented 5 years ago

@dbaeumer I think this happened with Prettier-ESLint integration on. I'm closing this issue as it is related to the issue with prettier-vscode and not with vscode-eslint. I started getting these errors after upgrading to Node 12.

sevenmay commented 5 years ago

@dbaeumer I think this happened with Prettier-ESLint integration on. I'm closing this issue as it is related to the issue with prettier-vscode and not with vscode-eslint. I started getting these errors after upgrading to Node 12.

I have this same problem and i don't use prettier-vscode.

samrith-s commented 5 years ago

@sevenmay What version of Node are you on?

sevenmay commented 5 years ago

@sevenmay What version of Node are you on?

v8.11.2

saostad commented 5 years ago

same problem here.

dbaeumer commented 5 years ago

Do any of you use eslint.runtime setting to point to a node version. Otherwise VS Code eslint uses the one shipped with VS Code itself so it don't matter which node version you have installed.

or2008 commented 5 years ago

same issue here, Failed to load plugin 'jest' declared in '--config': Cannot find module 'eslint-plugin-jest'

eslint-plugin-jest and eslint are both installed globaly

saostad commented 5 years ago

Do any of you use eslint.runtime setting to point to a node version. Otherwise VS Code eslint uses the one shipped with VS Code itself so it don't matter which node version you have installed.

I am not using it.

dbaeumer commented 5 years ago

A GitHub repository that demos this is highly appreciated. Otherwise it is very hard to track this down.

samrith-s commented 5 years ago

Hey @dbaeumer, the repo I sent doesn't work with Node v12, but works with Node v10. I do not have eslint.runtime configured.

saostad commented 5 years ago

I think that's a prettier-vscode problem:

here is a repo to see: https://github.com/saostad/react-typescript-starter

UncleClapton commented 5 years ago

Hi there!

I ran into this today while updating our ESLint config repository (found here).

I've done some digging and found that it's probably an incompatibility between vscode-eslint and ESLint 6, but without more detailed error reporting from the extension I can't pinpoint the problem.

Here's some major things I noted while testing:

Problem began with ESLint 6. All versions of ESLint 5 I tried worked fine.
Same error occurs for all plugins (import, babel, react, react-hooks, jsx-a11y in my case), eslint just reports the first one and gives up.
ESLint 6 runs fine in CLI and other editors using the same config ESLint running under the extension fails out on.

I hope this helps find the root cause! I'm going to continue trying to find a workaround to make ESLint 6 work, but so far the only thing I've found is to downgrade to ESLint 5.16.0

r-i-c-h commented 5 years ago

I'm seconding that it's related to ESLint reaching a new semver V6 on Jun21/(6.01 on Jun24)

Best Practice has always been to install eslint and setup .eslintrc files and plugins on project-by-project basis as defined in a project's package.json.

Real World is that many of us use either global eslint installations, global .eslintrc files, or globally-installed plugins. Before v6, to be used by a global eslint installation or .eslintrc file, one need only globally install the plugin via npm install --g eslint-config-_[airbnb]_ .

Apparently, as of ESLint v6, while you can still technically use a global eslint installation, all plugins need to be "locally" installed [per project].

See ESLint v6 Migration Docs for details.

dbaeumer commented 5 years ago

@r-i-c-h and @UncleClapton thanks for providing the detailed information.

I upgraded my test projects to use ESLint 6.0 and the latest version of the plugins and every thing works for me.

I tried to test https://github.com/fuelrats/fuelrats-eslint-config but I can't reach the repository. @UncleClapton is it public?

Luxiyalu commented 5 years ago

I was getting the same error for react-hooks config, and unchecking the VSCode option Use 'prettier-tslint' instead of 'prettier' dissipated the error for me.

echarpibm commented 5 years ago

Started having issues with ESLint today after experimenting with migration to node 12.

I had everything installed at global level (ESLint and babel-eslint) and started seeing the failed to load parser error in VS Code.

This statement from @r-i-c-h helped me resolve my issue.

Apparently, as of ESLint v6, while you can still technically use a global eslint installation, all plugins need to be "locally" installed [per project].

I simply installed the plugin at project level and everything started to work.

Hoping that this helps others as well.

UncleClapton commented 5 years ago

@dbaeumer it's public on npm, yes. @fuelrats/eslint-config or @fuelrats/eslint-config-react.

What @r-i-c-h suggested doesn't reflect my own testing unfortunately, so this is still an issue I'm having. I have always preferred an all local install over global. Makes for less version conflicts across projects.

I have a few ideas of what to try next. I'll update if I get a solid answer.

EDIT: Wow my bad at misunderstanding you were talking about the github repo @dbaeumer. The correct link is https://github.com/fuelrats/eslint-config-fuelrats. Suppose this is what I deserve for attempting to type it in manually. 🤣

dbaeumer commented 5 years ago

@UncleClapton does the repository still show the problem of loading ESLint ?

chaitanyapotti commented 5 years ago

I face the same issue. The issue started when i upgraded to eslint 6 and disappears when downgraded to 5. Repo linked here

UncleClapton commented 5 years ago

@dbaeumer it does.

After some further digging I think I finally found a culprit, however I'm not sure if this is the cause or just another side-effect of the changes in ESLint v6.

I found that in my specific case, this error was caused by the project not being vscode's workspace root. Whenever I load one of the individual config projects into vscode, everything resolves fine. When I load the repository root, however, both projects fail to load their plugins. This is despite the extension's ESLint server loading ESLint via each project's respective node_modules directory.

I was able to confirm that plugins will only load from the workspace root by copying the node_modules from one of the projects into it. Everything loads fine as long as the node_modules directory in the workspace root contains the plugins that a config defines.

I also just attempted to update one the projects using this config, and everything is working for that project on ESLint v6.

TL;DR: ESLint v6 broke the ability to have multiple projects in a workspace. Would this be fixable from this extension?

akphi commented 5 years ago

@dbaeumer it does.

After some further digging I think I finally found a culprit, however I'm not sure if this is the cause or just another side-effect of the changes in ESLint v6.

I found that in my specific case, this error was caused by the project not being vscode's workspace root. Whenever I load one of the individual config projects into vscode, everything resolves fine. When I load the repository root, however, both projects fail to load their plugins. This is despite the extension's ESLint server loading ESLint via each project's respective node_modules directory.

I was able to confirm that plugins will only load from the workspace root by copying the node_modules from one of the projects into it. Everything loads fine as long as the node_modules directory in the workspace root contains the plugins that a config defines.

I also just attempted to update one the projects using this config, and everything is working for that project on ESLint v6.

TL;DR: ESLint v6 broke the ability to have multiple projects in a workspace. Would this be fixable from this extension?

I agree with @UncleClapton, I have something like this

parentProject
-- projectA
-- projectB (JS and has ESLint setup)

If I open projectB as the root in VSCode, the plugin works fine, but if I open parentProject, I will see the error

I also tried to downgrade to ESLint 5 and the situation is the same.

dbaeumer commented 5 years ago

@blacksteed232 do you have an example project I can clone that demos this?

chaitanyapotti commented 5 years ago

@dbaeumer Here is the project. you can demo the behaviour in this

dbaeumer commented 5 years ago

@chaitanyapotti your problem seems different. Since you have relative paths in your config you need to tell the ESLint extension where the ESLint working directory is. I got your example working using:

  "eslint.workingDirectories": [
    { "directory": "./app", "changeProcessCWD": true }
  ]

It also works if you open the app directory as a folder.

And the command line has the same problem when executed from the root folder:

eslint\torus-website> .\app\node_modules\.bin\eslint.cmd .\app\src\controllers\AccountTracker.js

Oops! Something went wrong! :(

ESLint: 6.0.1.

ESLint couldn't find the plugin "eslint-plugin-vue".

(The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "C:\Users\dirkb\Projects\mseng\VSCode\Playgrounds\bugs\eslint\torus-website".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

    npm install eslint-plugin-vue@latest --save-dev

The plugin "eslint-plugin-vue" was referenced from the config file in "app\.eslintrc.json".

If you still can't figure out the problem, please stop by https://gitter.im/eslint/eslint to chat with the team.

UncleClapton commented 5 years ago

@dbaeumer Thanks for pointing out eslint.workingDirectories. This fixed my issues. thanks!

chaitanyapotti commented 5 years ago

@dbaeumer that fixed it for me. Thanks

akphi commented 5 years ago

@dbaeumer Thank you eslint.workingDirectories works for me

CodingDive commented 5 years ago

Unfortunately, this did not fix it for me using lerna + yarn workspace monorepository.

My structure looks like this

root
--packages
---- craApp (with eslintrc.json) 
---- craDesignSystem (with eslintrc.json)
---- server (with eslintrc.json)

The VSCode ESLint output always shows an error like the following

[Info  - 10:21:29 PM] ESLint library loaded from: root\node_modules\eslint\lib\api.js
[Error - 10:21:29 PM] Cannot find module 'eslint-config-react-app' Referenced from: root\packages\craApp\.eslintrc.json

Issue shows up even with following yarn workspace configuration inside the root package.json. Here I try to prevent the hoisting of eslint-config-react-app into the root folder but even after cleaning all of node_modules and running lerna bootstrap anew, it still seems to install react-scripts and the eslint plugins into the node_modules of root.

"workspaces": {
  "packages": [
    "packages/**"
  ],
  "nohoist": [
    "**/react-scripts/**"
  ]
]

It doesn't matter if I explicitly install eslint-plugin-react-app, extend it through the package.json of the packages, or specify extends via my custom eslintrc.json configuration.

The problem seems to be that it's always installing eslint to the root node_modules folder (I also tried nohoisting eslint to no avail) and when the eslint configs of my packages reference a plugin, ESLint fails to load it since it doesn't know about the root package and looks inside the mostly empty node_modules of e.g craApp.

On top of @dbaeumer solution of specifying eslint.workingDirectories (see https://github.com/microsoft/vscode-eslint/issues/696#issuecomment-508687311), is there a way to point eslint to a fallback (in my case root) directory that may contain the plugins it can't find?

Let me know if you want me to create a new issue in this, create-react-app, yarn or lerna repository but at this point I'm kind of lost on where to find a solution to my problem.

CodingDive commented 5 years ago

The fix for the issue I described above was to install eslint-config-react-app into the package.json of the root, then set a yarn resolution to make sure it doesn't install a newer version of babel-eslint.

"resolutions": {
  "babel-eslint": "10.0.1"
},

johnpyp commented 5 years ago

Before the update it seems like "monorepo" style directories worked without the need to specify nested eslint working directories. Is it possible to implicitly detect them (like before) rather than having to explicitly specify them?

dbaeumer commented 5 years ago

@johnpyp I see your point but the underlying cause of this is that ESLint 6.0 changed the way how they resolve / load plugins. There was no change in the extension.

Detecting the folders in a monrepro might not be easy. I opened https://github.com/microsoft/vscode-eslint/issues/708 since I would like to keep this is focused on the loading issue.

A PR implementing https://github.com/microsoft/vscode-eslint/issues/708 is welcome.

davidysoards commented 5 years ago

the "eslint.workingDirectories" approach OR opening vscode from a terminal window inside the project root folder with "code ." work for me, but I hope this issue gets fixed. thanks @dbaeumer

dbaeumer commented 5 years ago

@davidysoards are you saying this makes a different for you whether you open code from a terminal or not. If so can you provide me with a GitHub repository I can clone that demos this.

As I was trying to explain here this is nothing I can fix easily since it is caused by ESLint 6.0 not supporting plug-in loading in the same way. As I was showing this even happend when executing things form the terminal.

All we can do is to infer working directories as described in #708 but it will still require user interaction since the inference could be simply wrong.

davidysoards commented 5 years ago

@dbaeumer I was just stating the easiest way I know to "open the app directory as a folder." I used the gatsby-starter-default and added an .eslintrc.json file to the root folder set to

{
  "extends": "react-app"
}

and the extension is working as expected. Thanks again for your help.

dkadrios commented 5 years ago

I'm having the same issues with eslint 6, and to add a new wrinkle, now when reverting back to eslint 5.16.0, prettier is throwing Cannot find module './utils/ast-utils'

I've tried nuking node_modules (even yarn.lock) but the issue persists. Seems like once you install eslint 6, something in vsc's integration gets permanently borked.

Anyone else having issues reverting to eslint 5? Any workarounds?

CodingDive commented 5 years ago

Try npms timetravel feature to make sure you don't get any dependencies relying on eslint 6+. npm i --before 2019-04-01

On Wed, Jul 10, 2019, 01:27 Darin Kadrioski notifications@github.com wrote:

Anyone else having issues reverting to eslint 5? Any workarounds?

dkadrios commented 5 years ago

I confirmed that the only package change was eslint 5 to 6 and then back to 5.

What ultimately resolved this for me was to reinstall vscode

dbaeumer commented 5 years ago

What ultimately resolved this for me was to reinstall vscode

This sounds really strange since the VS Code installation should have no impact on this

manuelbieh commented 5 years ago

@dkadrios - same issue here. I upgraded to ESLint 6 and downgraded back to 5 and still got this ast-utils error. What helped for me (instead of uninstalling VSCode) was to revert back to ESLint 5 in the project folder and then rename[!] the project folder and restart VSCode. After I reverted to ESLint 5 and renamed the folder, the error disappeared. That's still ugly but better than having to reinstall VSCode completely.

dkadrios commented 5 years ago

I didn't think to rename the project folder -- good to hear that that works. Much simpler.

Reinstalling was actually trivial thanks to the Settings Sync extension which I highly recommend using, especially if you use vscode on multiple machines. https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync Once I had the new binary, I just needed to install that one extension and it then reimported all my other settings, extensions and snippets.

dancherb commented 5 years ago

@manuelbieh Thanks, this helped me as well. I'd wiped any trace of the new eslint after creating a new react-native project on the latest react-native version, nuked node_modules and wiped package-lock.json multiple times, but was still getting the error - renaming and restarting sorted it out.

ivo-urbanek commented 5 years ago

After update to Eslint v6.x: [Info - 9:03:19 AM] ESLint server stopped. [Info - 9:03:20 AM] ESLint server running in node v10.2.0 [Info - 9:03:20 AM] ESLint server is running. [Info - 9:03:21 AM] ESLint library loaded from: /srv/dev/users/app/node_modules/eslint/lib/api.js [Error - 9:03:21 AM] Failed to load plugin 'react' declared in 'users/app/.eslintrc': Cannot find module 'eslint-plugin-react' Require stack:

/srv/dev/placeholder.js Referenced from: /srv/dev/users/app/.eslintrc Happened while validating /srv/dev/users/app/src/components/NewUser.jsx 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-react' is installed globally as well.
3. If ESLint is installed locally, then 'eslint-plugin-react' isn't installed correctly.

Consider running eslint --debug /srv/dev/users/app/src/components/NewUser.jsx from a terminal to obtain a trace about the configuration files used.

Updated this packages: "eslint": "^6.0.1", "eslint-config-airbnb": "^17.1.1", "eslint-loader": "^2.2.1", "eslint-plugin-import": "^2.18.0", "eslint-plugin-jest": "^22.7.2", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-react": "^7.14.2",

cassv24 commented 5 years ago

Same issue here, 🐧Ubuntu 19.04, "eslint": "^6.0.1"

[Info  - 9:39:39 PM] ESLint server stopped.
[Info  - 9:39:39 PM] ESLint server running in node v10.11.0
[Info  - 9:39:39 PM] ESLint server is running.
[Info  - 9:39:40 PM] ESLint library loaded from: ~/myproject/server/node_modules/eslint/lib/api.js
[Error - 9:40:35 PM] 
Failed to load plugin 'import' declared in 'server/.eslintrc.js': Cannot find module 'eslint-plugin-import'
Require stack:
- ~/myproject/__placeholder__.js
Referenced from: ~/myproject/server/.eslintrc.js
Happened while validating ~/myproject/server/src/server.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-import' is installed globally as well.
3. If ESLint is installed locally, then 'eslint-plugin-import' isn't installed correctly.

Consider running eslint --debug ~/myproject/server/src/server.js from a terminal to obtain a trace about the configuration files used.

microsoft / vscode-eslint

ESLint fails to load plugins when using ESLint 6.x #696