`import React` removed when saving TSX file (when source.organizeImports is enabled)

[caleb531]

Issue Type: Bug

Hi,

If I enable source.organizeImports in my settings.json like so:

{
    "[typescript][typescriptreact]": {
        "editor.codeActionsOnSave": {
            "source.organizeImports": true
        }
    }
}

Then on save, VS Code will automatically remove the React import line from files like this TSX file, even though importing React is required for JSX/TSX files:

import React from 'react'; // This line gets removed on file save

function App() {
  return (
    <div className="app"></div>
  );
}

export default App;

For large JSX files, this is especially apparent because ESLint will output a plethora of "'React' must be in scope when using JSX" errors.

Naturally, the only way to get the React import to stick is to reference something like React.memo or React.MouseEvent in my code, although this is not ideal.

import React from 'react'; // This no longer gets removed on file save

const App = React.memo(() => {
  return (
    <div className="app"></div>
  );
});

export default App;

I believe this behavior to be the result of the 1.68.0 release, since I only started experiencing this issue a day or two ago, and the 1.68 release made some changes to organizeImports (per the release notes).

I tried digging into the settings and reading online—it doesn't seem that the source.organizeImports setting is very configurable beyond specifying which language mode(s) it applies to. I have already searched open issues, disabled all my extensions, and tried the Insider build, to no avail in any case.

Can someone please confirm if this is a 1.68 bug, and if there are any workarounds in the interim?

Thank you in advance! Caleb

System Information

VS Code version: Code 1.68.0 (4af164ea3a06f701fe3e89a2bcbb421d2026b68f, 2022-06-08T11:43:24.900Z) OS version: Darwin arm64 21.5.0 Restricted Mode: No

System Info

|Item|Value| |---|---| |CPUs|Apple M1 (8 x 24)| |GPU Status|2d_canvas: enabled
canvas_oop_rasterization: disabled_off
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
metal: disabled_off
multiple_raster_threads: enabled_on
oop_rasterization: enabled
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
skia_renderer: enabled_on
video_decode: enabled
video_encode: enabled
webgl: enabled
webgl2: enabled| |Load (avg)|2, 2, 2| |Memory (System)|8.00GB (0.11GB free)| |Process Argv|. --crash-reporter-id 0ad5d613-9997-4c57-8cea-d275b013e8a2| |Screen Reader|no| |VM|0%|

Extensions (28)

Extension|Author (truncated)|Version ---|---|--- language-x86-64-assembly|13x|3.0.0 sca-for-vscode|cal|3.0.0 vscode-eslint|dba|2.2.2 FreeMarker|dco|0.0.9 EditorConfig|Edi|0.16.4 vscode-graphql|Gra|0.4.12 selected-lines-count|gur|1.4.0 beautify|Hoo|1.5.0 applescript|idl|0.21.1 svg|joc|1.4.18 cornflakes-linter|kev|0.5.1 AWK|lug|0.0.2 vscode-latex|mat|1.2.0 Lisp|mat|0.1.12 vscode-apache|mrm|1.2.0 remote-ssh-edit|ms-|0.80.0 advanced-new-file|pat|1.2.2 tcl|ras|0.1.0 prolog|reb|0.0.4 mdx|sil|0.1.0 pegjs-language|Sir|1.0.4 rewrap|stk|1.16.3 shellcheck|tim|0.19.5 hosts|tom|1.2.0 transpose|v4r|0.0.5 highlight-matching-tag|vin|0.10.1 gitblame|wad|8.2.2 viml|Xad|2.1.2

A/B Experiments

``` vsliv368:30146709 vsreu685:30147344 python383:30185418 vspor879:30202332 vspor708:30202333 vspor363:30204092 vslsvsres303:30308271 pythonvspyl392:30443607 vserr242cf:30382550 pythontb:30283811 vsjup518:30340749 pythonvspyt551cf:30345471 pythonptprofiler:30281270 vshan820:30294714 vstes263:30335439 vscoreces:30445986 pythondataviewer:30285071 vscod805:30301674 binariesv615:30325510 bridge0708:30335490 bridge0723:30353136 vsaa593cf:30376535 vsc1dst:30438360 pythonvs932:30410667 wslgetstarted:30449410 vscscmwlcmt:30465135 cppdebug:30492333 vsclangdc:30486549 ```

[nguyenthanhan201]

Well, I have the same issues.

[RyanCavanaugh]

Dupllicate #49486

[RyanCavanaugh]

@caleb531 what's your jsx compiler setting?

[caleb531]

@RyanCavanaugh If I understand you correctly, I have "jsx": "preserve" set in my tsconfig.json.

But empirically, I re-enabled source.organizeImports and disabled the ESLint react/react-in-jsx-scope error, and my app still ran just fine even after the React import was stripped out. So I can confirm that the React import is indeed no longer required, per #49486.

Thank you for checking in! And sorry for the dup. 😅