Failed to load plugin '@typescript-eslint'
  • 08-May-2023
Lightrun Team
Author Lightrun Team
Share
Failed to load plugin '@typescript-eslint'

Failed to load plugin ‘@typescript-eslint’ declared in ‘.eslintrc » eslint-config-react-app#overrides[0]’: Cannot find module ‘typescript’

Lightrun Team
Lightrun Team
08-May-2023

Explanation of the problem

When attempting to run the eslint: lint whole folder task, the user encounters an error. After attempting to recover dependencies and searching for relevant terms in the user guide, it becomes clear that the issue lies with ESLint itself. The user’s environment information indicates that they are running the current version of Create-React-App (3.4.1) on Windows 10 (10.0.18363). Additionally, their npmPackages include React and React-DOM versions 16.13.1, and their ESLint configuration file specifies that they are extending the “react-app”, “airbnb”, and “prettier” presets.

{
  "extends": [
    "react-app",
    "airbnb",
    "prettier"
  ],
  "env": {
    "mocha": true,
    "es6": true,
    "commonjs": true,
    "browser": true
  },
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "modules": true,
      "experimentalObjectRestSpread": true
    }
  },
  "plugins": [
    "prettier"
  ],
  "rules": {
    "no-underscore-dangle": "off",
    "class-methods-use-this": "off",
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": true
      }
    ]
  }
}

The expected behavior is for the ESLint task to run without throwing any exceptions. However, the actual behavior is that the task throws an exception. A reproducible demo is not provided, so it’s unclear exactly what the exception is or what triggers it. However, based on the user’s investigation so far, the issue is likely to be related to ESLint itself rather than the user’s configuration or environment. Further debugging or support from the ESLint community may be necessary to identify and resolve the issue.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

  • Instantly add logs to, set metrics in, and take snapshots of live applications
  • Insights delivered straight to your IDE or CLI
  • Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for Failed to load plugin ‘@typescript-eslint’ declared in ‘.eslintrc » eslint-config-react-app#overrides[0]’: Cannot find module ‘typescript’

When running the ESLint tool, it is possible to encounter errors due to it trying to lint certain files or folders that are not relevant to the project. In this situation, a solution is to use a .eslintignore file. This file can contain the names of files, directories, or glob patterns that should be excluded from the linting process. One possible cause of this issue is when ESLint tries to lint the node_modules directory, which can be resolved by adding node_modules to the .eslintignore file.

Another possible solution is to change the script that is run with ESLint. By default, running eslint . will lint all files in the current directory and its subdirectories. However, specifying a different directory or file pattern can help to avoid linting irrelevant files. In the second answer, the user changed the script from eslint . to eslint ./src, which made it work without encountering any issues. This approach can be useful when the project has a specific file or folder structure that needs to be taken into account.

In summary, it is possible to encounter errors when using ESLint due to it trying to lint files or directories that are not relevant to the project. Two possible solutions are to use a .eslintignore file to exclude certain files or directories, or to change the script that is run with ESLint to avoid linting irrelevant files. By using these approaches, it is possible to ensure that ESLint is only applied to the relevant parts of the project, which can help to improve its accuracy and efficiency.

Other popular problems with Facebook Create React App

Problem: npm audit warnings in react-scripts

When running npm audit, warnings may be generated regarding potential vulnerabilities in react-scripts, which is a build tool used in Facebook Create React App.

Solution:

The warnings generated by npm audit in this case can be resolved by moving the “react-scripts” dependency from the “dependencies” section to the “devDependencies” section in the package.json file, and then running npm audit --production instead of npm audit.

Problem: Inconsistent behavior between development and production environments

Facebook Create React App projects may encounter inconsistencies between the development and production environments, which can lead to unexpected behavior and errors.

Solution:

To resolve this issue, it is recommended to properly configure the development and production environments, and to test the application in both environments before deployment. The use of environment variables and the implementation of proper testing strategies can also help ensure consistent behavior between the development and production environments.

Problem: Slow build times

Build times for Facebook Create React App projects can become slow, which can negatively impact the development workflow and productivity.

Solution:

To resolve slow build times, various techniques can be employed, including optimizing the code, reducing the size of the asset files, and utilizing build caching. Additionally, updating the hardware and software to meet the recommended system requirements can also help improve build performance.

A brief introduction to Facebook Create React App

Facebook Create React App (CRA) is a build tool for React applications that abstracts away the complex configuration needed to build and run a React app. This enables developers to focus on writing code, while CRA takes care of the tooling and build process. CRA uses a default set of configurations that are optimized for modern React development, allowing developers to get up and running quickly without having to worry about managing the underlying build tooling.

CRA uses a monorepo structure, which is a single repository that contains all the code for a project. This enables developers to manage all their dependencies, libraries, and other resources in a single place, making it easier to maintain and scale their applications. Additionally, CRA uses a set of well-established tools and technologies, including Babel, Webpack, Jest, and ESLint, to provide a comprehensive and consistent development environment that is easy to use and maintain. With CRA, developers can focus on writing code, while the build tooling takes care of the rest, making it a popular choice for building high-quality React applications.

Most popular use cases for Facebook Create React App

  1. Creating and Developing React Applications Facebook Create React App (CRA) is a popular JavaScript-based development toolkit used for building and developing React applications. It provides a quick and easy setup process for developing and running a React project, allowing developers to focus on writing code and building their applications, without the need to worry about setting up and configuring the development environment.
  2. Automated Build and Development Process With Facebook CRA, the entire build and development process is automated, meaning that developers don’t need to worry about manual configuration of build tools and processes. CRA provides a command-line interface that simplifies the process of starting a new React project, as well as running and building the project.

Example Code Block:

npx create-react-app my-app
cd my-app
npm start

In the above code block, the first line creates a new React application using Facebook CRA, the second line changes the current directory to the newly created project folder, and the third line starts the development server.

  1. Access to Common Features and Utilities CRA provides a wide range of built-in features and utilities that make it easier for developers to focus on developing their applications. These features include:
  • A development server for running the application during development
  • A production-ready build process for creating a production-ready version of the application
  • Access to a range of common development tools and libraries, including React, React-DOM, and Babel.
  • Support for styling with CSS and preprocessors such as Sass and Less.
  • Integration with popular testing frameworks, such as Jest and Enzyme
Share

It’s Really not that Complicated.

You can actually understand what’s going on inside your live applications.

Try Lightrun’s Playground

Lets Talk!

Looking for more information about Lightrun and debugging?
We’d love to hear from you!
Drop us a line and we’ll get back to you shortly.

By clicking Submit I agree to Lightrun’s Terms of Use.
Processing will be done in accordance to Lightrun’s Privacy Policy.