eslint fails with Cannot read config file: /some/path/node_modules/@typescript-eslint/eslint-plugin/dist/configs/eslint-recommended

Question

I am following the instructions to setup ESLint from here.

ESLint fails with the following message:

$ npm run lint

> [email protected] lint /some/path/sscce-typescript-react-eslint
> eslint '*/**/*.{js,ts,tsx}' --quiet --fix

Error: Cannot read config file: /some/path/sscce-typescript-react- 
eslint/node_modules/@typescript-eslint/eslint-plugin/dist/configs/eslint-recommended
Error: ENOENT: no such file or directory, open '/some/path/sscce-typescript-react- 
eslint/node_modules/@typescript-eslint/eslint-plugin/dist/configs/eslint-recommended'
Referenced from: /some/path/sscce-typescript-react-eslint/node_modules/@typescript- 
eslint/eslint-plugin/dist/index.js
Referenced from: /some/path/sscce-typescript-react-eslint/.eslintrc.js

A file with the following name does exist:

/some/path/sscce-typescript-react-eslint/node_modules/@typescript-eslint/eslint-plugin/dist/configs/eslint-recommended.js

... but apparently ESLint is not anticipating the *.js extension and cannot find the file.

Shortest self-contained concrete example is found in this github repo.

For completeness purposes on this site, my package.json is:

{
  "name": "IACS",
  "version": "1.0.0",
  "description": "react, typescript",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --hot --inline --devtool source-map --progress --colors  --port 8090",
    "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/plugin-proposal-class-properties": "^7.8.7",
    "@babel/plugin-transform-async-to-generator": "^7.8.7",
    "@babel/preset-env": "^7.8.7",
    "@babel/preset-react": "^7.8.7",
    "@babel/register": "^7.8.7",
    "@babel/runtime": "^7.8.7",
    "@types/jquery": "^3.5.1",
    "@types/react": "^16.9.40",
    "@types/react-dom": "^16.9.8",
    "@typescript-eslint/eslint-plugin": "^3.7.1",
    "@typescript-eslint/parser": "^3.7.1",
    "babel-loader": "^8.0.5",
    "cross-env": "^5.2.0",
    "css-loader": "^2.1.0",
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.15.0",
    "eslint-plugin-jsx-a11y": "^6.2.0",
    "eslint-plugin-react": "^7.20.5",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "null-loader": "^0.1.1",
    "react-hot-loader": "^4.6.3",
    "ts-loader": "^7.0.5",
    "typescript": "^3.9.5",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.3.*",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {
    "@babel/polyfill": "^7.8.7",
    "jquery": "^3.5.1",
    "react": "^16.8.0",
    "react-dom": "^16.9.8"
  }
}

and my .eslintrc.js is:

module.exports = {
    parser: "@typescript-eslint/parser",
    "plugins": ["@typescript-eslint"],
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true
    }
  },
  settings: {
    react: {
      version: "detect"
    }
  },
  extends: [
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  rules: {
      "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"]
  },
};

Answer 1

I had the same problem recently under windows and updating the eslint dependency in package.json to

"eslint": "^7.6.0"

solved the issue. I hope this is a viable solution for you too.

Answer 2

In my case the issue was that I recently updated the version of eslint and VSCode was still attempting to load an older version (not sure why). I fixed this by reloading the window:

1. SHIFT+CMD+P
2. Click "Developer: Reload Window"