Cannot read properties of undefined (reading 'Root') #2252
Replies: 19 comments 5 replies
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
i encountered this same error on the
|
Beta Was this translation helpful? Give feedback.
-
|
can you post the |
Beta Was this translation helpful? Give feedback.
-
|
Nothing special, I'm just using the examples |
Beta Was this translation helpful? Give feedback.
-
|
I think the only chance of solving this is finding out what vite is doing at that point.. |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
Theres lots of namespace imports like: But thats all from the docs. Is there a different way to import the components? |
Beta Was this translation helpful? Give feedback.
-
|
I'll check my imports maybe there is a wrong import somewhere, thanks for the tip! |
Beta Was this translation helpful? Give feedback.
-
|
I face the same issue when I use a custom component based on "error": {
"stack": "TypeError: Cannot read properties of undefined (reading 'Root')\n at /project/lib/components/ui/tooltip/index.ts:5:31\n at async ESModulesEvaluator.runInlinedModule (file:///project/node_modules/vite/dist/node/module-runner.js:910:3)\n at async SSRCompatModuleRunner.directRequest (file:///project/node_modules/vite/dist/node/module-runner.js:1068:59)\n at async SSRCompatModuleRunner.directRequest (file:///project/node_modules/vite/dist/node/chunks/dep-Bg4HVnP5.js:18888:22)\n at async SSRCompatModuleRunner.cachedRequest (file:///project/node_modules/vite/dist/node/module-runner.js:975:73)\n at async eval (/project/lib/components/TooltipComponent.svelte:5:31)\n at async ESModulesEvaluator.runInlinedModule (file:///project/node_modules/vite/dist/node/module-runner.js:910:3)\n at async SSRCompatModuleRunner.directRequest (file:///project/node_modules/vite/dist/node/module-runner.js:1068:59)\n at async SSRCompatModuleRunner.directRequest (file:///project/node_modules/vite/dist/node/chunks/dep-Bg4HVnP5.js:18888:22)\n at async SSRCompatModuleRunner.cachedRequest (file:///project/node_modules/vite/dist/node/module-runner.js:975:73)"
} |
Beta Was this translation helpful? Give feedback.
-
|
Found a workaround. Instead of importing from the index.ts just use the components directly. For simple components like button or input you can just replace:
with
For other components you'll have to import the individual elements: Sometimes there's no "root" component svelte file, than you'll have to import it from bits-ui: As far as I can tell the only downside is that theres a couple of more imports. I'd recomend going through each component you've imported through shadcn and comment out the index and update each import, one component at a time otherwise it can become a bit confusing, depending on your project size. |
Beta Was this translation helpful? Give feedback.
-
|
Facing the same issue with the |
Beta Was this translation helpful? Give feedback.
-
|
facing the same issue TypeError: Cannot read properties of undefined (reading 'Root')
at .../src/lib/components/ui/select/index.ts:13:30not sure what's causing it. sometimes it works sometimes it doesn't, always have to try clearing node_modules. sometimes it doesn't work. helps |
Beta Was this translation helpful? Give feedback.
-
|
Same here, but with Popover. Saving |
Beta Was this translation helpful? Give feedback.
-
|
Same here, with only the difference that it's If I can help by providing more info, please let me know. |
Beta Was this translation helpful? Give feedback.
-
|
Same problem with the tooltip here. Interestingly, when putting an awaited timeout immediately after the imports into |
Beta Was this translation helpful? Give feedback.
-
|
The same issue happened to me when I updated |
Beta Was this translation helpful? Give feedback.
-
|
change the installed bits-ui version on package.json work for me note that u should force it to install version |
Beta Was this translation helpful? Give feedback.
-
|
Can confirm this is happening to us, unlike the other comments |
Beta Was this translation helpful? Give feedback.
-
|
This is happening to us, and downgrading did not solve the issue. |
Beta Was this translation helpful? Give feedback.
-
|
Have you updated your components to the latest code in the registry? I made a PR not long ago that should've solved this |
Beta Was this translation helpful? Give feedback.
-
|
I'm getting it now on Drawer. Switching bits-ui versions doesn't solve the issue. It seems to be coming from 'vaul-svelte'. Used |
Beta Was this translation helpful? Give feedback.
-
|
I'm running into this as well, starting just yesterday. My case might be a bit more unique as I'm running a SvelteKit 2.16 app with Svelte 5, but also using shadcn-svelte for tailwind3 and bits-ui v1.8.0. |
Beta Was this translation helpful? Give feedback.
-
|
For us this only happens for the first SSR eval of the app's entry point, as a workaround we wrote a little Vite plugin that patches aliased bits-ui imports during SSR to fall back to a no-op component when the primitive is undefined. The plugin intercepts files in src/lib/components/ui/ (configurable) during SSR and rewrites patterns like: import { Select as SelectPrimitive } from 'bits-ui';
const SelectContent = SelectPrimitive.Content;into import NoSSR from '/path/to/nossr.svelte';
import { Select as SelectPrimitive } from 'bits-ui';
const SelectContent = SelectPrimitive?.Content ?? NoSSR;Here's the code of the relevant items:
import path from 'node:path';
import { normalizePath, type Plugin } from 'vite';
export default function ssrBitsUiSafe(opts?: {
includePathHints?: string[];
applyInProd?: boolean;
}): Plugin {
let noSSRAbs = '';
const includeHints = opts?.includePathHints ?? ['src/lib/components/ui/'];
const hasBitsUiImport = (code: string) =>
code.includes(`from 'bits-ui'`) || code.includes(`from "bits-ui"`);
const findAliases = (code: string) => {
const aliases = new Set<string>();
const importRe = /import\s*{\s*([^}]*)}\s*from\s*['"]bits-ui['"]/g;
let m: RegExpExecArray | null;
while ((m = importRe.exec(code))) {
const inside = m[1];
inside.split(',').forEach((seg) => {
const mm = seg.trim().match(/^(\w+)\s+as\s+(\w+)$/);
if (mm) aliases.add(mm[2]); // e.g. SelectPrimitive
});
}
return [...aliases];
};
const injectNoSSRImport = (code: string) => {
const line = `import NoSSR from '${noSSRAbs}';\n`;
return code.includes(line) ? code : line + code;
};
const rewriteAliasProps = (code: string, alias: string) => {
// const X = Alias.Y;
const re = new RegExp(String.raw`(^|\n)\s*const\s+(\w+)\s*=\s*${alias}\.(\w+)\s*;`, 'g');
return code.replace(re, (_full, pre, lhs, prop) => {
// always fall back to NoSSR so SSR never instantiates children that expect context
return `${pre}const ${lhs} = ${alias}?.${prop} ?? NoSSR;`;
});
};
return {
name: 'ssr-bitsui-safe',
enforce: 'pre',
apply: opts?.applyInProd ? undefined : 'serve',
configResolved(cfg) {
const root = normalizePath(cfg.root);
noSSRAbs = normalizePath(path.resolve(root, 'src/lib/patches/nossr.svelte'));
},
transform(code, id, ctx) {
if (!ctx?.ssr) return null;
const idNorm = normalizePath(id);
if (idNorm.endsWith(".svelte")) return null;
if (!includeHints.some((h) => idNorm.includes(h))) return null;
if (!hasBitsUiImport(code)) return null;
const aliases = findAliases(code);
if (aliases.length === 0) return null;
let out = injectNoSSRImport(code);
for (const alias of aliases) out = rewriteAliasProps(out, alias);
return { code: out, map: null };
}
};
}
<script>
// SSR-only shim that renders nothing
</script>Then in your import ssrBitsUiSafe from "./plugins/ssr-bitsui-safe";
...
plugins: [
ssrBitsUiSafe({
includePathHints: [
"src/lib/components/ui/select",
"src/lib/components/ui/dropdown-menu",
"src/lib/components/ui/dialog",
],
}),
...
]
...Its hacky but it does the job for us at least until this is fixed. |
Beta Was this translation helpful? Give feedback.
-
|
Running into the error complaining about
|
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
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:
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:
I did some experiments, changed index.ts of the select and it worked once:
but on subsequent restarts I get:
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:
but this causes the error:
(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.11Severity
blocking all usage of shadcn-svelte
Beta Was this translation helpful? Give feedback.
All reactions