HMR improvements for .ts files that include jsx

[ic-768]

Describe the bug

I have a bunch of hooks that handle logic behind rendering tables.

For example:

export const useAnimalTable = ({
  onRowClick,,
}: UseAnimalTableArgs) => {
  const { t } = useTranslation();
  const { isRegionalAdmin } = useCurrentUser();
  const queryClient = useQueryClient();

  const [animalFilter, setAnimalFilter] = useState<string>();


  const columns: ColumnDef<AnimalTableData, any>[] = [
    {
      accessorKey: "animal",
      enableSorting: true,
      header: (c) => (
        <SortableHeader label={t("animal")} column={c}>
          <Filter
            inputName="animal"
            value={animalFilter}
            setValue={onChangeAnimalFilter}
            ref={animalRef}
          />
        </SortableHeader>
      ),
    },
    //... more stuff down here}

And this returns the columns along with a bunch of functions also declared in the hook.

I use a .tsx file extension for this file to get proper syntax highlighting but also because using a .ts extension causes all sorts of errors to pop out because the components and the jsx aren't recognised. But this causes the hmr invalidate warning for consistent components exports.

Reproduction

https://github.com/vitejs/vite-plugin-react/discussions/288

Steps to reproduce

No response

System Info

linux

Used Package Manager

npm

Logs

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Make sure this is a Vite issue and not a framework-specific issue.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.