Eslint-plugin-import: `no-extraneous-dependencies` only when webpack config is named `webpack.dev.js` or `webpack.prod.js`

[oze4]

I have a feeling this might be an easy issue, but I haven't found anything about this specific issue online, so I figured I would open an issue here as a last resort.

The _only_ time I get the import/no-extraneous-dependencies error is when my webpack config file is named either webpack.dev.js or webpack.prod.js - if it is named webpack.config.js, the error immediately goes away.

What am I doing wrong here?

[ljharb]

I'm assuming you're using the airbnb config, which has explicit exceptions for those files. If you use different names, you'll have to inline that entire rule's config in order to add those names to your exceptions list.

Alternatively/better, you could use eslint's "overrides" to set devDeps to true just for those two files.

[oze4]

@ljharb I cannot thank you enough for your quick response. I apologize, I should have mentioned the airbnb config, thankfully you're a genius :)

Modifying .eslintrc to the following resolved this issue:

  "overrides": [
    {
      "files": ["webpack.dev.js", "webpack.prod.js"],
      "rules": {
        "import/no-extraneous-dependencies": { "devDependencies": true }
      }
    }
  ],

Which is confusing to me, because this also works:

  "overrides": [
    {
      "files": [],
      "rules": {
        "import/no-extraneous-dependencies": { "devDependencies": true }
      }
    }
  ],

Is that what you meant for me to do? Is that the correct thing to do here?

If I understand this correctly, I wouldn't just use a rule for this because I would then have to inline everything else defined for that rule per airbnb (from the link you provided):

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

[oze4]

@ljharb after playing with it for a bit, and reading more about it, I believe this is what you meant for me to do... this makes much more sense to me now. If you couldn't tell (lol) I'm new with customizing my own tooling vs using pre-canned stuff...

I seriously cannot thank you enough. You are awesome!

  "overrides": [
    {
      "files": ["webpack.dev.js", "webpack.prod.js"],
      "rules": {
        "import/no-extraneous-dependencies": ["error", {
          "devDependencies": [
            "webpack.dev.js", 
            "webpack.prod.js"
          ]
        }]
      }
    }
  ],

[ljharb]

Exactly that, yes. Glad you figured it out :-)