Parsing errors on very basic JSX

[mattdell]

What version of TypeScript are you using?
2.2.2

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

What code were you trying to parse?

Component

import React from 'react';

const SearchResult = () => (
    <div />
);

export default SearchResult;

.eslintrc.js

module.exports = {
  "parser": "typescript-eslint-parser",
  "parserOptions": {
    "sourceType": "module"
  },
  "ecmaFeatures": {
    "jsx": true
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true,
    "mocha": true
  },
  "globals": {
    "__DEV__": false,
    "__TEST__": false,
    "__PROD__": false,
    "__COVERAGE__": false,
    "require": false,
    "sinon": false,
    "expect": false
  },
  "rules": {
  }
}

What did you expect to happen?
To parse, and then lint

What happened?

  4:9  error  Parsing error: '>' expected

I've been having this issue and decided to try a very basic example and it won't even parse the file. Any ideas?

[mattdell]

I should add, this works fine in js and ts files.

[soda0289]

You need to enable JSX in the parser option as well. That way the typescript parser can handle JSX tags.

    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },

Do you mean it parses correctly when the file extension is .js or .ts but fails when it is .tsx?

[mattdell]

@soda0289 thanks for the quick response 👍 That was it.

Strange, as I swear this used to work.

And sorry, I meant the ts files are linted fine but the jsx files are not. In other words, it's not the file extension it's the jsx within the tsx files.

[trusktr]

it's not clear that we have to do this. Mainly, I assumed that if there's no options mentioned in the README, then there's no options I should put in my eslintrc.