"TypeError: Cannot read property 'type' of undefined" while entering useEffect statement on VSCode

[bonnie]

Tell us about your environment

Node version: v15.13.0
npm version: v7.9.0
Local ESLint version: v7.25.0
Global ESLint version: v7.23.0 (Currently used)
Operating System: darwin 18.6.0

What parser (default, @babel/eslint-parser, @typescript-eslint/parser, etc.) are you using?

@typescript-eslint/parser

Please show your full configuration:

Configuration

{
  "extends": [
    "airbnb",
    "plugin:testing-library/recommended",
    "plugin:testing-library/react",
    "plugin:@typescript-eslint/recommended",
    "react-app",
    "react-app/jest",
    "plugin:jsx-a11y/recommended",
    "plugin:prettier/recommended"
  ],
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"],
        "paths": ["src"]
      }
    }
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": [
    "testing-library",
    "jest-dom",
    "sonarjs",
    "jsx-a11y",
    "@typescript-eslint",
    "simple-import-sort",
    "prettier"
  ],
  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    "jest": true
  },
  "rules": {
    "import/no-extraneous-dependencies": [2, { "devDependencies": true }],
    "testing-library/await-async-query": "error",
    "testing-library/no-await-sync-query": "error",
    "testing-library/no-debug": "warn",
    "jest-dom/prefer-checked": "error",
    "jest-dom/prefer-enabled-disabled": "error",
    "jest-dom/prefer-required": "error",
    "jest-dom/prefer-to-have-attribute": "error",
    "react/prop-types": ["off"],
    "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".jsx"] }],
    "import/extensions": ["error", "never"],
    "import/prefer-default-export": 0,
    "import/no-anonymous-default-export": 0,
    "import/no-unresolved": 2,
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error",
    "sort-imports": "off",
    "import/order": "off",
    "no-shadow": "off",
    "@typescript-eslint/no-shadow": "error",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "react/no-array-index-key": "off",
    "react/react-in-jsx-scope": "off",
    "prettier/prettier": "error",
    "react/jsx-one-expression-per-line": "off",
    "react/jsx-curly-newline": "off"
  }
}

I am running ESLint via the dbaeumer.vscode-eslint extension in VSCode, Version 2.1.20. These are the extension settings I'm using:

"eslint.alwaysShowStatus": false,
"eslint.codeAction.disableRuleComment": {
  "enable": true,
  "location": "separateLine"
},
"eslint.codeAction.showDocumentation": {
  "enable": true
},
"eslint.codeActionsOnSave.mode": "all",
"eslint.debug": false,
"eslint.format.enable": false,
"eslint.lintTask.enable": false,
"eslint.nodeEnv": null,
"eslint.nodePath": null,
"eslint.onIgnoredFiles": "off",
"eslint.options": {
  "configFile": ".eslintrc.json"
},
"eslint.packageManager": "npm",
"eslint.probe": [
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact",
  "html",
  "vue",
  "markdown"
],
"eslint.quiet": false,
"eslint.rules.customizations": [],
"eslint.run": "onType",
"eslint.runtime": null,
"eslint.trace.server": "off",
"eslint.validate": [
  "javascript",
  "typescript",
  "typescriptreact"
],
"eslint.workingDirectories": [
  "client"
],

My VSCode settings are:

{
  "workbench.colorTheme": "Abyss",
  "eslint.workingDirectories": ["client"],
  "eslint.options": {
    "configFile": ".eslintrc.json"
  },
  "eslint.validate": ["javascript", "typescript", "typescriptreact"],
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[typescript]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  "eslint.codeAction.showDocumentation": {
  
    "enable": true
  }
}

Typing this code will reliably set off the error, often several times:

useEffect()

What did you expect to happen?
No error

What actually happened? Please copy-paste the actual, raw output from ESLint.

For the above useEffect() statement, I get this error:

