Ability to try/catch <svelte:component>? (Was: Dynamically imported component with immediate exception produces unrecoverable error or silence)

[marianmeres]

Describe the bug

Dynamic imports used with <svelte:component> with immediate errors are causing hard to debug issues.

In HMR development the Unrecoverable error in <Xyz>: next update will trigger a full reload is the best clue I got, sometimes no console output at all (weirdly after page hard reload). In production build just silence. But for both always fatal, uncaught exception like behavior.

<script>
  // SomeComponent.svelte
  const some = () => { throw new Error() }
</script>

{some()} <-- will throw

<script>
  // consumer
  onMount(async () => {
    try { 
      Some = (await import('./SomeComponent.svelte')).default;
    } catch (e) { 
      // correctly (?) nothing can be caught here...
      error = e.toString(); 
    } 
  });
</script>

<svelte:component this={Some}/>  <-- will be silent

Big thank you for your great work!

Reproduction

https://svelte.dev/repl/1d8b9883e9884b33beda6c9c4e4fba81?version=3.46.4

Logs

No response

System Info

System:
    OS: macOS 12.2.1
    CPU: (8) arm64 Apple M1
    Memory: 67.47 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.3.0 - /opt/homebrew/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.3.0 - /opt/homebrew/bin/npm
  Browsers:
    Brave Browser: 98.1.35.101
    Chrome: 98.0.4758.102
    Edge: 98.0.1108.51
    Firefox: 95.0.2
    Safari: 15.3

Severity

annoyance

[marianmeres]

I am thinking about the issue a little bit more, and I guess the problem essentially boils down to this question:

Is it possible to try/catch the <svelte:component> notation?

<!-- can we try/catch this? -->
<svelte:component this={Some}/>

Thanks.

[baseballyama]

@marianmeres

Is this same as #3733 ?

[Prinzhorn]

Is it possible to try/catch the svelte:component notation?

Maybe I'm missing something, but from the REPL alone I don't see any issue? I get the same error in the console regardless if I use dynamic imports or if I don't use <svelte:component> at all. But maybe in HMR/production it becomes silent? I'm just judging from the REPL.

Your REPL gives me this:

If I remove <svelte:component> and use Hello directly I get this:

https://svelte.dev/repl/a9a5339432754c428895a5ab002924c1?version=3.46.4

If I import Hello normally and just render it I get the same:

https://svelte.dev/repl/fb92f0b227604e7ba7a3327babe57daf?version=3.46.4

---

I'm not saying there is no issue, but I don't see it being related to <svelte:component> or await import from the REPL alone.

[marianmeres]

@Prinzhorn Alex, thank you for looking into this.

Hm... although trying, I am not able to reproduce the simplified case with the silence I was talking about above. Which gives the suspicion that the actual problem might be located elsewhere... (between the chair and the screen most likely)

Just to explain, as said, this is the only thing I’m getting (cropped the noise):

where the ComponentLoader.svelte:19 line above maps to <svelte:component... line in the source. All else is noise.

Anyway, thank you again for your time.