Sidebar Component, svelte 5: $derived.by(...) can only be used as a variable declaration initializer or a class field

[Albyzai]

I have been struggling for days with an issue getting the sidebar component to work in my svelte 5 project.

I have been following the implementation from https://next.shadcn-svelte.com/docs/components/sidebar to perfection, even tried to mimic some of the dependencies (versions) used in the next branch in this repository, but to no avail.

I am getting the follow error for the component:

[Error [CompileError]: src/lib/components/shadcn/ui/sidebar/context.svelte.ts:6:16 $derived.by(...) can only be used as a variable declaration initializer or a class field
https://svelte.dev/e/state_invalid_placement] {
id: 'src/lib/components/shadcn/ui/sidebar/context.svelte.ts',
frame: ' 4 | class SidebarState {\n' +
' 5 | constructor(props) {\n' +
' 6 | this.open = $derived.by(() => this.props.open());\n' +
' ^\n' +
' 7 | this.openMobile = $state(false);\n' +
' 8 | this.state = $derived.by(() => this.open ? "expanded" : "collapsed");',
code: 'state_invalid_placement',

I'm interested to know if anyone else has experienced this issue, and perhaps managed to solve it?

If it helps, these are my dependencies, where I have updated vite to newest version along with bits-ui as I assumed those could be the culprit.

devDependencies:
`

	"@playwright/test": "^1.45.3",
	"@sveltejs/adapter-node": "^5.2.12",
	"@sveltejs/kit": "^2.0.0",
	"autoprefixer": "^10.4.20",
	"bits-ui": "^1.1.0",
	"clsx": "^2.1.1",
	"formsnap": "^1.0.1",
	"lucide-svelte": "^0.469.0",
	"mnemonist": "^0.39.8",
	"svelte": "^5.16.1",
	"svelte-check": "^4.0.0",
	"sveltekit-superforms": "^2.22.1",
	"tailwind-merge": "^2.6.0",
	"tailwind-variants": "^0.3.1",
	"tailwindcss": "^3.4.17",
	"tailwindcss-animate": "^1.0.7",
	"typescript": "~5.5.3",
	"vite": "^6.1.1",
	"zod": "^3.24.1"

`