Language-tools: Cannot read property 'length' of undefined error in VS Code with wc, and named slot with a binding directive

[arackaf]

Is this about svelte@next? This project is currently in a pre-release stage and breaking changes may occur at any time. Please do not post any kind of bug reports or questions on GitHub about it.

No

Describe the bug
A clear and concise description of what the bug is.

When compiling to custom elements, if you have a named slot with a binding directive, VS Code will emit a false error of Cannot read property 'length' of undefined in the VS Code console, even if you have a svelte config file with customElement: true in it.

Logs
Please include browser console and server logs around the time this bug occurred.

n/a

To Reproduce
To help us help you, if you've found a bug please consider the following:

Svelte Component:

<div bind:this={rootEl} class="root">
  <h1 class="x">Hi there BEFORE SLOT</h1>
  <slot name="s" bind:this={s} />
  <h1>Hi there AFTER SLOT</h1>
</div>

svelte.config.js

module.exports = {
  compilerOptions: {
    customElement: true
  }
};

Removing the bind:this={s} causes the error to disappear.

With the necessary webpack config, this code all works properly, but the false error in the console is concerning.

Occasionally, this won't be possible, and that's fine – we still appreciate you raising the issue. But please understand that Svelte is run by unpaid volunteers in their free time, and issues that follow these instructions will get fixed faster.

Expected behavior
A clear and concise description of what you expected to happen.

No error.

Stacktraces
If you have a stack trace to include, we recommend putting inside a <details> block for the sake of the thread's readability:

Stack trace

Stack trace goes here...

Information about your Svelte project:
To make your life easier, just run npx envinfo --system --npmPackages svelte,rollup,webpack --binaries --browsers and paste the output here.

• Your browser and the version: (e.x. Chrome 52.1, Firefox 48.0, IE 10)

N/A

VS Code: latest

• Your operating system: (e.x. OS X 10, Ubuntu Linux 19.10, Windows XP, etc)

Mac

• Svelte version (Please check you can reproduce the issue with the latest release!)

3.32.1

• Whether your project uses Webpack or Rollup

webpack

Severity
How severe an issue is this bug to you? Is this annoying, blocking some users, blocking an upgrade or blocking your usage of Svelte entirely?

Moderate

Note: the more honest and specific you are here the more we will take you seriously.

Additional context
Add any other context about the problem here.

[dummdidumm]

It's a svelte2tsx issue unrelated to the web components target, it's an IDE-only false positive error so to speak.
Edit: Well, it's kind of related, because apparently you can only bind to slots in with a web components target.

[arackaf]

@dummdidumm good to know - thank you kindly for replying. Is there currently any workaround, config or otherwise?

[dummdidumm]

I don't know if that would break other things in your code but you could wrap the slot with a div or another tag and bind on that.

<div bind:this={rootEl} class="root">
  <h1 class="x">Hi there BEFORE SLOT</h1>
  <div bind:this={s}>
    <slot name="s" />
  </div>
  <h1>Hi there AFTER SLOT</h1>
</div>

This is also the way you'd have to do it if you don't target web components, because slots cannot have directives for the normal dom target.

[arackaf]

@dummdidumm sadly that doesn't work in this case. Yeah I know slot directives are invalid for non-wc. Fortunately I can just ignore the false errors until there's a fix.

So I'm guessing there's no way to shut off certain Svelte errors in VS Code, like there is for warnings? Ie a11y-missing-attribute etc.

[dummdidumm]

There is not in this case because it's a crash/nullpointer while walking the AST, so unfortunately you'll have to live with it for the time being.

[arackaf]

@dummdidumm gotcha - thanks again for the info!

[arackaf]

@dummdidumm jesus that was fast - https://github.com/sveltejs/language-tools/pull/804

I know it's not done yet but thanks a ton! Svelte team is amazing.