svecosystem / runed

Magical utilities for your Svelte applications (WIP)
https://runed.dev
MIT License
387 stars 21 forks source link

MediaQuery — Svelte error: rune_outside_svelte The `$effect` rune is only available inside `.svelte` and `.svelte.js/ts` files #108

Closed apz-gh closed 1 month ago

apz-gh commented 1 month ago

Describe the bug

Svelte Version: svelte 5.0.0-next.165 Kit Version: "@sveltejs/kit": "^2.5.18",

Error: Svelte error: rune_outside_svelte The $effect rune is only available inside .svelte and .svelte.js/ts files

<script>
import { MediaQuery } from 'runed';

    let media = $state('(min-width: 640px)');
    const query = new MediaQuery(() => media);
    </script>

    <div>
    The result of the media query <code class="text-brand">{media}</code> is
    <code class="text-brand">{query.matches}</code>
</div>

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE32Oy0rFMBCGX2UYhLbQ43EhLmpb8AFcCO6Mi5hMaaC5mEzPhdJ3l7QqrtzNDN__zb_gYCZK2Lwt6KQlbPApBKyRryEv6UQTE9aY_BxVvrRJRRO4F87Y4CPDAs-kjXyZKV5hhSF6C0WcHeniUTjhBE_EYDMDHdwklkxlUVrjDmejeWzg4f4uXKqiyjgr7xLD52brwNH5j74sK-j63ZXp9vhbRrhWm1Me-HUkiJTmicEPwCN9P9-drfKaQE0ypU4g04UPH1E6LbBfNm5tjxnpwaRs-4_fjLdWshop_eRyrb0K1mi9NoMhjQ3Hmdb39Qsej7llcQEAAA==

Logs

No response

System Info

n/a

Severity

annoyance

apz-gh commented 1 month ago

Related upstream issue: https://github.com/sveltejs/svelte/issues/12222

huntabyte commented 1 month ago

Will be closed by #103 , which updates the Svelte version used by the lib along with changing $effect.active() -> $effect.tracking()