Resolving the "Failed to Load Plugin" Error in ESLint

Learn how to troubleshoot plugin installation errors, configure your ESLint settings correctly, and ensure smooth JavaScript linting for better code quality.

Introduction

Unexpected STDERR output from ESLint: Oops! Something went wrong! :( ESLint: 8.7.0 Error: Failed to load plugin '@typescript-eslint' declared in '.eslintrc.js » @microsoft/eslint-config-spfx/lib/profiles/default': Cannot find module 'eslint'.

In this blog post, we will discuss Error : Error: Failed to load plugin.

Typically, this error occurs when ESLint fails to locate the required module, in this case, ‘eslint’ Package or a plugin like '@typescript-eslint'. The error message suggests that while ESLint is trying to load your projects '.eslintrc.js’ configuration file, it can not find the necessary dependencies, such as ‘eslint’ or '@typescript-eslint'.

Let's understand the error

• Module Not Found Error: Cannot find module 'eslint' indicates that 'eslint' package or ( or dependencies or package related to 'eslint' package like '@typescript-eslint' ) is not installed or not referenced in your project.
• Plugin Declaration: there is a file called (.eslintrc.js) where all plugins and modules are listed, and this error occurs because the ESLint configuration (.eslintrc.js) is declaring a plugin (@typescript-eslint) that ESLint can't find.
• Missing Installation: it can happen that the required package is not installed.
• Incorrect path: sometimes it can happen that the required configuration file is located on another or wrong path.
• Outdated Packages: Sometimes it happens due to the incompatible version of ESLint and its plugins.

So how do we resolve this problem?

1. Ensure Dependencies are Installed: to install dependencies run the command given below.

   npm install eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser
   

2. Check .eslintrc.js Configuration: check that your “ (.eslintrc.js) ” file is properly configured as given below.

   require('@rushstack/eslint-config/patch/modern-module-resolution');
   
   module.exports = {
     extends: ['@microsoft/eslint-config-spfx/lib/profiles/default'],
     parserOptions: { tsconfigRootDir: __dirname },
     overrides: [
       {
         files: ['*.ts', '*.tsx'],
         parser: '@typescript-eslint/parser',
         parserOptions: {
           project: './tsconfig.json',
           ecmaVersion: 2018,
           sourceType: 'module',
         },
         rules: {
           // Prevent usage of the JavaScript null value, while allowing code to access existing APIs that may require null. 
           // https://www.npmjs.com/package/@rushstack/eslint-plugin
           '@rushstack/no-new-null': 1,
   
           // your custom rules
         },
       },
     ],
   };

3. Reinstall Node modules: If the above solutions do not work, then delete the Node modules directory from your project and reinstall it again.

   rm -rf node_modules
   npm install
   

4. Ensure Correct Version: Sometimes, there is a specific version of the plugin, or ESLint may have compatibility issues. So, ensure that your package versions are compatible.

   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.6.0",
     "@typescript-eslint/parser": "^5.6.0",
     "eslint": "^7.32.0"
   }

5. Update ESLint and Plugins: If your package versions are not compatible, then you can update them by running the command given below.

   npm update eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser
   

6. Check for Global ESLint Installation: check that you are not mixing global and local ESLint installation.
7. It would be great to use ESLint locally for your project. So remove the global level ESLint package by running the command given below.

   npm uninstall -g eslint

Conclusion

In this blog post, we have seen that when we face an Error and cannot find module 'eslint' this type of error we have discussed how we can solve it in different ways.