Lazily imported components suffer from FOUC

[Rich-Harris]

Describe the bug

A useful pattern is to dynamically import a component inside a load function:

<script context="module">
  export async function load({ params }) {
    return {
      props: {
        Thing: params.thing = 'this'
          ? (await import('$lib/ThisThing.svelte')).default
          : (await import('$lib/ThatThing.svelte')).default
      }
    };
  }
</script>

<script>
	export let Thing;
</script>

<Thing/>

The problem is that results in FOUC, because SvelteKit only injects CSS for static dependencies when server-side rendering. The styles don't appear until the component is imported.

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-qstyga?file=src%2Froutes%2Findex.svelte,src%2Flib%2FLazy.svelte&terminal=dev

Logs

No response

System Info

latest

Severity

serious, but I can work around it

Additional Information

No response

[PlopTheReal]

Not sure if that's related but as of 1.0.0-next.370, all the CSS of all the dynamic components gets loaded from the first page load.

[PlopTheReal]

Sorry I haven't precised that I'm not loading the components with that pattern (lazy load when the component has mounted).
I've tried such pattern but I'm getting the following errors:

in dev:
/web/svelttest/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:50310
            const err = new Error(`Cannot find module '${id}' imported from '${importer}'`);

in preview: 
Error: <Test> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules

[Rich-Harris]

This was fixed by #5138.

@PlopTheReal it's unclear what your last comment has to do with this thread — if you're experiencing a bug, please open a new issue with a repro