Cannot read properties of undefined (reading 'Root')

[xcvoyxcpasdwr]

Describe the bug

I tried opening an issue yesterday regarding a similar problem to this issue, unfortunately I was very angry and didn't get my point across, sorry. In my case it's related to the "Select" Component. Every time I start "npm run dev" I get:

Cannot read properties of undefined (reading 'Root')

TypeError: Cannot read properties of undefined (reading 'Root')
    at /home/test/project/client/src/lib/_external/components/ui/select/index.ts:13:30
    at async ESModulesEvaluator.runInlinedModule (file:///home/test/project/client/node_modules/vite/dist/node/module-runner.js:909:3)
    at async SSRCompatModuleRunner.directRequest (file:///home/test/project/client/node_modules/vite/dist/node/module-runner.js:1067:59)
    at async SSRCompatModuleRunner.directRequest (file:///home/test/project/client/node_modules/vite/dist/node/chunks/dep-BHkUv4Z8.js:18888:22)
    at async SSRCompatModuleRunner.cachedRequest (file:///home/test/project/client/node_modules/vite/dist/node/module-runner.js:974:73)
    at async eval (/home/test/project/client/src/lib/components/Dashboard/Charts/TestChart.svelte:6:31)
    at async ESModulesEvaluator.runInlinedModule (file:///home/test/project/client/node_modules/vite/dist/node/module-runner.js:909:3)
    at async SSRCompatModuleRunner.directRequest (file:///home/test/project/client/node_modules/vite/dist/node/module-runner.js:1067:59)
    at async SSRCompatModuleRunner.directRequest (file:///home/test/project/client/node_modules/vite/dist/node/chunks/dep-BHkUv4Z8.js:18888:22)
    at async SSRCompatModuleRunner.cachedRequest (file:///home/test/project/client/node_modules/vite/dist/node/module-runner.js:974:73)

When I go into the index.ts of the Select component, make any change at all (like a console.log), the site will work.. I use the Select in two components, both of them lead to the same problem. my package.json if that helps:

	"devDependencies": {
		"@eslint/compat": "^1.2.5",
		"@eslint/js": "^9.18.0",
		"@iconify-json/lucide": "^1.2.58",
		"@internationalized/date": "^3.8.2",
		"@lucide/svelte": "^0.515.0",
		"@sveltejs/adapter-node": "^5.2.12",
		"@sveltejs/kit": "^2.22.0",
		"@sveltejs/vite-plugin-svelte": "^6.0.0",
		"@tailwindcss/vite": "^4.0.0",
		"@tanstack/table-core": "^8.21.3",
		"@types/d3-scale": "^4.0.9",
		"@types/d3-shape": "^3.1.7",
		"bits-ui": "^2.8.13",
		"clsx": "^2.1.1",
		"eslint": "^9.18.0",
		"eslint-config-prettier": "^10.0.1",
		"eslint-plugin-svelte": "^3.0.0",
		"globals": "^16.0.0",
		"layerchart": "^2.0.0-next.27",
		"prettier": "^3.4.2",
		"prettier-plugin-svelte": "^3.3.3",
		"prettier-plugin-tailwindcss": "^0.6.11",
		"svelte": "^5.0.0",
		"svelte-check": "^4.0.0",
		"tailwind-merge": "^3.3.1",
		"tailwind-variants": "^1.0.0",
		"tailwindcss": "^4.0.0",
		"tw-animate-css": "^1.3.6",
		"typescript": "^5.0.0",
		"typescript-eslint": "^8.20.0",
		"unplugin-icons": "^22.2.0",
		"vite": "^7.0.4"
	},
	"overrides": {
		"cookie": "0.7.0"
	},
	"dependencies": {
		"mode-watcher": "^1.1.0",
		"sv": "^0.8.21"
	}

I did some experiments, changed index.ts of the select and it worked once:

let Root; 
if (browser) {
	Root = SelectPrimitive.Root
}

but on subsequent restarts I get:

TypeError: vite_ssr_import_2.Root is not a function

As a workaround using Select directly from bits-ui, works reliably.. Although I'd still like to know what causes the issue since I'm very afraid that it will pop up again at a later point..

It looks to be somewhat related to the sidebar component. No error when +layout@.svelte looks like this:

	<SidebarWrapper {children} {sidebarOpen}></SidebarWrapper>

but this causes the error:

<Sidebar.Provider bind:open={() => sidebarOpen, (newOpen) => (sidebarOpen = newOpen)}>
	<AppSidebar bind:sidebarOpen />
	{@render children?.()}
</Sidebar.Provider>

(SidebarWrapper contains the exact same code)

And now i have the same issue with the command component..

If I use this in a component:

import * as Command from '$lib/external/components/ui/command/index.js';

same error.. wrapping it its own component doesnt help.. I wonder whats going on..

Is it possible, its a stupid idea probably, but the conflicting components, sidebar, command, select all have a "Root" element, could it be that they are in conflict somehow?

Reproduction

I would like to do a Stackblitz example but https://shadcn-svelte.com/repro doesnt work and https://stackblitz.com/edit/shadcn-svelte doesnt have the sidebar component..

Logs

System Info

System:
    OS: Linux 6.6 Arch Linux
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11900KF @ 3.50GHz
    Memory: 12.24 GB / 15.56 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 20.19.4 - /usr/sbin/node
    npm: 11.4.2 - /usr/sbin/npm
    pnpm: 10.13.1 - /usr/sbin/pnpm
  npmPackages:
    @lucide/svelte: ^0.515.0 => 0.515.0 
    @sveltejs/kit: ^2.22.0 => 2.26.1 
    bits-ui: ^2.8.13 => 2.8.13 
    mode-watcher: ^1.1.0 => 1.1.0 
    svelte: ^5.0.0 => 5.37.1 
    tailwindcss: ^4.0.0 => 4.1.11

Severity

blocking all usage of shadcn-svelte

[xcvoyxcpasdwr]

If I completely remove every chart from the project it also works.. there has to be some kind of conflict, trying to figure out the magical combination of components right now

[Prajwalg19]

can you post theTestChart.svelte file ?

[xcvoyxcpasdwr]

Nothing special, I'm just using the examples

[xcvoyxcpasdwr]

I think the only chance of solving this is finding out what vite is doing at that point..

[Prajwalg19]

Nothing special, I'm just using the examples

I asked that because i see that file in the stack trace. Check if there's any namespace import in any of the concerning files, because that's what i see as the root cause people face when they face issues like this.

nextauthjs/next-auth#6180 (comment)

[xcvoyxcpasdwr]

I'll check my imports maybe there is a wrong import somewhere, thanks for the tip!