Search code examples
reactjswebpackelectronbabeljseslint

Why am I getting "Definition for rule 'import/no-extraneous-dependencies' was not found" when running ESLint?


I'm working on an Electron app with React and I'm using Typescript, Webpack, Babel and ESLint. And for some reason I get in my main.js file, which is my bundled file, the following line:

try {
    // Optional dependency (as in, doesn't need to be installed, NOT like optionalDependencies in package.json)
    // eslint-disable-next-line import/no-extraneous-dependencies
    const supportsColor = __webpack_require__(/*! supports-color */ "./node_modules/supports-color/index.js");

    if (supportsColor && (supportsColor.stderr || supportsColor).level >= 2) {
        exports.colors = [

Which triggers the following error when I run npm run lint:

> biomech@1.0.0 lint
> eslint .


/Users/lucas_sg/Documents/pf-biomech/dist/main.js
  2946:2  error  Definition for rule 'import/no-extraneous-dependencies' was not found  import/no-extraneous-dependencies

✖ 1 problem (1 error, 0 warnings)

npm ERR! code 1
npm ERR! path /Users/lucas_sg/Documents/pf-biomech
npm ERR! command failed
npm ERR! command sh -c eslint .

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/lucas_sg/.npm/_logs/2021-01-29T22_56_39_247Z-debug.log

And when I check out the log I don't feel like I know more about how to debug the error:

0 verbose cli [
0 verbose cli   '/usr/local/Cellar/node/15.6.0/bin/node',
0 verbose cli   '/usr/local/bin/npm',
0 verbose cli   'run',
0 verbose cli   'lint'
0 verbose cli ]
1 info using npm@7.4.0
2 info using node@v15.6.0
3 timing config:load:defaults Completed in 2ms
4 timing config:load:file:/usr/local/lib/node_modules/npm/npmrc Completed in 1ms
5 timing config:load:builtin Completed in 1ms
6 timing config:load:cli Completed in 2ms
7 timing config:load:env Completed in 0ms
8 timing config:load:file:/Users/lucas_sg/Documents/pf-biomech/.npmrc Completed in 0ms
9 timing config:load:project Completed in 1ms
10 timing config:load:file:/Users/lucas_sg/.npmrc Completed in 0ms
11 timing config:load:user Completed in 0ms
12 timing config:load:file:/usr/local/etc/npmrc Completed in 0ms
13 timing config:load:global Completed in 0ms
14 timing config:load:cafile Completed in 0ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:setUserAgent Completed in 0ms
17 timing config:load:setEnvs Completed in 1ms
18 timing config:load Completed in 8ms
19 verbose npm-session 3273db6630b48789
20 timing npm:load Completed in 16ms
21 timing command:run-script Completed in 1117ms
22 verbose stack Error: command failed
22 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/@npmcli/promise-spawn/index.js:64:27)
22 verbose stack     at ChildProcess.emit (node:events:379:20)
22 verbose stack     at maybeClose (node:internal/child_process:1065:16)
22 verbose stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:296:5)
23 verbose pkgid biomech@1.0.0
24 verbose cwd /Users/lucas_sg/Documents/pf-biomech
25 verbose Darwin 20.2.0
26 verbose argv "/usr/local/Cellar/node/15.6.0/bin/node" "/usr/local/bin/npm" "run" "lint"
27 verbose node v15.6.0
28 verbose npm  v7.4.0
29 error code 1
30 error path /Users/lucas_sg/Documents/pf-biomech
31 error command failed
32 error command sh -c eslint .
33 verbose exit 1

My .eslintrc file is:

{
    "parserOptions": {
        "ecmaVersion": 7,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    }
}

And my package.json in case it's useful:

{
  "name": "Electron app",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/main.js",
  "preload": "./dist/preload.js",
  "scripts": {
    "dev": "concurrently --success first \"npm run dev:electron\" \"npm run dev:react\" -k",
    "dev:electron": "NODE_ENV=development webpack --config webpack.electron.config.js --mode development && electron .",
    "dev:react": "NODE_ENV=development webpack serve --config webpack.react.config.js --mode development",
    "build:electron": "NODE_ENV=production webpack --config webpack.electron.config.js --mode production",
    "build:react": "NODE_ENV=production webpack --config webpack.react.config.js --mode production",
    "build": "npm run build:electron && npm run build:react",
    "pack": "electron-builder --dir",
    "dist": "electron-builder",
    "lint": "eslint .",
    "format": "prettier --write \"**/*.+(js|jsx|json|yml|yaml|css|md|vue)\""
  },
  "keywords": [],
  "license": "MIT",
  "build": {
    "files": [
      "dist/",
      "node_modules/",
      "package.json"
    ],
    "productName": "Biomech",
    "appId": "com.example.app",
    "directories": {
      "output": "dist"
    }
  },
  "devDependencies": {
    "@babel/preset-env": "^7.9.5",
    "@babel/preset-react": "^7.9.4",
    "@babel/preset-typescript": "^7.9.0",
    "@types/electron-devtools-installer": "^2.2.0",
    "@types/react-router-dom": "^5.1.7",
    "@types/regenerator-runtime": "^0.13.0",
    "dpdm": "^3.6.0",
    "electron": "^11.2.1",
    "electron-builder": "^22.7.0",
    "electron-devtools-installer": "^3.1.1",
    "eslint": "^7.18.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^4.5.1",
    "husky": "^4.3.8",
    "lint-staged": "^10.5.3",
    "prettier": "^2.2.1",
    "react-router-dom": "^5.2.0",
    "webpack": "^5.11.1",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.1"
  },
  "dependencies": {
    "@babel/core": "^7.12.10",
    "@popperjs/core": "^2.6.0",
    "@types/node": "^14.14.22",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "axios": "^0.21.1",
    "babel-loader": "^8.2.2",
    "bootstrap": "^4.5.3",
    "chokidar": "^3.5.1",
    "core-js": "^3.8.3",
    "css-loader": "^5.0.1",
    "electron-fetch": "^1.7.3",
    "fsevents": "^2.3.1",
    "ini": "^2.0.0",
    "jquery": "^3.5.1",
    "react": "^17.0.1",
    "react-bootstrap": "^1.4.0",
    "react-dom": "^17.0.1",
    "react-google-login": "^5.2.2",
    "style-loader": "^2.0.0"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint && npm run format"
    }
  },
  "lint-staged": {
    "*.+(js|jsx)": "eslint --fix",
    "*.+(json|css|md)": "prettier --write"
  }
}

I don't know where the eslint-disable-next-line import/no-extraneous-dependencies line is coming from. If it's from Webpack, or Babel, or something else. But I don't think I actually need it since I never even typed a rule regarding extraneous dependencies. I tried adding an empty rule to the .eslintrc just so that it would at least make sense but I couldn't find anything regarding no-extraneous-dependencies in the ESLint docs, so I could never add it.


Solution

  • The eslint . command will run the linting on all the files including the bundled scripts files too. You should add .eslintignore file and ignore the files on which you wish to run the lint.

    In your case ignore add **/*.js to tell eslint ignore linting .js files.