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

Javascriptnode.jsTddmocha.jsEnzyme

Javascript Problem Overview


Either I don't understand dependencies vs. devDependencies in node 100% yet or eslint is just wrong here (not capable of analyzing this correctly):

   3:1   error  'chai' should be listed in the project's dependencies, not devDependencies              import/no-extraneous-dependencies
   4:1   error  'chai-enzyme' should be listed in the project's dependencies, not devDependencies       import/no-extraneous-dependencies
   5:1   error  'enzyme' should be listed in the project's dependencies, not devDependencies            import/no-extraneous-dependencies
   7:1   error  'sinon' should be listed in the project's dependencies, not devDependencies             import/no-extraneous-dependencies
   9:1   error  'redux-mock-store' should be listed in the project's dependencies, not devDependencies  import/no-extraneous-dependencies

These are test dependencies, so why is it saying that they should be listed in dependencies?

Additional note: We're using Travis as our CI so I don't know if it makes a difference for that at all either.

Javascript Solutions


Solution 1 - Javascript

Solved it with adding this to my .eslintrc:

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

[no-extraneous-dependencies] Add exceptions? #422

Based on this user's reply:

> you could set the option devDependencies: true in an .eslintrc in your > test folder: > > rules: import/no-extraneous-dependencies: [error, { devDependencies: > true }] Then you'll get reports of any packages referenced that are > not included dependencies or devDependencies. Then you get the > goodness of the rule, with no noise from the disable comments. > > I think that might work for you? This is how I would use the rule, in > your case, since you have your test code separated into a test > directory.

Also this post was helpful to confirm I wasn't insane to not want some of these in my dependencies list: Sharable ESLint Config

Solution 2 - Javascript

If you want to allow imports of devDependencies in test files only you can use an array of globs, as the documentation of no-extraneous-dependencies states:

> When using an array of globs, the setting will be set to true (no errors reported) if the name of the file being linted matches a single glob in the array, and false otherwise.

The following setting will disable the lint for test files only.

"import/no-extraneous-dependencies": ["error", {"devDependencies": ["**/*.test.ts", "**/*.test.tsx"]}]

That way imports from devDependencies are still reported as errors.

Solution 3 - Javascript

I was able to solve it by adding the missing packages (in my case, Typescript and Storybook) to my plugins directory in .eslintrc.

I give the specifics in this post: https://stackoverflow.com/questions/70585870/eslint-error-storybook-react-should-be-listed-in-the-projects-dependencies/70585871#70585871

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPositiveGuyView Question on Stackoverflow
Solution 1 - JavascriptPositiveGuyView Answer on Stackoverflow
Solution 2 - Javascriptmagic_alView Answer on Stackoverflow
Solution 3 - JavascriptIanView Answer on Stackoverflow