Skip to content

Component reactivity warning when component is dependency in reactive statement #9082

@WarningImHack3r

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugcompilerChanges relating to the compiler

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions