What is $$IsomorphicComponent and why do I get error TS4023?

[webJose]

Hello, everyone.

I have a Svelte v4 component library that is being upgraded to Svelte v5. It is an in-house Bootstrap library for an in-house variant of Bootstrap.

The problem I have happens when trying to add a particular component in src/lib/index.ts. I'll show what works:

export { default as _AnchorMenu } from "./DropdownMenu/AnchorMenu.svelte";
export { default as _ButtonMenu } from "./DropdownMenu/ButtonMenu.svelte";
export { default as _DividerMenu } from "./DropdownMenu/DividerMenu.svelte";
export { default as _DropdownMenu } from "./DropdownMenu/DropdownMenu.svelte";
export { default as _HeaderMenu } from "./DropdownMenu/HeaderMenu.svelte";
export { default as _NonInteractiveMenu } from "./DropdownMenu/NonInteractiveMenu.svelte";

This works. But this is not what I want. If you notice, the names all start with an underscore. This is because what I really want to do is this:

import _DropdownMenu from "./DropdownMenu/DropdownMenu.svelte";
import _AnchorMenu from "./DropdownMenu/AnchorMenu.svelte";
import _ButtonMenu from "./DropdownMenu/ButtonMenu.svelte";
import _DividerMenu from "./DropdownMenu/DividerMenu.svelte";
import _HeaderMenu from "./DropdownMenu/HeaderMenu.svelte";
import _NonInteractiveMenu from "./DropdownMenu/NonInteractiveMenu.svelte";
export const DropdownMenu = {
    Root: _DropdownMenu,
    Anchor: _AnchorMenu,
    Button: _ButtonMenu,
    Divider: _DividerMenu,
    Header: _HeaderMenu,
    NonInteractive: _NonInteractiveMenu
};

Basically, to avoid importing multiple components whenever a dev is using the DropdownMenu component, I want to export a POJO object that groups them all together. This is when TypeScript throws error TS4023:

Exported variable 'DropdownMenu' has or is using name '$$IsomorphicComponent' from external module "c:/Users/jpramire/src/repos/construction.svelte-dlux/src/lib/DropdownMenu/DropdownMenu.svelte" but cannot be named.

If I hover in VS Code over DropdownMenu, I see this:

Hence the title: What is this $$IsomorphicComponent type? Why is DropdownMenu the only one that shows up like this? Maybe if I knew, I could devise a fix for this, so I guess I should start by learning what this type is and what makes a component be of this type.

What baffles me is 2 things:

1. If I'm not making changes to the DropdownMenu component, why exporting it directly works? Isn't it still of type $$IsomorphicComponent, which I'm not exporting like the error message says? I guess not. See baffling fact 2.
2. As seen in the screenshot above, DropdownMenu.Root is of type $$IsomorphicComponent. However, _DropdownMenu is not! See the following screenshot:

So the variable named _DropdownMenu is not $$IsomorphicComponent, but when assigned to DropdownMenu.Root is????

[webJose]

Ok, so it seems that if a component has generics in its script tag, it gets aliased with this $$IsomorphicComponent name.

[webJose]

@dummdidumm, seems that you may know exactly what this is about? I see PR 2380 in the sveltejs/language-tools repository that implements the $$IsomorphicComponent interface. Any help would be highly appreciated. Cheers!