Circular references cause errors with TypeScript preprocessing.

[brunnerh]

Describe the bug
When creating components with circular references there are Typescript errors on the component usage and possibly script tags. This happend when i created a menu consisting of a Menu referencing a MenuItem component, while the MenuItem again references Menu for the sub-menu entries.

The build still works just fine.

To Reproduce
Steps to reproduce the behavior:

• Have component A which imports and uses component B.
• Have component B which imports and uses component A.
• Make scripts type="text/typescript".

There may be this error on the script tag (probably only appears with no-implicit-any enabled, but the type not being resolved probably causes the errors at the component usage site):

'render' implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.ts(7023)

And something like the following on the component usage:

JSX element class does not support attributes because it does not have a '$$prop_def' property.ts(2607)

'B' cannot be used as a JSX component.
Its instance type 'B__SvelteComponent_' is not a valid JSX element.
Property '$$prop_def' is missing in type 'B__SvelteComponent_' but required in type 'ElementClass'.ts(2786)

(If i comment out one of the component usages, all errors disappear.)

Expected behavior
No errors, if possible.

System (please complete the following information):

• OS: Windows 10 64bit
• IDE: VS Code 1.47.3
• Plugin/Package: Svelte for VSCode

[jasonlyu123]

Can you provide a simple REPL example? I can't reproduce it with the step you mention.
But I guess we can't do much about it. It indeed has some situations where the approach we used would cause this problem. #442 propose to provide a way to manually type the component that could solve some of these edge cases.

[brunnerh]

@jasonlyu123 This should reproduce the problem: https://github.com/brunnerh/svelte-circ-problem-demo

I get errors at:

• Menu usage in app.svelte
• script element in menu.svelte and menu-item.svelte.
• Menu usage in menu-item.svelte
• MenuItem usage in menu.svelte

[dummdidumm]

You may get to silence the error if you don't forward on:menu-item-command-executed and instead handle it explicitely, like on:menu-item-command-executed={() => dispatch('menu-item-command-executed')}. Reason is that this way you break the "infer the fired events from the other component"-cycle.

[brunnerh]

@dummdidumm That appears to work, thanks! Of course a general fix would still be appreciated

[dummdidumm]

This should be possible to solve now with the new experimental $$Events interface, see #442 for more info