eslint failed to load plugin 'import' declared in '.eslintrc.js » eslint-config-airbnb; cannot find module 'typescript/package.json'

Question

I'm trying to set up eslint for a basic React project (Javascript only, no Typescript). When linting my project with npx eslint ./, I get the following error:

ESLint: 8.31.0

Error: Failed to load plugin 'import' declared in '.eslintrc.js »
eslint-config-airbnb » /Users/me/project/node_modules/eslint-config-airbnb-base/index.js » 
/Users/me/project/node_modules/eslint-config-airbnb-base/rules/imports.js': 
Cannot find module 'typescript/package.json'

I'm not really sure what's going on here, as my project doesn't use any Typescript. Some additional information that might help:

I followed this tutorial to set up eslint, prettier, and editorconfig for working in a team environment.

Here is my .eslintrc.js file:

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
    "plugin:react/recommended",
    "airbnb",
    'prettier'
    ],
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
    "sourceType": "module"
    },
    "plugins": [
    "react"
    ],
    "rules": {
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    }
}

I do have a .eslintignore file in the root directory of my project that contains node_modules.

Here is my package.json:

{
  "name": "project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@fontsource/roboto": "^4.5.8",
    "@mui/material": "^5.11.4",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.2.2",
    "firebase": "^9.15.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-firebaseui": "^6.0.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "npx eslint ./",
    "format": "npx prettier --write ."
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint": "^8.31.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.6.0",
    "eslint-plugin-import": "^2.27.0",
    "eslint-plugin-jsx-a11y": "^6.7.0",
    "eslint-plugin-react": "^7.32.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "prettier": "2.8.2"
  }
}

Finally here is my file tree:

.vscode
node_modules
public
src
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.prettierignore
.prettierrc.json
package-lock.json
package.json
README.md

I found a somewhat questionable solution by installing typescript related packages for eslint:

npm install typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

After installing these packages, npx eslint ./ works fine, but I don't think I should need to install typescript-related plugins/parsers for eslint when my project doesn't use typescript and I set eslint to ignore the node_modules folder. I'm also unsure how installing these packages might affect the linting behavior (I didn't make any changes to .eslintrc.js or any other config files after installing those packages).

Does anyone know of a better solution that doesn't involve installing these additional packages? Or are these packages actually necessary despite my project not using Typescript?

Thank you in advance for the help!

eslint failed to load plugin 'import' declared in '.eslintrc.js » eslint-config-airbnb; cannot find module 'typescript/package.json'

0 Answers0