ESLint: Cannot read property 'loc' of undefined. Please see the 'ESLint' output channel for details.

[WDever]

What code were you trying to parse?

import * as React from 'react';
import styled from 'styled-components';

const TestStyledComponent = styled.div`
  // css
`;

class Example extends React.Component<ExampleProps, ExampleState> {
  public render () {
    return (
      <TestStyledComponent />
    );
  };
}

export default Example;

What did you expect to happen?
No Error
What actually happened?
ESLint: Cannot read property 'loc' of undefined. Please see the 'ESLint' output channel for details.

[Error - 1:08:08 PM] ESLint stack trace:
[Error - 1:08:08 PM] TypeError: Cannot read property 'loc' of undefined
    at Object.VariableDeclaration [as listener] (/Users/wdever/Documents/Projects/hanlight-frontend-web/node_modules/eslint/lib/rules/indent.js:1361:69)
    at Program:exit.listenerCallQueue.filter.forEach.nodeInfo (/Users/wdever/Documents/Projects/hanlight-frontend-web/node_modules/eslint/lib/rules/indent.js:1537:55)
    at Array.forEach (<anonymous>)
    at Program:exit (/Users/wdever/Documents/Projects/hanlight-frontend-web/node_modules/eslint/lib/rules/indent.js:1537:26)
    at listeners.(anonymous function).forEach.listener (/Users/wdever/Documents/Projects/hanlight-frontend-web/node_modules/eslint/lib/util/safe-emitter.js:45:58)
    at Array.forEach (<anonymous>)
    at Object.emit (/Users/wdever/Documents/Projects/hanlight-frontend-web/node_modules/eslint/lib/util/safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (/Users/wdever/Documents/Projects/hanlight-frontend-web/node_modules/eslint/lib/util/node-event-generator.js:251:26)
    at NodeEventGenerator.applySelectors (/Users/wdever/Documents/Projects/hanlight-frontend-web/node_modules/eslint/lib/util/node-event-generator.js:280:22)
    at NodeEventGenerator.leaveNode (/Users/wdever/Documents/Projects/hanlight-frontend-web/node_modules/eslint/lib/util/node-event-generator.js:303:14)

when I write const in tsx, ESlint send an errror.

my eslint.js:

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'plugin:@typescript-eslint/recommended',
    'react-app',
    'plugin:prettier/recommended',
    'prettier',
  ],
  plugins: ['@typescript-eslint', 'react'],
  rules: {
    '@typescript-eslint/indent': ['error', 2],
    // "@typescript-eslint/explicit-function-return-type": ["false"],
    '@typescript-eslint/explicit-function-return-type': 0,
    // "prettier/prettier": ["error", {
    //   "singleQuote": true,
    //   "parser": "flow"
    // }],
    // "no-unused-vars": ["error", { "vars": "all", "args": "none", "ignoreRestSiblings": true }],
    'no-unused-vars': 0,
    '@typescript-eslint/no-empty-interface': 0,
    'prettier/prettier': 0,
    '@typescript-eslint/no-parameter-properties': 0,
    // "@typescript-eslint/no-unused-vars": 0,
    // "@typescript-eslint/no-unused-vars": ["error", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }],
  },
};

Versions

package	version
@typescript-eslint/parser	1.6.0
TypeScript	3.3.3333
ESLint	create-react-app default
node	11.10.0
npm	6.8.0

[bradzacher]

I am unable to repro this against master.

I'm not sure what eslint version you have installed, because your provided stack trace lists indent.js:1361 as the source of the Cannot read property 'loc' of undefined error, but there is no way for that error to be reported on that line.

Please do the following things to help debug:

• run eslint with the --debug flag from the CLI to verify
• tell us your currently installed version of eslint
• narrow down your repro case so that it only includes the code that is causing the error

[bradzacher]

Path to ESLint package: /Users/wdever/.config/yarn/global/node_modules/eslint

You need to run the package locally instead of globally:
yarn eslint <args> --debug

If you run it globally (eslint <args> --debug) it will not use your local package's dependencies, so it will fail like it just did.

[Molunerfinn]

I have the same issue.
My eslint version is 5.16.0
My eslintrc.js is:

module.exports = {
  parser: "@typescript-eslint/parser",
  extends: [
    "standard",
    "standard-react",
    "react-app"
  ],
  plugins: [
    "@typescript-eslint",
    "react",
  ]
}

After you type the const, this error will display in VSCode:

[bradzacher]

Can you save that code when it breaks and then run eslint with the - - debug flag?

The screenshot of the vscode bug toast isn't all that helpful.
Need some form of a stack trace along with information about what versions of everything you're using @Molunerfinn.

[Molunerfinn]

Sure.
The log is :

➜ .\node_modules\.bin\eslint .\src\App.tsx --debug
  eslint:cli CLI args: [ '.\\src\\App.tsx', '--debug' ] +0ms
  eslint:cli Running on files +12ms
  eslint:glob-utils Creating list of files to process. +0ms
  eslint:ignored-paths baseDir = "D:\\Coding\\graduation-backend-platform" +0ms
  eslint:ignored-paths addPatternRelativeToCwd:
  eslint:ignored-paths   original = "/node_modules/*"
  eslint:ignored-paths   cooked   = "/node_modules/*" +4ms
  eslint:ignored-paths addPatternRelativeToCwd:
  eslint:ignored-paths   original = "/bower_components/*"
  eslint:ignored-paths   cooked   = "/bower_components/*" +0ms
  eslint:ignored-paths addPatternRelativeToCwd:
  eslint:ignored-paths   original = ".*"
  eslint:ignored-paths   cooked   = ".*" +1ms
  eslint:ignored-paths addPatternRelativeToCwd:
  eslint:ignored-paths   original = "!../"
  eslint:ignored-paths   cooked   = "!../" +1ms
  eslint:ignored-paths Looking for ignore file in D:\Coding\graduation-backend-platform +1ms
  eslint:ignored-paths Could not find ignore file in cwd +1ms
  eslint:ignored-paths contains: +4ms
  eslint:ignored-paths   target = "D:\\Coding\\graduation-backend-platform\\src\\App.tsx" +0ms
  eslint:ignored-paths   result = false +1ms
  eslint:ignored-paths contains: +0ms
  eslint:ignored-paths   target = "D:\\Coding\\graduation-backend-platform\\src\\App.tsx" +1ms
  eslint:ignored-paths   result = false +0ms
  eslint:cli-engine Processing D:\Coding\graduation-backend-platform\src\App.tsx +0ms
  eslint:cli-engine Linting D:\Coding\graduation-backend-platform\src\App.tsx +1ms
  eslint:config Constructing config file hierarchy for D:\Coding\graduation-backend-platform\src +0ms
  eslint:config Using .eslintrc and package.json files +0ms
  eslint:config Loading D:\Coding\graduation-backend-platform\.eslintrc.js +2ms
  eslint:config-file Loading JS config file: D:\Coding\graduation-backend-platform\.eslintrc.js +0ms
  eslint:plugins Loaded plugin @typescript-eslint (@typescript-eslint/eslint-plugin@1.6.0) (from D:\Coding\graduation-backend-platform\node_modules\@typescript-eslint\eslint-plugin\dist\index.js) +0ms
  eslint:plugins Loaded plugin react (eslint-plugin-react@7.12.4) (from D:\Coding\graduation-backend-platform\node_modules\eslint-plugin-react\index.js) +126ms
  eslint:config-file Loading react-app +448ms
  eslint:config-file Attempting to resolve eslint-config-react-app +1ms
  eslint:config-file Loading JS config file: D:\Coding\graduation-backend-platform\node_modules\eslint-config-react-app\index.js +3ms
  eslint:plugins Loaded plugin import (eslint-plugin-import@2.17.2) (from D:\Coding\graduation-backend-platform\node_modules\eslint-plugin-import\lib\index.js) +186ms
  eslint:plugins Loaded plugin flowtype (eslint-plugin-flowtype@3.6.1) (from D:\Coding\graduation-backend-platform\node_modules\eslint-plugin-flowtype\dist\index.js) +34ms
  eslint:plugins Loaded plugin jsx-a11y (eslint-plugin-jsx-a11y@6.2.1) (from D:\Coding\graduation-backend-platform\node_modules\eslint-plugin-jsx-a11y\lib\index.js) +174ms
  eslint:config-file Loading standard-react +430ms
  eslint:config-file Attempting to resolve eslint-config-standard-react +1ms
  eslint:config-file Loading JS config file: D:\Coding\graduation-backend-platform\node_modules\eslint-config-standard-react\index.js +3ms
  eslint:config-file Loading D:\Coding\graduation-backend-platform\node_modules\eslint-config-standard-jsx\index.js +15ms
  eslint:config-file Loading JS config file: D:\Coding\graduation-backend-platform\node_modules\eslint-config-standard-jsx\index.js +1ms
  eslint:config-file Loading standard +12ms
  eslint:config-file Attempting to resolve eslint-config-standard +1ms
  eslint:config-file Loading JS config file: D:\Coding\graduation-backend-platform\node_modules\eslint-config-standard\index.js +2ms
  eslint:plugins Loaded plugin node (eslint-plugin-node@8.0.1) (from D:\Coding\graduation-backend-platform\node_modules\eslint-plugin-node\lib\index.js) +165ms
  eslint:plugins Loaded plugin promise (eslint-plugin-promise@4.1.1) (from D:\Coding\graduation-backend-platform\node_modules\eslint-plugin-promise\index.js) +22ms
  eslint:plugins Loaded plugin standard (eslint-plugin-standard@4.0.0) (from D:\Coding\graduation-backend-platform\node_modules\eslint-plugin-standard\index.js) +7ms
  eslint:config Using D:\Coding\graduation-backend-platform\.eslintrc.js +1s
  eslint:config-ops Using config from partial cache +0ms
  eslint:config-ops Apply environment settings to config +1ms
  eslint:config-ops Creating config for environment es6 +1ms
  eslint:config-ops Creating config for environment node +0ms
  eslint:config-ops Creating config for environment browser +0ms
  eslint:config-ops Creating config for environment commonjs +1ms
  eslint:config-ops Creating config for environment jest +0ms
  eslint:linter Linting code for D:\Coding\graduation-backend-platform\src\App.tsx (pass 1) +0ms
  eslint:linter An error occurred while traversing +105ms
  eslint:linter Filename: D:\Coding\graduation-backend-platform\src\App.tsx +1ms
  eslint:linter Line: 1 +1ms
  eslint:linter Parser Options: { ecmaVersion: 9,
  ecmaFeatures: { globalReturn: false, jsx: true },
  sourceType: 'module' } +0ms
  eslint:linter Parser Path: D:\Coding\graduation-backend-platform\node_modules\@typescript-eslint\parser\dist\parser.js +2ms
  eslint:linter Settings: { react: { version: 'detect' } } +1ms
