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

Question

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.

PositiveGuy · Accepted Answer · 2017-07-06T04:12:57.433

185

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

edited Jul 06 '17 at 04:12

answered Jul 06 '17 at 04:01

PositiveGuy

17,621
26
79
138

3

Make sure to restart your node.js server with CTRL-C and a `npm start` it for this to catch on – etayluz Jul 24 '18 at 17:47
3

Have a look at my answer if you want to disable the lint only for certain files (i.e. tests). – magic_al Apr 28 '19 at 11:19
3

This could lead to missing dependencies when running in non-development mode. I think @magic_al answer is a better alternative. – Gon Jun 24 '19 at 17:45
2

the answer of @magic_al is better as it keeps the eslint config in a single place - easier to comprehend and maintain. – Jacek J Sep 28 '21 at 12:38

magic_al · Answer 2 · 2023-03-11T23:43:31.717

118

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.

edited Mar 11 '23 at 23:43

answered Apr 26 '19 at 08:40

magic_al

1,930
1
18
26

Anyone have a clue why adding that yields, ```Unexpected top-level property "import/no-extraneous-dependencies"``` in VScode... While the reported error is ```'yaml' should be listed in the project's dependencies, not devDependencies. eslint(import/no-extraneous-dependencies)``` – Marvin Feb 07 '20 at 17:46
@Marvin do you have that as a property of the `rules` object in your eslint file? – David Gilbertson Feb 26 '20 at 22:32
@DavidGilbertson Hmm. I thought I had, but trying to add it right now, it works fine. Thanks. – Marvin Feb 27 '20 at 16:37

score 6 · Answer 3 · answered Aug 12 '22 at 05:11

6

I fixed it by using

 'import/no-extraneous-dependencies': [
      'error',
      {
        projectDependencies: false,
      },
    ],

answered Aug 12 '22 at 05:11

Rajesh N

6,198
2
47
58

1

Gives me error: `Value {"projectDependencies":false} should NOT have additional properties.` – pmiranda Nov 18 '22 at 13:15

score 5 · Answer 4 · answered Mar 01 '23 at 18:16

5

By me It was fixed by adding this:

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

answered Mar 01 '23 at 18:16

MoNajar

94
1
2

score 3 · Answer 5 · answered Jan 04 '22 at 22:43

3

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: ESLint error: '@storybook/react' should be listed in the project's dependencies, not devDependencies

answered Jan 04 '22 at 22:43

Ian

1,746
1
15
28

In another case, I had 'react' in node_modules but it wasn't finding it for some reason so I deleted node_modules and reinstalled of them with `yarn` and that solved it. – Ian Feb 07 '23 at 04:10

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

5 Answers5

Linked