Vscode-eslint: Failed to load plugin react: Cannot find module 'eslint-plugin-react' every time I open a .js file

[dbaeumer]

_From @ddieppa on April 22, 2016 19:12_

• VSCode Version:
  Version 1.0.0
  Commit fa6d0f03813dfb9df4589c30121e9fcffa8a8ec8
  Date 2016-04-13T14:08:36.599Z
  Shell 0.35.6
  Renderer 45.0.2454.85
  Node 4.1.1
• OS Version: windows 8.1 Pro

Failed to load plugin react: Cannot find module 'eslint-plugin-react' every time I open a .js file, not even related with any react development

Steps to Reproduce:

1. right click on any .js file and open with VS Code
2. wait a few seconds and the error appears

_Copied from original issue: Microsoft/vscode#5667_

[dbaeumer]

@ddieppa do you have the eslint extension installed? Looks like the extension can't load the react plugin?

[dbaeumer]

_From @ddieppa on April 22, 2016 19:32_

that's my point, I just installed VS Code 1.0 from scratch, and installed eslint plugin for VS Code, but I don't have to install the eslint-plugin-react, I am just trying to open a .js file, not working on any react project or anything related to react

this is what I have globally installed in my pc:

and this are my installed extension in VS Code:

[sibelius]

can vscode check for eslint inside node_modules of current project instead of looking for global eslint?

[alechp]

@dbaeumer Just ran into similar issue.
My case is slightly different from yours because I am working in React - however, I was getting the same error-toast for "eslint-plugin-react" on every JS file (_including config files like webpack.config.js_)

I was using the eslint file from Dan Abramov's popular react hot reloader boilerplate.
My issue ended up being that my .eslintrc file had non-es6 flags (JSX), which was causing the error.

See here for notes on migrating to Eslint2.x API: http://eslint.org/docs/user-guide/migrating-to-2.0.0

[FAILING] My old .eslintrc file that was making the error:
{ "ecmaFeatures": { "jsx": true, "modules": true }, "env": { "browser": true, "node": true }, "parser": "babel-eslint", "rules": { "quotes": [2, "single"], "strict": [2, "never"], "react/jsx-uses-react": 2, "react/jsx-uses-vars": 2, "react/react-in-jsx-scope": 2 }, "plugins": [ "react" ] }

[WORKING] My new .eslintrc file with working linting / no recurring "eslint-plugin-react" error:
{ "parserOptions": { "ecmaVersion": 6, "sourceType": "module", "ecmaFeatures": { "jsx": true }, "plugins": [ "react" ], "extends": ["eslint:recommended", "plugin:react/recommended"] } }

UPDATE: In case you're wondering where the "extends" key comes from, check the eslint-plugin-react NPM page https://www.npmjs.com/package/eslint-plugin-react That's also the page that made me realize my ESLINT config was deprecated.

[dbaeumer]

@sibeliusseraphini eslint does prefer eslint installed in the workspace folder over a global installed eslint

[dbaeumer]

@ddieppa to my understanding your workspace has a .eslint config file requiring the react plugin but that is not installed, neither globally nor locally.

I tested the react plugin with the latest eslint extension and it works for me using a proper 2.0 config file. See screen shot.

[dbaeumer]

@alechp thanks for the information. The ESLint extension uses the eslint API under the cover. So the extension relies on the eslint API to complain about incorrect eslint config files. There is little I can do on my end without reimplementation.

[dbaeumer]

Any objection to close this issue. react plugin is working in general. What is on the plan (as soon as VS Code provides API for it) is to allow to disable the plugin in these cases by clicking a corresponding action in the message.

[ddieppa]

@dbaeumer I think I mentioned before, I just open a .js file, not even a project or a folder only a js file, and I got this error, I don't work with react, and I don't have any .eslintrc.json file.
I also have Atom installed in my PC, is there any possibility that Atom installed some sort of global .eslintrc.json file and is conflicting with VS Code or something like that?

[dbaeumer]