[Error - 5:26:01 PM] TypeError: Cannot read property 'type' of undefined
Occurred while linting /Users/bonnieschulkin/src/private-udemy-react-query/lazy-days-spa/client/src/components/appointments/Calendar.tsx:54
    at visitCallExpression (/Users/bonnieschulkin/src/private-udemy-react-query/lazy-days-spa/client/node_modules/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js:1734:24)
    at /Users/bonnieschulkin/src/private-udemy-react-query/lazy-days-spa/client/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/Users/bonnieschulkin/src/private-udemy-react-query/lazy-days-spa/client/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/Users/bonnieschulkin/src/private-udemy-react-query/lazy-days-spa/client/node_modules/eslint/lib/linter/node-event-generator.js:256:26)
    at NodeEventGenerator.applySelectors (/Users/bonnieschulkin/src/private-udemy-react-query/lazy-days-spa/client/node_modules/eslint/lib/linter/node-event-generator.js:285:22)
    at NodeEventGenerator.enterNode (/Users/bonnieschulkin/src/private-udemy-react-query/lazy-days-spa/client/node_modules/eslint/lib/linter/node-event-generator.js:299:14)
    at CodePathAnalyzer.enterNode (/Users/bonnieschulkin/src/private-udemy-react-query/lazy-days-spa/client/node_modules/eslint/lib/linter/code-path-analysis/code-path-analyzer.js:711:23)
    at /Users/bonnieschulkin/src/private-udemy-react-query/lazy-days-spa/client/node_modules/eslint/lib/linter/linter.js:954:32
    at Array.forEach (<anonymous>)

I can also reliably reproduce the following error (usually two times) by typing import type {} from :

[Error - 5:30:15 PM] ESLint stack trace:
[Error - 5:30:15 PM] TypeError: Cannot read property 'replace' of undefined
Occurred while linting /Users/bonnieschulkin/src/private-udemy-react-query/lazy-days-spa/client/src/components/appointments/Calendar.tsx:2
    at getSource (/Users/bonnieschulkin/src/private-udemy-react-query/lazy-days-spa/client/node_modules/eslint-plugin-simple-import-sort/shared.js:805:8)
    at /Users/bonnieschulkin/src/private-udemy-react-query/lazy-days-spa/client/node_modules/eslint-plugin-simple-import-sort/shared.js:167:20
    at Array.map (<anonymous>)
    at Object.getImportExportItems (/Users/bonnieschulkin/src/private-udemy-react-query/lazy-days-spa/client/node_modules/eslint-plugin-simple-import-sort/shared.js:109:16)
    at maybeReportChunkSorting (/Users/bonnieschulkin/src/private-udemy-react-query/lazy-days-spa/client/node_modules/eslint-plugin-simple-import-sort/imports.js:67:24)
    at Program (/Users/bonnieschulkin/src/private-udemy-react-query/lazy-days-spa/client/node_modules/eslint-plugin-simple-import-sort/imports.js:58:11)
    at /Users/bonnieschulkin/src/private-udemy-react-query/lazy-days-spa/client/node_modules/eslint/lib/linter/safe-emitter.js:45:58
    at Array.forEach (<anonymous>)
    at Object.emit (/Users/bonnieschulkin/src/private-udemy-react-query/lazy-days-spa/client/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/Users/bonnieschulkin/src/private-udemy-react-query/lazy-days-spa/client/node_modules/eslint/lib/linter/node-event-generator.js:256:26)

Steps to reproduce this issue:

1. Install eslint-plugin-react-hooks (I'm using version 4.2.0)
2. Install the dbaeumer.vscode-eslint extension (version 2.1.20) on VSCode (I'm using version Version: 1.55.2)
3. import { useEffect } from 'react';
4. type useEffect ()
5. The ESLint error TypeError: Cannot read property 'type' of undefined will occur.

OR

1. Install eslint-plugin-simple-import-sort (I'm using version 6.0.1)
2. Install the dbaeumer.vscode-eslint extension (version 2.1.20) on VSCode (I'm using version Version: 1.55.2)
3. type import type {} from
4. the ESLint error ESLint: Cannot read property 'replace' of undefined will occur (usually two times)

Note: this seems to be new-ish behavior, though I can't pinpoint exactly when it started.

Are you willing to submit a pull request to fix this bug?
No, sadly, I'm not familiar enough with ESLint to know how to fix this.

[aladdin-add]

the errors were from eslint-plugin-react-hooks, and eslint-plugin-simple-import-sort - not maintained by the eslint team.

can you file the issue in the that repo?

[bonnie]

the errors were from eslint-plugin-react-hooks, and eslint-plugin-simple-import-sort - not maintained by the eslint team.

can you file the issue in the that repo?

Absolutely, my mistake!

[bonnie]

For future reference: the issue for eslint-plugin-react-hooks has been fixed but not yet released: facebook/react#20385

I filed lydell/eslint-plugin-simple-import-sort#72 with eslint-plugin-simple-import-sort.