JSX import fixes do not support new React JSX Transform (without react import)

[cduff]

TS Template added by @mjbvz

TypeScript Version: 4.1.2

Search Terms

• react
• jsx

---

• VSCode Version: 1.51.1
• OS Version: Windows 10 Pro

React 17 introduced a new JSX transform which does not require react to be imported in every file. Support for this was added in TypeScript 4.1. However vscode is still suggesting/requiring the react import before other JSX import fixes are suggested.

Steps to Reproduce:

1. npx create-react-app my-app --template typescript
2. cd my-app
3. code --disable-extensions .
4. Tell vscode to use the Workspace TypeScript version (4.1.2).
5. Add a src/Test.tsx file with content export default function Test() { return <App />; }. It should show a problem Cannot find name 'App'..
6. Click to show fixes. It unnecessarily suggests/requires import default 'React' from module "react" before it will suggest the desired import default 'App' from module "./App".

In short, you can't get help with JSX imports without littering your files with unnecessary react imports.

Does this issue occur when all extensions are disabled?: Yes

[RyanCavanaugh]

We're still working on exactly figuring out how the new helpful automatic import behavior should interact with TS's framework-agnostic view of JSX

[kuasha420]

Any progress made on this yet?

[nahtnam]

One workaround I found is: Instead of pressing cmd+. to open the auto suggest panel, remove the last letter of the component and type it back. You should see the suggest panel come up with the component name instead of the import React from 'react' suggestion.

[advaiyalad]

I tried this workaround too, but when I am trying to fix all missing imports, this is a very annoying task. Instead, I import React from 'react'; and then fix all missing imports, and then it is as simple as removing the react import.

[kuasha420]

I tried this workaround too, but when I am trying to fix all missing imports, this is a very annoying task. Instead, I import React from 'react'; and then fix all missing imports, and then it is as simple as removing the react import.

I have a precommit hook that runs some modified version of that react-jsx codemod as part of lint staged. VERY UGLY solution but that's the best I could do atm. :/

[Paden]

We're still working on exactly figuring out how the new helpful automatic import behavior should interact with TS's framework-agnostic view of JSX

Since JSX is no longer apart of a single framework, does this still apply?

[cmlenz]

I think this is the same as #41920

[jmadelaine]

Any updates on this?