@ddieppa what is happening is that the ESLint plugin is installed and therefore tries to lint the js file. What we are working on this to not lint if no ESLint configuration can be found (dups #39) and to offer you a button Disable ESLint if a configuration is found and you still want to disable it.

[craigsh]

This has started happening for me today. The message constantly pops up. I dismiss it then start typing and it pops up again.

[dbaeumer]

@craigsh which version of the plugin are you using?

[dbaeumer]

@craigsh I tried to reproduce this but I can't. How do you dismiss the dialog ?

[craigsh]

@dbaeumer I installed it in VS Code using ext install eslint - it reports the version as 0.10.17

I have just tried it again and get the same result. Opening a .js file results in the popup:

Error: Failed to load plugin react: Cannot find module 'eslint-plugin-react'.

I click the Close button to dismiss the error. As soon as I make a change to my code the error pops up again (as it's obviously trying to lint my code).

I have eslint installed using npm install --save-dev and it reports version 2.13.1

[craigsh]

@dbaeumer Also, I tried installing eslint-plugin-react to see whether that would fix things but it's had no effect. (Note, I'm not on a react project)

[OYangXiao]

I started from this page https://code.visualstudio.com/docs/languages/javascript, it told me to install eslint globally, then I had the same issue that the vscode cannot find eslint-plugin-react.

so I uninstalled the global eslint and install it in the project directory, everything just OK now

[craigsh]

@binbinfrog Thanks, I've managed to get it to work now by fiddling with various installs and config files.

[dbaeumer]

@craigsh good to hear you got it to work. An additional note: If eslint is installed globally, it can't load locally installed plugins. This is a limitation in eslint, which the vscode-eslint extension should handle better (not show the message again).

[ddieppa]

so is there any defined workaround? because I uninstalled eslint from global, not the VSCode plugin and now I am getting this error:

I think this is the expected error.
so what I did was install eslint locally (as a dev dependency)
npm install eslint --save-dev
then I started getting same error as before:

@craigsh @binbinfrog what are the steps to avoid this?

[craigsh]

@ddieppa My current installation is working. In the end I installed the following globally:

eslint
eslint-plugin-react
babel-eslint

I also have a .eslintrc in my project and had to remove the global .eslintrc file.

Basically trial and error to get it working. YMMV :)

[dbaeumer]

@ddieppa eslint and all its plugins it loads must either all be installed globally or all locally. Mixing it doesn't work in eslint itself (e.g. has nothing to do with the eslint extension).

[traktraktrugui]

eslint
eslint-plugin-react
babel-eslint
eslint-config-defaults

npm install -g eslint eslint-plugin-react babel-eslint eslint-config-defaults

@craigsh thanks for the tip, my configuration needed one more package.

[mattiaerre]

I am still having this issue; here some more details:

// cc @dbaeumer

[sethreidnz]

I get this same issue on this repo that has no eslint or reference to eslint:

https://github.com/justsayno/webpack-html-sass-starter

Quite frustrating as I use it heavily for JSX work I do but when not doing JSX and not using eslint it annoys me all the time about eslint plugins.

[lukekentwell]

Im having this same issue..

fresh install of VScode 1.4.0
installed extension
created a folder and opened it
added a main.js file, put a function in it..
npm init
installed eslint locally (npm i eslint)

before I even create an .eslintrc file.. any *.js file opened I get the constant error message "Failed to load plugin react: Cannot find module 'eslint-plugin-react'"

something somewhere is looking for that damn module, I just dont know what or where.

EDIT:
I found the cause of my problem.

• The vscode workspace I was using was located in my 'documents' folder.
• I also have visual studio installed and use it actively for other web development
• visual studio had created an .eslintrc file in my user folder (above my document folder)
• when eslint ran it was combining?|using the eslint file generated by visual studio which had references to the default eslint config and babeljs.

I moved my vscode workspace folder to the root of the C drive and made sure it contained an eslintrc file and victory! the Visual studio created eslintrc file was ignored and all worked as expected. trump this one up to me not knowing enough about my development environment.

[mattiaerre]

I managed to uninstall everything both locally and globally and reinstall everything both locally and globally again and finally it seems to work now; thanks.

it looks like it works if I have got "eslint-plugin-react" in "dependencies" in my package.json file

// cc @dbaeumer

[JeffJacobson]

I was having the same issue, with the same cause as @lukekentwell (i.e., unbeknownst to me there was a .eslintrc file in my %userprofile% folder).
@dbaeumer, I would suggest that you add this info to a FAQ or troubleshooting document. This problem seems like it would be very common for anyone that uses both Visual Studio and Visual Studio Code. I suspect many people may not bother to search the issues list on this GitHub project and will just assume your extension is defective, when in fact it is not.

