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

Matt Bierner (@mjbvz)

TS Template added by Matt Bierner (@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:

npx create-react-app my-app --template typescript
cd my-app
code --disable-extensions .
Tell vscode to use the Workspace TypeScript version (4.1.2).
Add a src/Test.tsx file with content export default function Test() { return <App />; }. It should show a problem Cannot find name 'App'..
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

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

Any progress made on this yet?

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.

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 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. :/

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?

I think this is the same as #41920

Any updates on this?

Christopher Lenz (@cmlenz)

Christopher Lenz (@cmlenz) If it is the same then I might have bad news because I pulled in the nightly with #41950 (the fix for #41920) and this issue is still present :-\

@nghiepit Are you using next.js?

PythonCreator27

PythonCreator27 Yes. I'm using Next.js
This is my tsconfig.json and VSCode 1.58.2

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "jsx": "preserve",
    "baseUrl": ".",
    "strict": true,
    "noEmit": true,
    "allowJs": true,
    "skipLibCheck": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "isolatedModules": true,
    "resolveJsonModule": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules", ".next"]
}

"jsx": "preserve", will not work here. But nextjs won't work without preserve. I think Nextjs needs to fix this on their side.

Any ideas why the TS engine doesn't pick up react if you set jsx to "preserve" or the reasoning behind the decision?

The handbook on it says it only affects the emit stage and does not affect type-checking.

If I'm working in other configurations and React is at v17, then I shouldn't have to have React imported in each file. If I have my own transpilation system, such as Next, Babel, etc. I'd still like to not have VSCode complaining that React isn't imported into the file.

Would love a response from the Typescript team on this

Looking into it 👍

what about "jsx":"react-native"? should there be a "jsx":"react-native-jsx" too?

Navigation Menu

Repository navigation

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

10 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

RyanCavanaugh commented on Dec 3, 2020

kuasha420 commented on Dec 31, 2020

nahtnam commented on Jan 12, 2021

advaiyalad commented on Jan 13, 2021

kuasha420 commented on Jan 13, 2021

Paden commented on Jan 28, 2021

cmlenz commented on Feb 1, 2021

jmadelaine commented on Mar 17, 2021

zackdotcomputer commented on Mar 22, 2021

10 remaining items

advaiyalad commented on Jul 20, 2021

nghiepdev commented on Jul 20, 2021

kuasha420 commented on Jul 20, 2021

Admiralfeb commented on Sep 19, 2021

Shahaed commented on Sep 23, 2021

andrewbranch commented on Sep 27, 2021

pvinis commented on Mar 23, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions