Skip to content

[Svelte 5] False positive firefox ownership_invalid_mutation warning #13139

Closed
@TUTOR03

Description

@TUTOR03

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:

  • Create a lib repo using npm create svelte@latest
  • Export from the repo any .svelte component and function that creates for example onclick handler that updates $state
  • Use this lib in another npm create svelte@latest app repo and make sure is is optimized with vite
  • Create .svelte component that accepts a snippet as a prop and passes return from lib funtion to it
  • Destructur props in snippet to the dom element
  • Click dom element and get warning

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions