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

@cmlenz I gleefully take it back. Updated and tried again with the latest nightly (4.3.0-dev.20210330) this issue appears to be resolved. Will test it out for a couple days to confirm.

Maybe it’s also worth mentioning for those who are using Naxt.js that this solution will not work for them . Next.js uses "jsx": "preserve" and it can’t be changed

As noted in this comment it only works if you have "jsx": "react-jsx" or "jsx": "react-jsxdev" in your tsconfig - it doesn’t work if you’re using "jsx": "preserve".

I’m not sure how you’d get around that - ts would need some other way to work out that you’re using the new transform.

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.

Looking into it 👍

Any update for Next.js? Using 4.3.4 and still happening 😭

Am I missing anything? Using 4.3.2 and still happening

So glad to have found this! And thank you @lexanth for the fix.

Just to clarify for anyone else stumbling on this thread, you need to a a jsconfig.json file to your project root:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "checkJs": true,
    "jsx": "react-jsx"
  }
}

You can then use CMD + . to fix a missing import:

This has been driving me nuts forever, so glad to have found a solution here!

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

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

Any updates on this?

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

@tylerjlawson I’m working on v4.3.5 and the problem is still. Am I missing something?

I think this is the same as #41920

Adding @zackdotcomputer answer, remember to configure the typescript version in your VSCODE

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. 😕

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.

Any update for Next.js? Using 4.3.4 and still happening 😭

For now, what I did is remove "react/react-in-jsx-scope": "off", from my eslint 😕

One thing I noticed is this extension recommend the correct imports with CMD + space (or Ctrl + space on Windows)

@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 :-\