bind:this does not work in component that is manually instantiated in onMount

[duydang2311]

Describe the bug

If I attempt to create a child component by client-side API in onMount of the parent component, the variable that I binded the element reference to in that child will be undefined.
So, the workaround is not to create it immediately when onMount is called, but after an amount of time (e.g for 20ms or await tick()).

Reproduction

https://svelte.dev/repl/5c59fe6aa6354b03aea62c445836f2b1?version=3.42.6

Logs

No response

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 Intel(R) Core(TM) i3-10100F CPU @ 3.60GHz
    Memory: 9.81 GB / 15.94 GB
  Binaries:
    Node: 16.9.1 - C:\Program Files\nodejs\node.EXE
    npm: 7.21.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (93.0.961.52)
    Internet Explorer: 11.0.22000.120

Severity

annoyance

[RaiVaibhav]

Hey @Conduitry, I am not sure whether this is a bug or should be considered as a request to support for the runtime component but svelte produce js after compilation and onMount is a runtime hook, in this case component gets created during runtime, so doesn't it means that during compilation the parent app will have no idea about the child till then it gets told. I looked upon the code and the problem is the flush call, since Child gets created at runtime, during compilation the App don't know that it needs to mount the child, so this means App will flush before the Child and adding a tick is just like delaying the flush so that things can work.

Please correct me if I said anything wrong or miss anything 🙏

[Conduitry]

This should be fixed now in 3.44.3 - https://svelte.dev/repl/5c59fe6aa6354b03aea62c445836f2b1?version=3.44.3