[consistent-type-imports] Auto-fix not working well with ReactJS imports

[maneetgoyal]

• I have tried restarting my IDE and the issue persists.
• I have updated to the latest version of the packages.
• I have read the FAQ and my problem is not listed.

Repro

// eslintrc.json
{
  "rules": {
    "@typescript-eslint/consistent-type-imports": "error"
  }
}

// TS source file
import React from "react";

export const ComponentFoo: React.FC = () => {
  return <div>Foo Foo</div>;
};

// tsconfig.json

  "compilerOptions": {
    "sourceMap": true,
    "module": "es6",
    "moduleResolution": "node",
    "target": "es6",
    "jsx": "react",
    "declaration": true,
    "declarationMap": true,
    "isolatedModules": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "importHelpers": true,
    "esModuleInterop": true
  }

Expected Result

After auto-fix, I should be getting no change to my import line:

import React from "react";

export const ComponentFoo: React.FC = () => {
  return <div>Foo Foo</div>;
};

Actual Result

After auto-fix, getting:

import type React from "react";

export const SampleCollector: React.FC = () => {
  return <div>Sample Collector</div>;
};

And TSC is unhappy with it; saying:

'React' cannot be used as a value because it was imported using 'import type'.

Additional Info

Versions

package	version
@typescript-eslint/eslint-plugin	4.0.1
@typescript-eslint/parser	4.0.1
TypeScript	4.0.2
ESLint	7.8.0
node	12.18.0

[doberkofler]

I have the same problem.

[bradzacher]

This is a really unfortunate side-effect of the react transform.
I hate that they made this a required part of it and I can't wait until they remove this requirement...

To properly support this, we'll have to add a configuration option to allow you to specify the JSX factory similar to tsconfig:

• https://www.typescriptlang.org/tsconfig#jsxFactory
• https://www.typescriptlang.org/tsconfig#jsxFragmentFactory

[glen-84]

Is it not possible to read that from the TypeScript configuration?

[maneetgoyal]

That'll be so nice if it's doable, given we already provide a reference to tsconfig.json in eslintrc.json:

"parserOptions": {
    "parser": "@typescript-eslint/parser",
    "project": "./tsconfig.eslint.json",
    "ecmaFeatures": {
      "jsx": true
    }
  },

[bradzacher]

We can prefill it in that case, for sure!

However the rule does not require type information, and not everyone uses type-aware parsing. So we need to provide an option for those people that don't.