sveltejs / svelte

web development for the rest of us
https://svelte.dev
MIT License
79.74k stars 4.23k forks source link

[Svelte 5] False positive firefox ownership_invalid_mutation warning #13139

Open TUTOR03 opened 2 months ago

TUTOR03 commented 2 months ago

Describe the bug

Got ownership_invalid_mutation warning on every $state rune update, if update was triggered from parent snippet and $state was created inside child component using function from external lib.

Reproduction

I have described the most detailed reproduction in this repository. There is also a full explanation of the cause of the bug. Shortened reproduction:

lib index.ts

export { default as Dummy } from '$lib/Dummy.svelte';
export * from '$lib/hook.svelte.js';

lib hook.svelte.ts

export function getPropsCreator() {
    const data = $state({ count: 0 });
    function changeData() {
        data.count += 1;
    }

    function createProps() {
        return {
            onclick() {
                changeData();
            }
        };
    }

    return createProps;
}

app +page.svelte

<script lang="ts">
    import Wrapper from '$lib/Wrapper.svelte';
</script>

{#snippet children(props: Record<string, unknown>)}
    <span {...props}>Snippet from App</span>
{/snippet}

<Wrapper {children} />

app Wrapper.svelte

<script lang="ts">
    import type { Snippet } from 'svelte';
    import { getPropsCreator } from 'dummy-lib';
    type Props = {
        children: Snippet<[Record<string, unknown>]>;
    };

    let { children }: Props = $props();

    const createProps = getPropsCreator();
</script>

{@render children(createProps())}

Bug happens due to how (check_ownership)[https://github.com/sveltejs/svelte/blob/main/packages/svelte/src/internal/client/dev/ownership.js#L246] function from svelte source code parses new Error().stack for firefox. Full explanation in this repo.

Logs

No response

System Info

System:
    OS: Linux 6.10 Fedora Linux 40 (Workstation Edition)
    CPU: (20) x64 13th Gen Intel(R) Core(TM) i7-1370P
    Memory: 18.32 GB / 30.93 GB
    Container: Yes
    Shell: 5.2.26 - /bin/bash
  Binaries:
    Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.16.0/bin/yarn
    npm: 10.8.1 - ~/.nvm/versions/node/v20.16.0/bin/npm
    pnpm: 9.8.0 - ~/.local/share/pnpm/pnpm
  Browsers:
    Chrome: 128.0.6613.113
    Mozilla Firefox: 129.0.2
  npmPackages:
    svelte: ^5.0.0-next.243 => 5.0.0-next.243

Severity

annoyance

jamesst20 commented 2 months ago

When possible it's better to provide REPL.

Here is one : REPL

I can confirm this is only happening on firefox (tested with Svelte 5 next 144 + Firefox 130) Edit: Firefox inspector must be opened prior loading the page otherwise the error never happens

TUTOR03 commented 2 months ago

@jamesst20 you need to split everything to two separate packages. I thought it is impossible ot reproduce in playground. I am really surprised that you managed to reproduce it in playground

jamesst20 commented 2 months ago

@jamesst20 you need to split everything to two separate packages. I thought it is impossible ot reproduce in playground. I am really surprised that you managed to reproduce it in playground

I though it was weird to require to have 2 separate project. At first I thought maybe it was SvelteKit related but doesn't appear so as it works in REPL. I am no experts in how Svelte works internally so I will let other investigate but it's odd it requires the inspector of Firefox to be opened prior loading the page

Screenshot 2024-09-05 at 9 06 58 AM