Parser mishandling generics in jsx

[nstepien]

What code were you trying to parse?

import React from 'react';

interface T {}
const div1 = <div<T> />;
const div2 = <div<T> title="test" />;

What did you expect to happen?
No issues with eslint-plugin-react rules.

What actually happened?

warning: A space is required before closing bracket (react/jsx-tag-spacing) at src/test.tsx:4:18:
  2 |
  3 | interface T {}
> 4 | const div1 = <div<T> />;
    |                  ^
  5 | const div2 = <div<T> title="test" />;
  6 |


warning: Expected only one space between "div" and "title" (react/jsx-props-no-multi-spaces) at src/test.tsx:5:22:
  3 | interface T {}
  4 | const div1 = <div<T> />;
> 5 | const div2 = <div<T> title="test" />;
    |                      ^
  6 |

The code gets autofixed into:

import React from 'react';

interface T {}
const div1 = <div <T> />;
const div2 = <div title="test" />;

A space is added for the first div, and the generic is completely removed in the second div.

Versions

package	version
@typescript-eslint/parser	1.7.0
TypeScript	3.4.4
ESLint	5.16.0
node	11.14.0
npm	6.9.0

.eslintrc.js config:

'use strict';

const rules = {
  'react/jsx-props-no-multi-spaces': 1,
  'react/jsx-tag-spacing': [1, {
    closingSlash: 'never',
    beforeSelfClosing: 'always',
    afterOpening: 'never',
    beforeClosing: 'never'
  }]
};

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  parserOptions: {
    sourceType: 'module'
  },
  plugins: [
    'react'
  ],
  rules
};

I believe this is an issue with the typescript parser/estree, rather than the react plugin rules, please correct me if I'm wrong.

[bradzacher]

Having a quick glance at their source code, this looks like a bug with their implementation.
The rule inspects the code based on tokens, and they do not account for the presence of the type annotation in the code.
(this is similar to a bug that exists in the base rule func-call-spacing #448)

Please file a bug with the eslint-plugin-react repo.