eslint 'html-webpack-plugin' should be listed in the project's dependencies, not devDependencies. (import/no-extraneous-dependencies)

Question

In my Vs code editor, i am getting following error in simple require statement like:

const HtmlWebpackPlugin = require('html-webpack-plugin')

Error: [eslint] 'html-webpack-plugin' should be listed in the project's dependencies, not devDependencies. (import/no-extraneous-dependencies)

Can anyone explain what is no-extraneous-dependencies and why it is giving me this error in simple require statement in my webpack config. I went through this link : eslint should be listed in the project's dependencies, not devDependencies but it was not much helpful as it did not explain why i am adding that line.

My eslintrc.json file:

{
  "env": {
    "browser": true,
    "es6": true,
    "commonjs": true,
    "node": true
  },
  "extends": ["airbnb", "prettier", "prettier/react"],
  "plugins": ["prettier"],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

Answer 1

You just need to tell eslint that it's ok to require dev dependency in webpack.

You can create .eslintrc in your webpack folder with

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

This will prevent the error from appearing.

Alternatively you can just set

const HtmlWebpackPlugin = require('html-webpack-plugin'); // eslint-disable-line import/no-extraneous-dependencies

to disable only this line