eslint 'html-webpack-plugin' 应该列在项目的依赖中，而不是 devDependencies 中。 （导入/无外部依赖项）

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

Answer 2

In your .eslintrc.json include webpack.config.js in devDependencies :

"rules": {
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": [
          "**/*.test.ts?(x)",
          "**/*.spec.ts?(x)",
          "**/test-utils.ts",
          "webpack.config.js"
        ]
      }
    ],

Answer 3

Add "type": "module" to your package.json , then you can use ES6 import without this error/warning.