Typescript react: unable to auto import react components unless React is in scope

[ialexi-bl]

TS Template added by @mjbvz

TypeScript Version: 4.1.2

Search Terms

• jsx
• react

---

With React version 17 it's no longer necessary to import React in order to use JSX. However VS code refuses to automatically import a component that is not in scope and used in JSX. It only shows an option import default 'React' from module 'react'. If I do this, it then shows an option to import the missing component.

This only seems to happen in typescript projects, in javascript there is no quick fixes related to import at all, but I've never worked with javascript projects I don't know if this is supposed to happen.

• VSCode Version: 1.53.0-insider
• OS Version: Windows 10 2004

Steps to Reproduce:

1. Create an empty react app using typescript, I tested with npx create-react-app test --template typescript
2. Create a Test component in test.jsx
3. Use Test component in App.jsx without importing either Test or React
4. Test component will have red squiggles, open quick fix on it and see that there is no option
   to import Test, only to open React
5. Now import React and see that importing Test option has appeared

Repo: https://github.com/ialexi-bl/react-vscode-issue-reproduction
Open App.tsx and try to quick fix missing Test import

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

[vscodebot]

(Experimental duplicate detection)
Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:

• Formatting of react code is bad (#111809)
• Emmet expansion with React components (#66107)

[mjbvz]

Potentially related to #41920

[RyanCavanaugh]

Same root cause as #41920