Component reactivity warning when component is dependency in reactive statement

[WarningImHack3r]

Describe the bug

I've been having this weird warning about reactivity for one of the external components (SVG as Svelte component) I use from a library:

[vite-plugin-svelte] /src/routes/+page.svelte:184:4 <CodeBracket/> will not be reactive if CodeBracket changes. Use <svelte:component this={CodeBracket}/> if you want this reactivity.
182:         before:absolute before:inset-0 before:-z-10 before:rounded-full before:bg-black before:opacity-[0.35] before:blur-lg before:content-[''] before:-translate-z-28"
183:       >
184:         <CodeBracket class="h-full w-full" />
             ^
185:       </div>
186:       <div

It's weird because this solution wouldn't work as I cannot pass classes to a <svelte:component as far as I know and it ONLY warns me on this specific line, not the 2 other siblings that have exactly the same structure:

<Mouse3DTilting
	initialX={-32}
	initialY={-13}
	intensity={0.05}
	scope={"#hero"}
	class="relative hidden aspect-square max-h-full items-center justify-center child:absolute lg:ml-20 xl:flex"
>
	<Window class="h-full w-full text-dominant" />
	<div
		class="bottom-10 left-10 w-36 perspective-[312rem] transform-style-3d translate-z-28
		before:absolute before:inset-0 before:-z-10 before:rounded-full before:bg-black before:opacity-[0.35] before:blur-lg before:content-[''] before:-translate-z-28"
	>
		<CodeBracket class="h-full w-full" /> <!-- Warning here -->
	</div>
	<div
		class="left-1/2 top-0 w-36 perspective-[312rem] transform-style-3d translate-z-20
		before:absolute before:inset-0 before:-z-10 before:rounded-full before:bg-black before:opacity-50 before:blur-lg before:content-[''] before:-translate-z-20"
	>
		<Sparkles class="h-full w-full" /> <!-- But no warning here -->
	</div>
	<div
		class="-right-10 bottom-0 w-36 perspective-[312rem] transform-style-3d translate-z-16
		before:absolute before:inset-0 before:-z-10 before:rounded-full before:bg-black before:opacity-[0.55] before:blur-lg before:content-[''] before:-translate-z-16"
	>
		<DevicePhoneMobile class="h-full w-full" /> <!-- No warning here either -->
	</div>
</Mouse3DTilting>

As I mentioned, these components (Window, CodeBracket, Sparkles & DevicePhoneMobile) are just SVGs in Svelte files from @inqling/svelte-icons I cannot do anything about and have no need for any reactivity.

I don't know if it's a bug or a problem in my code as I'm not a Svelte expert, but it looks like a bug.

Reproduction URL

https://github.com/EmeraldHQ/Website/actions/runs/5790267552/job/15693026456#step:7:20

Reproduction

1. Use my repo
2. Run vite (sometimes does not appear) or vite build (100% reliable)
3. Notice the warning

Logs

See the main text above

System Info

System:
    OS: macOS 13.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 95.34 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.5.0 - /opt/homebrew/bin/node
    npm: 9.8.1 - /opt/homebrew/bin/npm
    pnpm: 8.6.12 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 114.0.5735.198
    Safari: 16.6
    Safari Technology Preview: 17.0
  npmPackages:
    @sveltejs/adapter-static: ^2.0.3 => 2.0.3 
    @sveltejs/kit: ^1.22.4 => 1.22.4 
    svelte: ^4.1.2 => 4.1.2 
    vite: ^4.4.9 => 4.4.8

[Conduitry]

I believe this is due to CodeBracket being a dependency in a reactive block. The compiler appears to see CodeBracket as potentially dynamic, and so warns about it changing. This isn't happening for the other components because they don't appear as dependencies in reactive blocks.

Here's a minimal reproduction:

<script>
	import Foo from './Foo.svelte';
	$: Foo;
</script>

<Foo/>

[Conduitry]

FWIW, you can pass a class prop to components when using <svelte:component>, which is exactly what you're doing now with <CodeBracket class="h-full w-full" /> anyway - that's a prop, not an attribute. But in any case, this is an erroneous warning.

[WarningImHack3r]

The compiler appears to see CodeBracket as potentially dynamic, and so warns about it changing. This isn't happening for the other components because they don't appear as dependencies in reactive blocks.

Oooh, could it come from here, falsely considering it as a reactive component?

I might be wrong but this is wrong anyway because the component in $: and the one used in the markup are 2 separate instance aren't they?

this is an erroneous warning

Is it going to be fixed then? Or should I refactor my code to not make that happen? (If so, how?)