eslint should be listed in the project's dependencies, not devDependencies – Javascript

Photo of author
Written By M Ibrahim
enzyme mocha.js node.js tdd

Quick Fix: In the .eslintrc file, update the import/no-extraneous-dependencies rule with the devDependencies: true option to exclude test dependencies from dependency checks.

The Problem:

The ESLint plugin import/no-extraneous-dependencies is flagging test dependencies as extraneous, even though they are correctly listed in the project’s devDependencies. This is causing confusion and potentially leading to incorrect project configurations. Why is ESLint identifying test dependencies as extraneous when they are properly specified in devDependencies?

The Solutions:

Solution 1: Adding Exceptions Through .eslintrc File

To resolve the issue where ESLint is reporting that certain test dependencies should be listed in the project’s `dependencies` instead of `devDependencies`, you can add the following line to your `.eslintrc` file:

"import/no-extraneous-dependencies": ["error", {"devDependencies": true}]

This will configure ESLint to ignore dependencies that are specified in the `devDependencies` section of your `package.json` file.

This solution allows you to keep the test dependencies in the `devDependencies` section, while still receiving warnings for any other dependencies that are not properly specified.

Solution 4: Fix eslint error by adding missing packages to plugins

To fix the error, you need to add the missing packages to your plugins directory in .eslintrc.

For example, if the missing packages are Typescript and Storybook, you would add the following to your .eslintrc file:

{
  "plugins": [
    "typescript",
    "storybook"
  ]
}

After adding the missing packages to your plugins directory, the error should disappear.

For more information on how to fix this error, please refer to the following Stack Overflow post: https://stackoverflow.com/questions/70585870/eslint-error-storybook-react-should-be-listed-in-the-projects-dependencies/70585871#70585871.

Solution 5: Disable the Rule

If you are certain that the rule is incorrect in your specific case, you can disable it by adding the following to your .eslintrc file:

"import/no-extraneous-dependencies": "off"

This will turn off the rule for your entire project.