Weird compiler error with build target esnext and styled components

[vekunz]

Describe the bug

We encountered a very weird bug with the SvelteKit compiler. In a very specific constellation, the build task fails with an error (see Logs section below).

I created a GitHub Repository with the exact constellation to reproduce the error https://github.com/vekunz/sveltekit-crazy-compiler-error.

Reproduction

To reproduce the error, you need four things to exist in your SvelteKit application.

1. In the svelte.config.js set the key kit.vite.build.target to esnext.
2. Have a Svelte component with some styling (in this case SomeComponent.svelte)
3. Have a __layout.svelte and any some-route.svelte, which both use the component from step 2.
4. Put the component in either the __layout.svelte or the some-route.svelte (or in both) inside an {#if ...} statement

Logs

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\somePath\sveltekit-crazy-compile-error\.svelte-kit\output\server\chunks\SomeComponent.svelte_svelte_type_style_lang-6fa38ce4.js' imported from C:\somePath\sveltekit-crazy-compile-error\.svelte-kit\output\server\entries\pages\__layout.svelte.js
    at new NodeError (node:internal/errors:371:5)
    at finalizeResolution (node:internal/modules/esm/resolve:418:11)
    at moduleResolve (node:internal/modules/esm/resolve:981:10)
    at defaultResolve (node:internal/modules/esm/resolve:1078:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:530:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:251:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:79:40)
    at link (node:internal/modules/esm/module_job:78:36)
Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:\somePath\sveltekit-crazy-compile-error\.svelte-kit\output\server\chunks\SomeComponent.svelte_svelte_type_style_lang-6fa38ce4.js' imported from C:\somePath\sveltekit-crazy-compile-error\.svelte-kit\output\server\entries\pages\__layout.svelte.js
> 500 /
    at file:///C:/somePath/sveltekit-crazy-compile-error/node_modules/@sveltejs/kit/dist/chunks/index2.js:1037:11
    at save (file:///C:/somePath/sveltekit-crazy-compile-error/node_modules/@sveltejs/kit/dist/chunks/index2.js:1257:4)
    at visit (file:///C:/somePath/sveltekit-crazy-compile-error/node_modules/@sveltejs/kit/dist/chunks/index2.js:1148:3)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (12) x64 Intel(R) Core(TM) i7-9850H CPU @ 2.60GHz
    Memory: 17.20 GB / 31.79 GB
  Binaries:
    Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.3.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 101.0.4951.67
    Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.53)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @sveltejs/adapter-auto: 1.0.0-next.45 => 1.0.0-next.45
    @sveltejs/kit: 1.0.0-next.341 => 1.0.0-next.341
    svelte: 3.48.0 => 3.48.0

Severity

serious, but I can work around it

Additional Information

For now, we can work around it, but it is just a matter of time when this blocks all usage of SvelteKit for us.

[dominikg]

This only seems to happen with target: 'esnext' and components that are included inside {#if false} blocks.
As soon as you change the target or include the component outside a false block it works.

The error happens when building the ssr bundle.

The client is built and contains a css file for the component, albeit with that strange name, that originates from vite-plugin-svelte's virtual css id for the component. It looks like a failed tree shaking attempt.

[dominikg]

sounds related: vitejs/vite#8330

[matthewp]

This fixes our issue in Astro: vitejs/vite@85299c2

Might try patching that locally and see if it fixes for you.

PR: vitejs/vite#8345

[dominikg]

Worth a try, thanks. The fix for vite is looking to be correct.

However I'm not sure we actually want that behavior. Instead it should keep Foo anyways because it is determined at runtime whether to use it or not.

Not sure what made it come to the conclusion that Foo can be dropped from code like this

<script>
import Foo from './Foo.svelte';
let showFoo = false; // or Date.now() < 0  or  Math.random() > 1
</script>
{#if showFoo}
  <Foo />
{/if}  

[dummdidumm]

No longer reproducible with the latest version of Kit/Vite