Intellisense/import Code Actions don't work with React JSX Transform unless React is in scope

[nhuesmann]

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

• VS Code Version: 1.70.0
• OS Version: Mac OS 12.4

Steps to Reproduce:

I created a reproducible demo using npx create-expo-app -t expo-template-blank-typescript. The only change I made was adding the basic React component and adding it to App.tsx without the import.

1. Clone the reproducible demo I created https://github.com/nhuesmann/vscode-react-jsx-transform-issue
2. cd <my-repo-you-cloned>
3. Install dependencies: npm i or yarn
4. code --disable-extensions .
5. Open App.tsx
6. Notice the error on line 8 with the <Test /> component
7. Click on the component and use cmd + . to bring up Code Actions
8. Observe VS Code's suggestion: import 'React' from "react"
9. Accept the suggestion
10. Once again use cmd + . (while clicked on <Test />) to bring up Code Actions
11. Observe VS Code's suggestion of Add import from "./Test"

The second suggestion should be suggested initially, since React's JSX Transform does not require React to be in scope. VS Code will not do JSX import suggestions unless React is in scope.

Related issue: #41762
Temporary workaround: #41762 (comment)

[RyanCavanaugh]

The expected behavior is only enabled if you set the jsx option to indicate that you're using a newer version of React that doesn't need the import, react-jsx

[nhuesmann]

The expected behavior is only enabled if you set the jsx option to indicate that you're using a newer version of React that doesn't need the import, react-jsx

I initially had it set to react-native because I was extending Expo's config. I just changed it to react-jsx as you suggested. The custom React components I've made are now detected, however it will not detect React Native components still. Maybe we could benefit from a separate option, i.e. react-native-jsx? I'd rather not choose between having to have React in scope to get React/React Native autocompletion vs leaving React out of scope but not having any React Native import autocompletion.

[RyanCavanaugh]

Is this a "real" behavior, or a quirk of Expo's build system? The React Native docs do not show examples without the React import. It's quite explicit:

Because JSX is included in the React library, it won’t work if you don’t have import React from 'react' at the top of your file!

[nhuesmann]

I just checked, Expo is using a slightly tweaked version of @babel/plugin-transform-react-jsx under the hood. Not sure, but it might have to do with Expo's build system. I feel like it'd be weird of them to mention supporting the JSX transform if it broke some feature of React Native + TS. Maybe I'll create an issue/question in Expo's repo. Do you have any suggestions otherwise?

[RyanCavanaugh]

@andrewbranch thoughts on making auto-import just not care about React being in scope? Seems like this might be causing more problems than solutions.

[typescript-bot]

This issue has been marked 'Working as Intended' and has seen no recent activity. It has been automatically closed for house-keeping purposes.

[nhuesmann]

@RyanCavanaugh I saw that this was closed automatically. If you guys decide to make any changes to this behavior and reference this issue, will I be notified even if it's closed?

[RyanCavanaugh]

Yes

[RyanCavanaugh]

@nhuesmann I know I said 'yes' above but I'm not sure if the above PR actually triggered a notification, so I'll mention you just to be sure 😉