TypeError: Cannot read property 'loc' of undefined
Occurred while linting D:\Coding\graduation-backend-platform\src\App.tsx:1
    at Object.VariableDeclaration [as listener] (D:\Coding\graduation-backend-platform\node_modules\eslint\lib\rules\indent.js:1370:69)
    at Program:exit.listenerCallQueue.filter.forEach.nodeInfo (D:\Coding\graduation-backend-platform\node_modules\eslint\lib\rules\indent.js:1546:55)
    at Array.forEach (<anonymous>)
    at Program:exit (D:\Coding\graduation-backend-platform\node_modules\eslint\lib\rules\indent.js:1546:26)
    at listeners.(anonymous function).forEach.listener (D:\Coding\graduation-backend-platform\node_modules\eslint\lib\util\safe-emitter.js:45:58)
    at Array.forEach (<anonymous>)
    at Object.emit (D:\Coding\graduation-backend-platform\node_modules\eslint\lib\util\safe-emitter.js:45:38)
    at NodeEventGenerator.applySelector (D:\Coding\graduation-backend-platform\node_modules\eslint\lib\util\node-event-generator.js:251:26)
    at NodeEventGenerator.applySelectors (D:\Coding\graduation-backend-platform\node_modules\eslint\lib\util\node-event-generator.js:280:22)
    at NodeEventGenerator.leaveNode (D:\Coding\graduation-backend-platform\node_modules\eslint\lib\util\node-event-generator.js:303:14)

