Dynamic Component SSR Error

[kyjus25]

Describe the bug

My goal is to dynamically render a component and have it also be server-side rendered in order to replace a system written in PHP that can perform the same task.

Originally I have followed this REPL, which is close, but does not SSR (moving the code to an async function instead of onMount does not work either)

However, I found that by using a page endpoint and feeding that to the <svelte:component /> I was then able to dynamically display a component that is SSR, but it displays an error in the process.

Reproduction

I have prepared a repository that demonstrates the issue:
https://github.com/kyjus25/dynamic-component-ssr-error

It has the following structure:

-- lib
    -- MyComponent.svelte
-- routes
    -- index.svelte
    -- index.js

index.js will serve up a shadow endpoint that imports MyComponent.svelte for index.svelte to display as a <svelte:component />

The component does display properly, and the component is also SSR when viewing the source of the document, but the following error is displayed in the console.

Logs

proxy.js:15 [HMR][Svelte] Unrecoverable HMR error in <Index>: next update will trigger a full reload
logError @ proxy.js:15
Proxy<Index> @ proxy.js:380
create_else_block @ root.svelte? [sm]:43
create_default_slot @ root.svelte? [sm]:38
create_slot @ index.mjs:69
create_fragment @ layout.svelte:21
init @ index.mjs:1891
Layout @ layout.svelte:97
createProxiedComponent @ svelte-hooks.js:341
ProxyComponent @ proxy.js:242
Proxy<Layout> @ proxy.js:349
create_if_block_2 @ root.svelte? [sm]:37
create_fragment @ root.svelte? [sm]:36
init @ index.mjs:1891
Root @ root.svelte? [sm]:16
createProxiedComponent @ svelte-hooks.js:341
ProxyComponent @ proxy.js:242
Proxy<Root> @ proxy.js:349
initialize @ start.js:786
_hydrate @ start.js:1741

index.svelte? [sm]:5 Uncaught (in promise) TypeError: switch_value is not a constructor
    at create_fragment (index.svelte? [sm]:5:34)
    at init (index.mjs:1891:37)
    at new Routes (index.svelte? [sm]:2:25)
    at createProxiedComponent (svelte-hooks.js:341:9)
    at new ProxyComponent (proxy.js:242:7)
    at new Proxy<Index> (proxy.js:349:11)
    at Array.create_else_block (root.svelte? [sm]:43:40)
    at Array.create_default_slot (root.svelte? [sm]:38:20)
    at create_slot (index.mjs:69:27)
    at create_fragment (layout.svelte:21:23)

System Info

System:
    OS: macOS 12.3.1
    CPU: (12) x64 Intel(R) Core(TM) i5-10600 CPU @ 3.30GHz
    Memory: 27.58 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.14.0/bin/yarn
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Brave Browser: 101.1.38.119
    Firefox: 99.0.1
    Safari: 15.4
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.53
    @sveltejs/kit: next => 1.0.0-next.357
    svelte: ^3.44.0 => 3.48.0

Severity

annoyance

Additional Information

Again, the repo does technically work, but displays an error in the console

In a more complex scenario, the component returned in the page endpoint is a path that is constructed based on the "theme" template of the site (around 20 different theme possibilities, similar to a Wordpress-esque type deal), it would not normally be a static string but I simplified.

[gtm-nayan]

Intended to be that way, endpoint output must be serializable in some form which components constructors are not, use the load function for what you're trying to do

As for why it works server side: #4944