Known Issue with JsxText nodes and whitespace (bug in ts.findNextToken() in tsc)

[andersekdahl]

First off, thanks for creating this! I'm reeeaaally looking forward to being able to use ESLint with TypeScript!

What version of TypeScript are you using?
1.8.10

What version of typescript-eslint-parser are you using?
0.1.3

What code were you trying to parse?

const x = (
  <form>
    <div className={styles.separator}></div>
  </form>
);

What did you expect to happen?
It shouldn't throw an error.

What happened?

eslint --debug C:/path/to/my/file.tsx

  eslint:cli Running on files +0ms
  eslint:ignored-paths Looking for ignore file in C:\Dev+31ms
  eslint:ignored-paths Loaded ignore file C:\Dev\.eslintignore +16ms
  eslint:ignored-paths Adding C:\Dev\.eslintignore +0ms
  eslint:glob-util Creating list of files to process. +0ms
  eslint:cli-engine Processing C:/path/to/my/file.tsx +0ms
  eslint:cli-engine Linting C:/path/to/my/file.tsx +0ms
  eslint:config Constructing config for C:/path/to/my/file.tsx +0ms
  eslint:config Using .eslintrc and package.json files +0ms
  eslint:config Loading C:\Dev\.eslintrc +0ms
  eslint:config-file Loading config file: C:\Dev\.eslintrc +16ms
  eslint:config Using C:\Dev\.eslintrc +203ms
  eslint:config Merging command line environment settings +0ms
  eslint:config-ops Apply environment settings to config +0ms
  eslint:config-ops Creating config for environment browser +0ms
  eslint:config-ops Creating config for environment es6 +0ms
Cannot read property 'range' of undefined
TypeError: Cannot read property 'range' of undefined
    at lastTokenIndex (C:\Dev\node_modules\eslint\lib\token-store.js:41:25)
    at SourceCode.api.getTokenAfter (C:\Dev\node_modules\eslint\lib\token-store.js:114:23)
    at EventEmitter.api.(anonymous function) [as getTokenAfter] (C:\Dev\node_modules\eslint\lib\eslint.js:1033:48)
    at RuleContext.(anonymous function) [as getTokenAfter] (C:\Dev\node_modules\eslint\lib\rule-context.js:155:33)
    at EventEmitter.validateBraceSpacing (C:\Dev\node_modules\eslint-plugin-react\lib\rules\jsx-curly-spacing.js:194:28)
    at emitOne (events.js:82:20)
    at EventEmitter.emit (events.js:169:7)
    at NodeEventGenerator.enterNode (C:\Dev\node_modules\eslint\lib\util\node-event-generator.js:40:22)
    at CodePathAnalyzer.enterNode (C:\Dev\node_modules\eslint\lib\code-path-analysis\code-path-analyzer.js:608:23)
    at CommentEventGenerator.enterNode (C:\Dev\node_modules\eslint\lib\util\comment-event-generator.js:97:23)

[JamesHenry]

Thanks, @andersekdahl. You are clearly using some plugins, and this error is actually being thrown in ESLint itself, so please can you provide your full configuration?

[andersekdahl]

Sure, sorry I didn't include it in the first place.

.eslintrc

{
  "parser": "typescript-eslint-parser",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": [
    "react"
  ],
  "env": {
    "browser": true,
    "es6": true
  },
  "rules": {
    "semi": 2,
    "quotes": [2, "single", "avoid-escape"],
    "eol-last": 0,
    "new-cap": 0,
    "indent": [2, 2, {"SwitchCase": 1}],
    "brace-style": [2, "1tbs"],
    "comma-spacing": 2,
    "key-spacing": [2, {
      "beforeColon": false,
      "afterColon": true
    }],
    "no-multiple-empty-lines": [1, {
      "max": 2
    }],
    "space-after-keywords": [2, "always"],
    "space-before-blocks": [2, "always"],
    "object-curly-spacing": [2, "never"],
    "array-bracket-spacing": [2, "never"],
    "space-in-parens": [2, "never"],
    "spaced-comment": [2, "always"],
    "no-var": 2,
    "max-len": [2, 130, 2],
    "no-unused-vars": [2, {
      "vars": "all",
      "args": "none"
    }],
    "no-undefined": 0,
    "no-undef": 2,
    "no-use-before-define": [2, "nofunc"],
    "no-loop-func": 0,
    "no-alert": 0,
    "no-multi-str": 0,
    "no-underscore-dangle": 0,
    "comma-dangle": 0,
    "jsx-quotes": 1,

    "react/display-name": 0,
    "react/jsx-boolean-value": 1,
    "react/jsx-closing-bracket-location": 1,
    "react/jsx-curly-spacing": 1,
    "react/jsx-indent-props": [1, 2],
    "react/jsx-max-props-per-line": [1, {"maximum": 4}],
    "react/jsx-no-duplicate-props": 1,
    "react/jsx-no-undef": 1,
    "react/jsx-sort-prop-types": 0,
    "react/jsx-sort-props": 0,
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1,
    "react/jsx-wrap-multilines": 1,
    "react/no-danger": 0,
    "react/no-did-mount-set-state": 1,
    "react/no-did-update-set-state": 1,
    "react/no-multi-comp": 1,
    "react/no-set-state": 0,
    "react/no-unknown-property": 1,
    "react/prop-types": [1, {"ignore": ["children"]}],
    "react/react-in-jsx-scope": 1,
    "react/self-closing-comp": 1,
    "react/sort-comp": 1
  }
}

[nzakas]

There's something in the jsx-curly-spacing rule from eslint-plugin-react that is throwing an error. This coukd mean that the output from that code isn't the same as Espree

[JamesHenry]

I have dug into this today, and it seems to be because of the JsxText and ts.findNextToken() issue we found when building out jsx support originally.

I reported the issue here: microsoft/TypeScript#7471

The whitespace characters between the JSX nodes are TypeScript JsxText nodes, and I think the bug above causes them to break our token conversion loop.

@andersekdahl a temporary workaround (until we can fix this in the TypeScript compiler) is to get rid of the whitespace characters between the JSX nodes:

const x = (
  <form><div className={styles.separator}></div></form>
);

[soda0289]

@JamesHenry
Any update on this issue and bug in typescript?
Can you share the patch you made to typescript that was mentioned in the issue: microsoft/TypeScript#7471

[JamesHenry]

@soda0289 TypeScript has been updated significantly since that issue was originally filed, and so I will need to look into it again, and then hopefully be in a position to submit a PR to TS.

[soda0289]

@JamesHenry
After reading the typescript issue it seems findNextToken() is an internal API. Should we consider writing our own implementation for this function that can handle JSX nodes properly?

[JamesHenry]

It is still marked as being open to PRs from the community so I will be investigating that as a first option.

JSX seems to be the last remaining area which is causing problems for TypeScript + ESLint usage and so it is definitely top of my list of things to resolve!

[JamesHenry]

I'm delighted to say that this should finally be fixed on master. Release coming soon!

[andersekdahl]

Fantastic, thank you!!