Skip to content

Issue with VSCode Incorrectly Reporting bind:clientWidth as an Error #2741

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

Open
MineYuanlu opened this issue Apr 9, 2025 · 5 comments
Open
Labels
bug Something isn't working

Comments

@MineYuanlu
Copy link

Describe the bug

I followed the documentation (https://svelte.dev/docs/svelte/bind#Function-bindings) to write code using bind:clientWidth, but I encountered an error:

Object literal may only specify known properties, and '"bind:clientWidth"' does not exist in type 'HTMLProps<"div", HTMLAttributes<any>>'.ts(2353)

However, if I ignore the error reported by VSCode, the page works as expected.

Additionally, I noticed that the following code works fine:

<div bind:clientWidth={w}>content</div>

But when I use it like this, it doesn't work:

<div bind:clientWidth={null, (v) => w=v}>content</div>

Version:

  • VSCode: 1.98.2 (Universal)
  • svelte.svelte-vscode: 109.5.3 (2025-03-06, 23:40:48)

Reproduction

<script lang="ts"> let w=$state(0); </script>
w=v}>content

Logs

System Info

System:
    OS: macOS 14.0
    CPU: (10) arm64 Apple M1 Pro
    Memory: 87.77 MB / 16.00 GB
    Shell: 5.2.32 - /opt/homebrew/bin/bash
  Binaries:
    Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
    npm: 11.0.0 - ~/.nvm/versions/node/v20.17.0/bin/npm
    pnpm: 9.15.1 - ~/.nvm/versions/node/v20.17.0/bin/pnpm
  Browsers:
    Chrome: 135.0.7049.42
    Safari: 17.0
  npmPackages:
    svelte: ^5.0.0 => 5.25.3

Severity

annoyance

@MineYuanlu
Copy link
Author

MineYuanlu commented Apr 12, 2025

Additional Information

I found another related issue with Function bindings. When binding an array, mutations like push, splice, or direct index assignments do not trigger reactivity. Only reassigning the entire array (e.g., arr = [...arr]) works as expected.

Example:

<script>
	let {arr=$bindable()}=$props();
	function update() {
		arr.push(1); // This won't trigger an update
	}
</script>
data: {JSON.stringify(arr)}
<button onclick={update}>Push</button>
<script>
	let arr_str = '';
</script>

<Module bind:arr={() => arr_str.split(','), (arr) => (arr_str = arr.join(','))} />

Unless the array is reassigned entirely, the binding doesn't respond to changes. This can be confusing, especially when assuming that operations like push would be enough to trigger updates.

@jasonlyu123
Copy link
Member

I can't reproduce the error. Can you check if you have svelte.language-server.ls-path config?

@jasonlyu123
Copy link
Member

Oh. Never mind, my test workspace has a type definition that overwrites the element type definition.

@MineYuanlu
Copy link
Author

I can't reproduce the error. Can you check if you have svelte.language-server.ls-path config?

empty setting

Image

<script lang="ts">
	let w = $state(0);
</script>

<div bind:clientWidth={null, (v) => (w = v)}>content</div>

Image

@jasonlyu123 jasonlyu123 added the bug Something isn't working label May 19, 2025
@bed42
Copy link

bed42 commented Jun 4, 2025

We're seeing the same exactly bug in our code base too :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants