Svelte & vite bind:clientWidth doesn't work on 1st load

[stubar]

Describe the bug
In this svelte repl https://svelte.dev/repl/f078cbd64eb94ecda12d854c898d5955?version=3.44.2 the width of an element is printed using Svelte's bind:clientWidth. The same component in Storybook renders '0' unless the window is resized or a HMR update happens.

To Reproduce
Note I couldn't use the reproduce script, I got the following error...

An error occurred while executing: yarn set version berry && yarn config set enableGlobalCache true && yarn config set nodeLinker node-modules

create the following component & story in a setup as described in 'system'...
Test.svelte...

<script>
	let containerWidth;
</script>

<h1> width:{containerWidth}</h1>

<div bind:clientWidth={containerWidth}>
</div>

Test.stories.svelte...

<script>
	import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
	import Test from './Test.svelte';
</script>

<Meta
	title="Example/Test"
	component={Test}
/>

<Template let:args>
	<Test {...args} />
</Template>

<Story name='test'/>

Note I have created a workaround as follows...

<script>
	import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
	import Test from './Test.svelte';
	let mounted = false

		setTimeout(()=>{

		  mounted = true
		})
</script>

<Meta
	title="Example/Test"
	component={Test}
/>

<Template let:args>
	{#if mounted}
	<Test {...args} />
	{/if}
</Template>

<Story	name='test'/>

System
Environment Info:

System:
OS: macOS Mojave 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
Binaries:
Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
Yarn: 1.21.1 - ~/.yarn/bin/yarn
npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
Browsers:
Chrome: 96.0.4664.55
npmPackages:
@storybook/addon-actions: ^6.4.0-rc.5 => 6.4.0-rc.5
@storybook/addon-essentials: ^6.4.0-rc.5 => 6.4.0-rc.5
@storybook/addon-links: ^6.4.0-rc.5 => 6.4.0-rc.5
@storybook/addon-svelte-csf: ^1.1.0 => 1.1.0
@storybook/svelte: ^6.4.0-rc.5 => 6.4.0-rc.5

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[IanVS]

Hi, I see you mentioned vite, are you using https://github.com/eirslett/storybook-builder-vite?

[stubar]

hi @IanVS yes I'm on
"storybook-builder-vite": "^0.1.9",

[IanVS]

We just released some fixes for svelte, would you mind trying to update to the latest release?

[stubar]

Thank you this now works, I initially had some problems though, typescript wasn't working.

I think I fixed this before with

"svelteOptions": { "preprocess": import("../svelte.config.js").preprocess }

in my main.js but after a bit of googling and finding this https://stackoverflow.com/questions/70681325/storybook-vite-svelte-typescript-typescript-not-being-processed-in-st I have switched to

"svelteOptions": { "preprocess":[svelteTS()] }

and all is good. Thanks again @IanVS .