Eslint no-extraneous-dependencies error with npm workspaces

user_773885 0
Viewed 838

I've set up my monorepo using NPM workspaces with the following high-level structure:

root
  common      // Shared package, named @company/common
    src
      ...
    package.json
    tsconfig.json
  web         // ReactJS package, named @company/web
    config
      ...
    public
      ...
    src
      ...
    package.json
    tsconfig.json
  mobile      // React Native package, named @company/mobile
    ...
    package.json
    tsconfig.json
  .eslintrc.json
  .prettierrc
  package.json
  tsconfig.json
  tsconfig.base.json

All my packages are meant to be private and have been marked as such in their respective package.json files.

I've successfully managed to set everything up such that I can write code like this in the web and mobile workspaces:

import { ITestInterface } from '@company/common';

With my current setup, I get an eslint warning in my IDE (VS Code) whenever I open any file that imports anything from @company/common: '@company/common' should be listed in the project's dependencies. Run 'npm i -S @company/common' to add it

I'd rather not disable this warning entirely if at all possible. Is there a way to configure eslint to have it understand monorepos so that it does not give me a warning when I try to import something from a package (workspace) within my monorepo?

npm-workspaces monorepo eslint
1 Answers

Maybe moving the .eslintrc.json to each individual package? Have you tried to run npm install again in the root?

My setup is like this and I don't have this issue.

root
  back-end
    src/
    .eslintrc.js
    tsconfig.json
    tsconfig.ref.json
    package.json
  front-end
    src/
    .eslintrc.js
    tsconfig.json
    tsconfig.ref.json
    package.json
  shared
    // some .ts files
    package.json
package.json
tsconfig.json

If you wonder about tsconfig.ref.json, here is an example how to set it up: https://2ality.com/2021/07/simple-monorepos.html

user_176229550
Related