[CrabDude]

_For posterity, since I spent a while figuring this out._

Globally installing plugins & configs referenced in the local .eslintrc eliminated the error, but was not a fix since global configs/plugins versions are project relative and would quickly go out of sync.

Solution: File > Open the directory containing the node_modules where eslint and the corresponding eslint-plugin-*/eslint-config-* were installed.

This behavior is incorrect for 2 reasons:

1. This is neither how eslint nor SublimeLinter-eslint work, as both properly traverse up the directory tree for the nearest local eslint and corresponding eslint-plugin-* & eslint-config-*.
2. For most editors, file-level functionality (vs "project"-level like builds) is not dependent on the directory currently open in the current editor. For example, in my case, installs are at project_root/web/node_modules, yet all of the following fail:
   
   
   
   1. Opening the file directly (i.e., code project_root/web/foo/bar.js)
   
   
   2. Or, at the project root (i.e., File > Open > "project_root", which contains project_root/web/node_modules)
   
   
   3. Open any non-project file directly
   
   

The current vscode-eslint functionality is disconcerting as I suspect it does not load the correct (most local in node_modules) configs/plugins, but instead always loads from directory_root_open_in_vscode/node_modules.

[dbaeumer]

@CrabDude I changed the module resolution lookup (see https://github.com/Microsoft/vscode-languageserver-node/issues/77) which now correctly loads the module looking up the parent chain as well.

However the problem that a 'eslint' installation must be complete in terms of the configuration you use remains since it is the same behavior with eslint on the command line. So if for example eslint is installed globally and used by the eslint extension then all plugins used must be installed globally as well.

[CrabDude]

However the problem that a 'eslint' installation must be complete in terms of the configuration you use remains since it is the same behavior with eslint on the command line.

@dbaeumer IIUYouC, yup. Agreed; It's my understanding that eslint install & eslint-plugin/config-* locations are coupled, and the fix you referenced will fix this by loading the nearest local install (which I believe is correct).

Resolution I believe should go something like:

$ code ./path/to/file/foo.js
=>

# pseudo-code bash/js
cd /absolute/path/to/file/

# load local config
eslint_config = eslint config nearest to /absolute/path/to/file/

# Only use local install if local config exists (local installs for a global config doesn't make sense)
eslint = eslint_config && `npm bin`/eslint

# Fall back to global config
eslint_config = eslint_config || global eslint config
if (!eslint_config) exit or use vscode-eslint built-in config(?)

# Fall back to global install
eslint = eslint || `npm bin -g`/eslint

# eslint should load eslint-config/plugin-* relative to itself

While, instead vscode-eslint currently does:

eslint = opened_folder ? opened_folder/node_modules/eslint : `npm bin -g`/eslint
if (!eslint) throw 'Failed to load eslint library'

EDIT: Minor edits above.

[bdinesh]

@JeffJacobson Thanks for the info. I was also facing this issue in vscode 1.4 and was very frustrated. Replaced the .eslintrc file in %userprofile% folder and the issue got resolved. I think vscode is using the .eslintrc file in %userprofile% folder instead of working directory. Please fix this.

[JeffJacobson]

@bdinesh, note that the %userprofile%/.eslintrc file will probably be recreated each time you start Visual Studio 2015. (At least that's what happens to me.) I'm not sure if its VS itself or one of the many extensions I have that's generating this file.

It's not a problem with this VS Code extension. The same thing happens if you run eslint from the command line with the VS generated .eslintrc in place.

eslint **/*.js

Oops! Something went wrong! :(                                                                                                                                                                   

ESLint couldn't find the plugin "eslint-plugin-react". This can happen for a couple different reasons:                                                                                           

1. If ESLint is installed globally, then make sure eslint-plugin-react is also installed globally. A globally-installed ESLint cannot find a locally-installed plugin.                           

2. 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-react@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.

[agjs]

I think many are experiencing this problem due to having .eslintrc.json file located even outside of the project directory.

I just realized that I had .eslintrc.json file inside my home directory and it applied its rules on all the folders and files including Desktop where I keep my projects. Make sure to look for any .eslintrc.json outside your project directory and remove it.

[dbaeumer]

The eslint extension itself uses ESLint default .eslintrc* lookup behavior which basically looks up the parent chain for that file. I didn't find a way to disable this expect pointing to an explicit configuration file which is possible today using the eslint.options setting.

[Kitanotori]

I have a project where on the root level I have my server code and the package.json containing the server dependencies. In a subdirectory I have the client code and the package.json containing the client dependencies. Both client and server have their own .eslintrc.json, and eslint as dev-dependency. Client also has dependency to eslint-plugin-react. If I open the root directory in vscode, I get the aforementioned error. If I move the client directory outside of the project, or if I open the client directory, I don't get the error.

I think @CrabDude explained the problem correctly, i.e. vscode-eslint loads plugins from wrong path. It should search for the plugins from the nearest node_modules to the .eslintrc.json, up all the way up to the global node_modules.

ps. Atom seems to handle ESLint plugin loading correctly.

[CrabDude]

Having now worked on https://github.com/eslint/eslint/pull/7177, I now know eslint's built-in plugin resolution works as follow:

1. Config.getConfig(filePath)
2. ConfigFile.load(nearestConfigFile)
3. resolve('eslint-plugin-react', configDir || projectDir || installDir)

So from an eslint perspective, it's odd that this bug exists because if filePath is being passed to eslint (via CLI or CLIEngine), the resolution should work automatically. After inspecting the fixes, it's apparent this issue exists b/c vscode-eslint implements its own package/module/node_modules/eslint-plugin-* resolution logic, which at first blush is concerning. However, I don't know the motivation for doing so; I suspect it's due to some VSCode plugin limitations or requirements (i.e., vscode-eslint does not have access to the whole filesystem, and instead must rely upon project / file contents).

[dbaeumer]

@CrabDude vscode-eslint doesn't implement its own resolution logic for eslint plugins. The only logic eslint has (through the language server) is to find the initial eslint npm module. This is basically done using node code (e.g. require.resolve('eslint')). Then I load this eslint npm module and from then on delegate all plugin loading to the eslint CLIEngine loaded from that package.

[Kitanotori]

@dbaeumer That exactly is the problem. If the initial module is in the root of the project, eslint plugins that are located in subdirectories are not being loaded. For Atom this is not an issue; therefore this is a bug in vscode-eslint.

[dbaeumer]

@Kitanotori interesting. Actually I delegate all the loading to the CLIEngine I get from ESLint. Assuming you have such a setup does eslint work from a terminal as expected (e.g. you call it from the sub directory).

When I experimented with ESLint I noticed that eslint and plugins need to be installed at the same level to make it work in a terminal. But may be something changed I need to catch up with.

[Kitanotori]

Weird.. It seems that the problem has gone away.

EDIT: Never mind, tested with a different project. I realized that the problem occurs if I don't have eslint installed at all in the root. If there is eslint at the root, the plugins from subdirectories seem to be loaded, but if there is no eslint at the root, eslint from subdirectories are not being loaded.

So, the problem is that vscode-eslint fails to load eslint if it is not in the root or global directory. It should be able to load eslint also from subdirectory. The plugin loading does not seem to be an issue if there is no eslint installed globally.

[dbaeumer]

The problem with eslint not loaded from a sub directory is know.

[thangchung]

Thanks to @JeffJacobson the problem actually was because we installed Eslint ext in VS code

[CharlBest]

I'm also getting "Failed to load plugin react: Cannot find module 'eslint-plugin-react'" with my Angular 2 project. I have the ESLint extension installed. Have never touched or done anything with React. Every time I enter a .js file I get the popup. Driving me crazy. Haha. Any help?

[sethreidnz]

@Charlkie14 The main cause I've noticed for this is having a global .eslinrc in your user directory. Once I deleted that it went away. Now that I think about it this seems like fair enough behavior. IF you have a global eslint that references some modules you should have then installed globally. Remove that .eslinrc from the user folder and it goes away.

[dbaeumer]

Alternatively you can disable ESLint via "eslint.enable": false in the workspace settings.

[CharlBest]

Thanks @justsayno and @dbaeumer for the advice and help. Much appreciated.

[nivesh2]

I too faced this issues few days back, and let me sum up the solutions, which I get from the above comments:

• Delete the global .eslintrc file present in your user directory, or
• install plugins globally, or
• last option disable ESLint via "eslint.enable": falsein settings.jsonfile and start using jshint extension

[JeffJacobson]

@nivesh2, you can also edit (rather than delete) the %userprofile%/.eslintrc file. This is what I ended up doing to prevent Visual Studio 2015 from regenerating the file.

{
    /* See all the pre-defined configs here: https://www.npmjs.com/package/eslint-config-defaults */

}

[nivesh2]

@JeffJacobson thanks, do you have any idea where the global .eslintrc file resides on Windows 10 system?

[sethreidnz]

@nivesh2 C:\Users{userName}.eslintrc for me

[nivesh2]

@justsayno nope, already looked on that path, nothing like .eslintrc there.

[sethreidnz]

Perhaps your error is for one of the other stated reasons above then? The absence of that file for me stopped the error completely.

[JeffJacobson]

@nivesh2 I don't have Windows 10, but in Windows 7 the path to the user profile folder is stored in the %userprofile% environment variable.

At the command prompt, try the following to change to that directory

cd %userprofile%

[nivesh2]

Okay, done that but could find the file, anyways, will look more into it. But for now, installing plugins globally helped me solve the issue. Thanks!

[sethreidnz]

Yeah this still happens regardless of the .eslint in the user directory. Just to clarify. It did go away for a while but I think ti was just because the project wasn't causing it. New project and its happening again.

[brnkrygs]

For me (windows 10), the issue turned out to be an .eslintrc file in my home directory (%userprofile%). As others have mentioned, it was likely due to Visual Studio 2015 putting the file there. That file had references to the react presets. This was an issue because my project's workspace was in a child directory under my user's home directory, so eslint's default config traversal picked it up. (http://eslint.org/docs/user-guide/configuring#using-configuration-files).

I'm using an .eslintrc.json file in my project root to configure eslint locally, so added "root": true, which tells eslint to ignore any inherited parent config files. By doing that, eslint stopped trying to load react presets and no more errors from the extension manager in VSCode.
http://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy

Plugin is working great now, thank you for your work on it @dbaeumer !

[dbaeumer]

Let me see if I can add tracing which .eslintrc file is taken into consideration. This at least will help people to understand what is going on.

[ghost]

I met this problem
But not find global .eslintrc file
@traktraktrugui use your solution solve the issue

[Serguzest]

Guys, don't forget adding "plugins": [ "react" ] to your .eslintrc.json

[dbaeumer]

Unfortunately ESLint doesn't offer any API to tell me which .eslintrc file is used (unstandable since it is a merge of many files). If this happens I now print the following to the output window instead of showing a flashing window message

[Warn  - 11:37:57 AM] Failed to load plugin eslint-react: Cannot find module 'eslint-plugin-eslint-react'
Happend while validating p:\mseng\VSCode\Playgrounds\linters\lib\test.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-eslint-react' is installed globally as well.
3. If ESLint is installed locally, then 'eslint-plugin-eslint-react' isn't installed correctly.

Fixed in the upcoming 1.1.0 release

[dbaeumer]

Polished the message a little

Failed to load plugin eslint-react: Cannot find module 'eslint-plugin-eslint-react'
Happend while validating p:\mseng\VSCode\Playgrounds\linters\lib\test.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-eslint-react' is installed globally as well.
3. If ESLint is installed locally, then 'eslint-plugin-eslint-react' isn't installed correctly.

Consider running eslint --debug p:\mseng\VSCode\Playgrounds\linters\lib\test.js from a terminal to obtain a trace about the configuration files used.

[PyroSA]

I made the mistake of installing the config, but not the plugin. Ran around for a while, but now it's working.

[magebarf]

It seems that running the command line just as written may not always give the information you're trying to get. I'm guessing due to wrong working directory etc.

Had a case with the same react-plugin that was present in a config file in the user's home directory but when looking at the --debug output it did not list that .eslintrc file at all. For some reason it was picked up when running from within VSCode. As I tried to help troubleshooting this remote, it all looked good when looking at the output from the command line invocation, but after reading a few comments here we figured out the additional config file in the home directory, which did not show up in the debug output.