Missing fix suggestions when multiple come from the same JSX element

[JoshuaKGoldberg]

const element = <span />;
// [ts] 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

If the compiler settings have jsx: "react", it seems like adding the import automatically could be a reasonable auto-fix?

import * as React from "react";

const element = <span />;

[mhegazy]

?

[JoshuaKGoldberg]

Huh, that works for me.

But: looks like there's a VS Code bug if the element type isn't found (for non-native elements), neither auto-suggest picks up. I'll follow up with them. Thanks!

[mhegazy]

VSCode has nothing to do with what quick fixes show or not, that is all the ts server. can you share an example?

[JoshuaKGoldberg]

import { observer } from "mobx-react";

import { SampleStore } from "./ClientAppStore";

export const Sample = observer(({ children, store }: IStoreProps<SampleStore>) => {
    return (
        <ExceptionHandler store={store.exceptionHandlerStore}>
            {children}
        </ExceptionHandler>
    );
});

[ts] Cannot find name 'ExceptionHandler'.
[ts] 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

No lightning bolt / fix suggestions show up when the cursor is on the ExceptionHandler line. If I add import * as React from "react"; to the imports list, it does show up.

[mhegazy]

Looks like this is fixed in latest. I think my change in https://github.com/Microsoft/TypeScript/pull/21755 did allow for this to work. can you give typescript@next a try?

[JoshuaKGoldberg]

It halfway works. Now, the opening tag for ExceptionHandler will give the react suggestion only, and the closing tag will give the import ExceptionHandler suggestion only.

[mhegazy]

Once you add the react fix, the other fix should show up as well. but i suppose we can do them in one and save you the extra command.