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.

Sign up for GitHub

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

Jump to bottom

Error when binding to a prop that is also an exported identifier #14805

Open
kran6a opened this issue Dec 23, 2024 · 2 comments · May be fixed by #14813
Open

Error when binding to a prop that is also an exported identifier #14805

kran6a opened this issue Dec 23, 2024 · 2 comments · May be fixed by #14813

Comments

@kran6a
Copy link

kran6a commented Dec 23, 2024

Describe the bug

If you have a component like this you cannot bind the prop open

<script lang="ts">
    let {open: is_open = $bindable(false)}: Props = $props();
    export const open = ()=>{
        console.log("open export called");
    }
</script>

<div>AAA</div>

We should be able to bind to the open prop even if we cannot bind to the open export

Reproduction

Remove the comment to see the error

https://svelte.dev/playground/untitled?version=5.15.0#H4sIAAAAAAAACo1R0WrDMAz8FU0MmkLSvKdJINsP7H0ew2nUzODKJnZLR8i_D6XNWMsGw2AknXTWnUdkfSAs8MlwZ7gHzR3Q2bshQnvsMcW9sRSweB0xfnrplAKmy1zj_SacyEaptTrQb_Wd40gcAxZYht1gfASrua8UxqCwVgxgDvObzx_GdrAf3AFWm3zOrjSrrWIVLUVwnhgqeAxRR0r22gZabxWX-YW6Vqy4vBBJazXKPeW14vIhy-AKtYa74gaHLKsxxUjniEUcjjSlf4j-udet7DvkH8IBRNO8QwEmvC_qZD_d2kXgVMDL4HwQyEuQiGYZv_7WznH49iZZV_UofskRxFnaWNcnCueOZUZbS53ChWq6d7Ezp7ppmjKX4Nabt-kLXnLCnjwCAAA=

Logs

bind_invalid_export Component Child.svelte has an export named `open` that a consumer component is trying to access using `bind:open`, which is disallowed. Instead, use `bind:this` (e.g. `<Child bind:this={component} />`) and then access the property on the bound component instance (e.g. `component.open`) https://svelte.dev/e/bind_invalid_export

System Info

Does not matter

Severity

annoyance
@webJose
Copy link
Contributor

webJose commented Dec 23, 2024

Is there a strong reason to not choose a different name for the property or the export? Why must they be named the same?

@kran6a
Copy link
Author

kran6a commented Dec 23, 2024

No, in this case it was a modal component that allows setting and optionally binding an open prop and also exports an open method.

I don't think there is any reason to disallow this as you cannot use the prop in place of the method or the method in place of the prop.

It is also unexpected behavior as it works when passing the prop without binding it but the moment you bind it it throws.

@paoloricciuti paoloricciuti linked a pull request Dec 23, 2024 that will close this issue
Open
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
2 participants
@kran6a @webJose