Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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® Core™ 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