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
    }
  }
}

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
    }
  }
}

• javascript
• node.js
• webpack
• node-modules
• commonjs

3 Answers 3

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

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"
        ]
      }
    ],

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