-
-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Description
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 class
es 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
- Use my repo
- Run
vite
(sometimes does not appear) orvite build
(100% reliable) - 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