Skip to content

False "ownership_invalid_mutation" warning? #11525

Closed
@lts20050703

Description

@lts20050703

Describe the bug

Every time I tried to call the show_toast function from another component, I keep seeing Svelte log this to the console, is this a false warning?

Reproduction

Toast.svelte
<script context="module" lang="ts">
    let timeout: NodeJS.Timeout

    let toast = $state({
        message: "",
        background: "base" as "error" | "warning" | "success" | "primary" | "base",
        show: false
    })

    export async function show_toast(
        message: typeof toast.message,
        background: typeof toast.background,
        duration: number
    ) {
        clearTimeout(timeout)
        if (toast.show) {
            toast.show = false
            await sleep(150)
        }
        toast.show = true
        toast = {
            message,
            background,
            show: true
        }
        if (duration === Number.POSITIVE_INFINITY) return
        timeout = setTimeout(() => {
            toast.show = false // THIS IS LINE 28
        }, duration)
    }

    async function sleep(ms: number) {
        return await new Promise((r) => setTimeout(r, ms))
    }
</script>

<div
    class="pointer-events-none fixed m-1 flex w-full items-center justify-center transition-[top] {toast.show
        ? 'top-0'
        : '-top-12'}"
>
    <div
        class="rounded px-6 py-1 text-2xl {toast.background === 'error'
            ? 'bg-error'
            : toast.background === 'warning'
                ? 'bg-warning'
                : toast.background === 'success'
                    ? 'bg-success'
                    : toast.background === 'primary'
                        ? 'bg-primary'
                        : toast.background === 'base'
                            ? 'bg-base-100'
                            : ''}"
    >
        {toast.message}
    </div>
</div>

Logs

toast.svelte:28 [svelte] ownership_invalid_mutation
.../src/lib/toast.svelte mutated a value owned by .../routes/werewolf_night/+page.svelte. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
warn    @    client.js?v=c1f07bba:2639
ownership_invalid_mutation    @    chunk-HEXMXJ7S.js?v=c1f07bba:624
check_ownership    @    chunk-HEXMXJ7S.js?v=c1f07bba:783
set    @    chunk-HEXMXJ7S.js?v=c1f07bba:1894
(anonymous)    @    toast.svelte:28

System Info

System:
    OS: Linux 6.5 KDE neon 6.0 6.0
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
    Memory: 8.71 GB / 15.40 GB
    Container: Yes
    Shell: 3.7.1 - /usr/bin/fish
  Binaries:
    Node: 22.1.0 - ~/.local/share/nvm/v22.1.0/bin/node
    npm: 10.7.0 - ~/.local/share/nvm/v22.1.0/bin/npm
    bun: 1.1.7 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 124.1.65.130
  npmPackages:
    svelte: ^5.0.0-next.125 => 5.0.0-next.125

Severity

annoyance

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions