Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incorrect "ownership invalid binding" error when using snippets to render children #14893

Open
vincenzoml opened this issue Jan 5, 2025 · 8 comments

Comments

@vincenzoml
Copy link

Describe the bug

Issue: checking ownership of values does not "skip" intermediate components that render children using @render, when binding is used in their children from their parent.

Example: in a component in svelte5 have a structure like this:

<ChildComponent>
  <GrandChildComponent bind:statevar />
</ChildComponent>

where ChildComponent uses @render to render its children (that is the GrandChildComponent). In console I get a bogus warning: ownership_invalid_binding suggesting to create a binding between the main component and the ChildComponent. Which is impossible, as ChildComponent is a generic reusable component that renders a child. I also tried, just for the sake of it, to add statevar to the bindable properties of ChildComponent and bind it, and the problem is solved.

I wanted to reproduce it on svelte playground but unfortunately there I don't get ownership warnings.

Reproduction

Before spending time on a minimal reproduction I'd like to get the bug triaged, since it might be a dupe, or a "won't fix" situation and it takes time to create a separate repo just for reproduction. But I will do that immediately if this is a new bug report.

Logs

No response

System Info

System:
    OS: macOS 15.1.1
    CPU: (8) arm64 Apple M1
    Memory: 128.58 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.12.0 - ~/.nvm/versions/node/v22.12.0/bin/node
    Yarn: 4.5.1 - ~/.nvm/versions/node/v22.12.0/bin/yarn
    npm: 10.9.0 - ~/.nvm/versions/node/v22.12.0/bin/npm
  Browsers:
    Edge: 131.0.2903.112
    Safari: 18.1.1
  npmPackages:
    svelte: ^5.0.0 => 5.16.0

Severity

annoyance

@paoloricciuti
Copy link
Member

The fact that you can't reproduce in the playground is suspicious and unfortunately we can't know if it's a duplicate unless you provide an actual reproduction. My suggestion is to try to get to the bottom of it and reproduce it in the playground since this is purely runtime (doesn't involve hydration or SSR which is difficult to reproduce in the playground) so it might be something completely different.

@vincenzoml
Copy link
Author

vincenzoml commented Jan 5, 2025

Sorry, I explained myself incorrectly: in the playground, I don't see in general any ownership error messages in console. Here is an example: clearly, the binding is incorrect, but there is no ownership warning anywhere:

https://svelte.dev/playground/ebea059bfd2d4975a8edeff0e6e44198?version=5.16.1

However if you take the example and use it in a real project it will trigger warnings: the component "MyComponent" is mutating a value owned by its parent without a binding in place.

So in svelte playground it's impossible to reproduce this bug because of limitations of svelte playground.

I will take some time and prepare a repo anyway, I understand it's impossible to get triaged otherwise.

@paoloricciuti
Copy link
Member

That is not a mutation: if you pass an object and mutate one of the properties you do get a warning in the console.

@DDuran19
Copy link

DDuran19 commented Jan 6, 2025

We are also experiencing this issue, we made sure that we have bind: on our Grandparent, Parent, and child components but it still gives out the warning. we are also using snippets. BUT when we removed the snippet and just use the actual html code, it now does NOT give us the warning

@paoloricciuti
Copy link
Member

We are also experiencing this issue, we made sure that we have bind: on our Grandparent, Parent, and child components but it still gives out the warning. we are also using snippets. BUT when we removed the snippet and just use the actual html code, it now does NOT give us the warning

Do you have a reproduction?

@DDuran19
Copy link

DDuran19 commented Jan 6, 2025

We're still testing .. we're trying to create a new repository, but we are unable to create a reproduction... we'll go back thru our code and figure out what might be the cause... Is it possible for svelte compiler or for the warning to be more "specific" like, what state specifically is being changed by what component?

@paoloricciuti
Copy link
Member

We're still testing .. we're trying to create a new repository, but we are unable to create a reproduction... we'll go back thru our code and figure out what might be the cause... Is it possible for svelte compiler or for the warning to be more "specific" like, what state specifically is being changed by what component?

You already have the information about which file is mutating state from which other component...I don't think we can pinpoint the exact line

@vincenzoml
Copy link
Author

I created a separate repository and could not reproduce the issue; however on my private repository I really checked every single line and every single binding, and I have the issue. I think the issue exists but manifests itself only in particular situations. It will take some time to minimize my own repo to check at which point the issue disappears.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants