Eslint-plugin-react was not loaded as a node module from the directory

[nilamsavani]

Hi @sudo-suhas ,

Thank you for creating such a great example. I am new to eslint and trying to lint my code using lint-staged package with pre-commit hook. Frontend project is react+ typescript, common is nodejs project and backend is NestJS project. My project structure is as below:

|-- .gitignore
|-- package.json
|-- frontend
|   |- .eslintrc.yml
|   |- .package.json
|   |   |-- src
|   |   |   --app.tsx
|   |   |   --index.ts
|-- backend
|   |- .eslintrc.yml
|   |- .package.json
|   |   |-- src
|   |   |   --app.tsx
|   |   |   --index.ts
|-- common
|   |- .eslintrc.yml
|   |- .package.json
|   |   |-- src
|   |   |   --app.tsx
|   |   |   --index.ts

My root package.json is as below:

"devDependencies": {
    "eslint": "~6.6.0",
    "husky": "~3.0.7",
    "lint-staged": "~9.4.0"
 },
"husky": {
    "hooks": {
      "pre-commit": "lint-staged",
    }
  },
  "lint-staged": {
    "common/**/*.{ts,tsx}": [
      "eslint --fix",
      "git add"
    ],
    "backend/**/*.{ts,tsx}": [
      "eslint --fix",
      "git add"
    ],
    "frontend/**/*.{ts,tsx}": [
      "eslint --fix",
      "git add"
    ]
  }

But, when I try to commit my staged files having linter errors, I am getting an error as below:

husky > pre-commit (node v12.18.0)
  ↓ Stashing changes... [skipped]
    → No partially staged files found...
  ❯ Running tasks...
    ↓ Running tasks for common/**/*.{ts,tsx} [skipped]
      → No staged files match common/**/*.{ts,tsx}
    ↓ Running tasks for backend/**/*.{ts,tsx} [skipped]
      → No staged files match server/**/*.{ts,tsx}
    ❯ Running tasks for frontend/**/*.{ts,tsx}
      ✖ eslint --fix
        git add

✖ eslint --fix found some errors. Please fix them and try committing again.

Oops! Something went wrong! :(

ESLint: 6.6.0.

ESLint couldn't find the plugin "eslint-plugin-react".

(The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "/Projects/demoproject.)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

npm install eslint-plugin-react@latest --save-dev

The plugin "eslint-plugin-react" was referenced from the config file in "frontend/.eslintrc.js".

If you still can't figure out the problem, please stop by https://gitter.im/eslint/eslint to chat with the team.
husky > pre-commit hook failed (add --no-verify to bypass)

What am I doing wrong here?

[sudo-suhas]

The linter eslint is installed at the root but the plugins are not. Run npm install eslint-plugin-react@latest --save-dev as suggested in the error message.

[nilamsavani]

So, do I have to install all the plugins that I am using in any of sub project at root level as well?

[sudo-suhas]

Yes.