[bradzacher]

awesome, thanks.
looks like a bug to do with the conversion logic for indent.

I'm in the middle of the rewrite, of the indent rule which should fix issues like this.

[vadim-96]

@bradzacher How long to wait for that fix?

[bradzacher]

Like I said, I'm in the middle of a rewrite to handle all of these cases properly.

It's going to be a while as indent is a huge rule.

[roeintense]

@bradzacher any recommendations on workaround while rewrite is in flight?

[bradzacher]

it's hard to say - this is a very, very generic error; it could be from any number of rules.
Indent is just one rule that causes an error in a specific case.

Usually this error occurs the vscode extension attempts to lint incomplete code.
The incomplete code can cause the parser to create a weird AST which isn't technically valid TS/JS
99% of the time when you see this error popup in vscode, just ignore/close it and keep working.

A lot times rule authors make assumptions about the shape of AST because they assume 100% valid code. Which is fine in the majority of cases, but edge cases sometimes happen (esp with the extension running on incomplete code).

For example, in the gif above - a common assumption is that there's at least 1 declaration in a variable declaration, as the code is not valid JS without it
However in that gif, there is a dangling const reserved word, which the parser accepts and creates a weird case where the AST has a variable declaration with no declaration - invalid code that won't run, but parsable code none-the-less.

If you see the toast popup very regularly, create a repro case so we can investigate and fix the exact failing case.

[piousdeer]

Here's a repro repo. Please fix it, thanks!

[kaicataldo]

We’ve been discussing if we want to add the ability to handle recoverable errors in ESLint core. This type of error was actually one of the concerns that was brought up during that discussion. See eslint/rfcs#19 for more details.

[2alin]

Same problem here, is there any workaround? This is the only reason that makes me not use ESLint in a typescript team project.

[bradzacher]

@2alin - what is your repro case for "the same problem"? Is it exactly the same problem as one of the ones? If not then please elaborate with a repro.
It's hard to recommend a workaround for you if we don't know what's causing your problem.

If it's an error that's only showing up within your IDE, then just ignore the error and the eslint extension will recover as soon as you save the file again.
In this instance - the error probably occurred because you attempted to lint a semantically invalid file.

If the issue persists through file saves, then it's probably not a semantically invalid file, and might be a bug in a rule. Try doing a CLI run to see if that errors in the same way.

If it's an error that occurs during a CLI run, then please, please, please comment with the output of running your eslint command with the --debug flag so that we can read through the output to determine the error.

---

this debug log #441 (comment) and this repro #441 (comment) is an issue with the indent rule caused by linting an incomplete variable declaration (i.e they attempted to lint const;).
The workaround is to finish writing valid code, and the error will disappear.

Your use case might be different. I don't know - I don't have your codebase. Help me to help you.

[eyedean]

@bradzacher Thanks for being on top of it.

The issue for me is not that IDE will not recover or it shows up during CLI run. It's just when I type const an error tooltip pops up from the bottom right corner of VS Code and it's so distracting.

I bet your PR is going to fix it as it's on VariableDeclaration of indent.js for me when the passed node argument's declarations property is empty/null. Thanks again. :)

[ghost]

I have the same issue.
My eslint version is 5.16.0
My eslintrc.js is:

module.exports = {
  parser: "@typescript-eslint/parser",
  extends: [
    "standard",
    "standard-react",
    "react-app"
  ],
  plugins: [
    "@typescript-eslint",
    "react",
  ]
}

After you type the const, this error will display in VSCode:

I have the same issue, the error appears when I try to type const. anyone can help me to fix it?

[bradzacher]

please open a new issue and fill out the details.