Quick Fix command for missing React component imports does not work without React in the scope even with the new JSX factory enabled in Next.js that makes the React import unnecessary

[ChristianIvicevic]

• VSCode Version: 1.51.0
• OS Version: macOS 10.15.7
• Typescript Version: 4.0.5

Steps to Reproduce:

1. Clone the following repository: https://github.com/ChristianIvicevic/react-jsx-factory-repro
2. yarn install all dependencies
3. Open the index.tsx and add the SampleComponent without automatic completion and import of the component
4. Try to use Quick Fix on the SampleComponent to automatically add its import
5. Only the fix to import React is available initially - apply this Quick Fix
6. Open the Quick Fix for a second time - now you are able to add the import for the SampleComponent

Here is a gif of the differences with automatic import and with Quick Fixes:

With the newest version of Next.js it is no longer necessary to import the default export of React, thus step 5 should not appear in the first place.

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

[ChristianIvicevic]

With the release of the new JSX factories in React with create-react-app I am constantly running into this issue outside of Next.js as well and have to import the default React namespace to enable further code-fixes as described in the initial post even though it should no longer be necessary.

Are there any updates on this issue and when it might be resolved?

[rshaul]

Also running into this issue often throughout the day. import React from "react" is no longer needed in react 17 and adding it just feels like tech debt that I'll have to remove later.

Even if the first tooltip option stayed the same import React it would be nice to have a 2nd option below it that allows you to just import the component and skip import React if you want. TY for your consideration.

[billyjanitsch]

I believe this was fixed by #41950, which will be released in TypeScript 4.3. That PR is listed as closing #41920 which is a duplicate of this issue. (It's phrased differently but I believe it's the same issue.)

[rshaul]

Next.js (which is what this issue was opened about) uses "jsx": "preserve" in its tsconfig so unfortunately that PR doesn't solve this (tested with the 4.3.0-beta release of typescript & stable VS Code).

[Hiroki111]

@billyjanitsch

I believe this was fixed by #41950, which will be released in TypeScript 4.3. That PR is listed as closing #41920 which is a duplicate of this issue. (It's phrased differently but I believe it's the same issue.)

Unfortunately, this still persists :(
(typescript@4.3.4)

[Kingwl]

Well, I have no idea about this.
But it could help for the users of next.js if we could distinguish do we need global react import.
We may need a new preference like "noGlobalReactInTsx"？

/cc: @DanielRosenwasser @RyanCavanaugh

[rshaul]

Using VS Code 1.63.2 and Typescript 4.5.4 and this seems to be fixed now for me using a nextjs 11 project. Thanks guys!

[normancapule]

Experienced the same thing in a CRA app. Upgrading my typescript version to 4.4.2 fixed it.

[mm-webx]

Still have issue with that with React Native app:

"dependencies": {
    "@expo/webpack-config": "^0.17.2",
    "expo": "~47.0.5",
    "expo-status-bar": "~1.4.2",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-native": "0.70.5",
    "react-native-web": "~0.18.7"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@types/react": "~18.0.24",
    "@types/react-native": "~0.70.6",
    "@typescript-eslint/eslint-plugin": "^5.43.0",
    "@typescript-eslint/parser": "^5.43.0",
    "eslint": "^8.27.0",
    "eslint-config-universe": "^11.1.1",
    "husky": "^8.0.2",
    "prettier": "^2.7.1",
    "pretty-quick": "^3.1.3",
    "typescript": "^4.6.3"
  },```