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?

[zackdotcomputer]

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

[zackdotcomputer]

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

[lucasousi]

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

[zenVentzi]

Am I missing anything? Using 4.3.2 and still happening

[lexanth]

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.

[eschwartz]

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!

[Elia-Darwish]

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

[nghiepdev]

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

[eliasjnior]

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)

[tylerlaws0n]

@nghiepit does v4.3.5 resolve the issue?

#44724

[nghiepdev]

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

[advaiyalad]

@nghiepit Are you using next.js?

[nghiepdev]

@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"]
}

[kuasha420]

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

[Admiralfeb]

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.

[Shahaed]

Would love a response from the Typescript team on this

[andrewbranch]

Looking into it 👍

[pvinis]

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