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

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

Steps to Reproduce:

Clone the following repository: https://github.com/ChristianIvicevic/react-jsx-factory-repro
yarn install all dependencies
Open the index.tsx and add the SampleComponent without automatic completion and import of the component
Try to use Quick Fix on the SampleComponent to automatically add its import
Only the fix to import React is available initially - apply this Quick Fix
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

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?

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.

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

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

Billy Janitsch (@billyjanitsch)

Billy Janitsch (@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)

Daniel Rosenwasser (@DanielRosenwasser)

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: Daniel Rosenwasser (@DanielRosenwasser) Ryan Cavanaugh (@RyanCavanaugh)

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!

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

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"
  },```

Bump for the issue, default cra app has this issue.

The repository in OP is gone now, and there are conflicting reports about whether or not this is fixed. Can someone please provide a concrete repro we can check on?

Closing language service bugs related to the 6.0 implementation. For more information, see #62827

Navigation Menu

Repository navigation

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 #41466

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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 #41466

Description

Activity

ChristianIvicevic commented on Feb 24, 2021

rshaul commented on Feb 24, 2021

billyjanitsch commented on Apr 9, 2021

rshaul commented on Apr 13, 2021

Hiroki111 commented on Jun 28, 2021

Kingwl commented on Jul 20, 2021

rshaul commented on Dec 19, 2021

normancapule commented on Feb 28, 2022

mm-webx commented on Nov 24, 2022

Gregorein commented on Jan 18, 2024

RyanCavanaugh commented on Jan 19, 2024

RyanCavanaugh commented on Dec 3, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions