12

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
    }
  }
}
rosnk
  • 1,068
  • 1
  • 14
  • 36

3 Answers3

16

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

Vitaly Migunov
  • 4,297
  • 2
  • 19
  • 23
3

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"
        ]
      }
    ],
Denis
  • 31
  • 2
-1

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

NeoZoom.lua
  • 2,269
  • 4
  • 30
  • 64