Auto import inside a TSX/JSX template should only offer elements that work as JSX elements

[Artur-]

Not sure who handles code complete / imports into JSX/TSX files so maybe this would need to be moved somewhere else.

If I add @vaadin/button@24.3.0 and @hilla/react-components@2.3.0 to a project and create the simplest possible react function component

export default function HelloReact() {
  return (
    <button
  );
}

and press cmd-space after button, I see the following

The first suggestion is fine, a standard <button> element
The second suggestion is to import import { Button } from "@vaadin/button"; which causes a compilation error

'Button' cannot be used as a JSX component.
  Its type 'typeof Button' is not a valid JSX element type.

so it should not be suggested.

The third import is OK as it is a React element

Then the fourth again is

import { ButtonElement } from "@hilla/react-components/Button.js";

which is

'ButtonElement' cannot be used as a JSX component.
  Its type 'typeof Button' is not a valid JSX element type.

Is there something wrong with the packages? Should they provide more information for VS Code or is this a problem of VS Code where it suggests and imports types that cannot be used in the given location?

If I write <But in IntelliJ I see a list that is more like I would expect

although ButtonMixin shows up an as extra item

[mjbvz]

I don't think we can filter down this way as sometimes you want: <namespace.SomeElement>. namespace is not a valid JSX element on its own but it could contain one

[RyanCavanaugh]

In addition to the above issue, determining what is and isn't a valid JSX thing requires type computations, and there are potentially thousands or tens of thousands of things in the completion list that would need filtering. Even if it were desirable, it's not practical from a performance perspective.

[typescript-bot]

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