How to solve ESLint error `package should be listed in dependencies, not devDependencies`

user_15609577 0
Viewed 91

I'm trying to lint my React+Typescript project properly (with ESLint). I have a component in which i'm importing useParams hook from react-router.

import { useParams } from 'react-router';

ESLint is giving me error on that line

ESLint: '@types/react-router' should be listed in the project's dependencies, not devDependencies.(import/no-extraneous-dependencies)

As i guess @types/react-router is not needed in resulting build, because browsers don't understand TypeScript. So i have 2 questions here:

  • why rule says @types/react-router should be listed in dependencies and not in devDependencies?
  • should i indeed move @types/react-router to dependencies?
  • Can i just disable that rule? If so, how can i understand when i can disable ESLint rules and when i should resolve ESLint error?

Thank you!

eslint typescript reactjs
1 Answers

A dependency is a library that a project needs to function effectively. DevDependencies are the packages a developer needs during development.

react-router will be used in your app and not as a dev dependency so try to install it with

npm install react-router --save
//OR
yarn install react-router --save

instead of

npm install react-router --save -dev
user_147441730
Related