T
TanStack•4mo ago
adverse-sapphire

UI Elements stop working w/ beforeLoad

I'm encountering a strange bug where if I call getCookie in my route, the UI elements (in this case tabs) don't work. Here is the code: 
export const Route = createRootRoute({
    beforeLoad: async ({ location: { pathname } }) => {
        // const userId = getCookie("userId");
        console.log(pathname);
        return;
    },
    head: () => ({
        meta: [
            {
                charSet: "utf-8",
            },
            {
                name: "viewport",
                content: "width=device-width, initial-scale=1",
            },
            {
                title: "Test Demo",
            },
        ],
        links: [
            {
                rel: "stylesheet",
                href: appCss,
            },
        ],
    }),
    component: RootComponent,
});
export const Route = createRootRoute({
    beforeLoad: async ({ location: { pathname } }) => {
        // const userId = getCookie("userId");
        console.log(pathname);
        return;
    },
    head: () => ({
        meta: [
            {
                charSet: "utf-8",
            },
            {
                name: "viewport",
                content: "width=device-width, initial-scale=1",
            },
            {
                title: "Test Demo",
            },
        ],
        links: [
            {
                rel: "stylesheet",
                href: appCss,
            },
        ],
    }),
    component: RootComponent,
});
If I uncomment getCookie("userId"), suddenly my UI is not interactable anymore and I get this console error: 
Uncaught (in promise) SyntaxError: The requested module '/node_modules/use-sync-external-store/shim/with-selector.js?v=5d864894' does not provide an export named 'useSyncExternalStoreWithSelector' (at index.js?v=5d864894:1:10)
Uncaught (in promise) SyntaxError: The requested module '/node_modules/use-sync-external-store/shim/with-selector.js?v=5d864894' does not provide an export named 'useSyncExternalStoreWithSelector' (at index.js?v=5d864894:1:10)
7 Replies
national-gold
national-gold•4mo ago
what is getCookie ?
adverse-sapphire
adverse-sapphireOP•4mo ago
import { getCookie, setCookie } from "@tanstack/react-start/server";
national-gold
national-gold•4mo ago
you cannot call server stuff in beforeLoad since this runs on the client as well if you want to execute some function on the client always, then wrap in into a server function
adverse-sapphire
adverse-sapphireOP•4mo ago
I see well I want to execute this function on the server to redirect/route clients to specific pages (via createFileRoute) if they have a cookie set. so where would be the best place to put this?
national-gold
national-gold•4mo ago
wrap it in a server function then and execute it in beforeLoad but be aware that this executes for each navigation so you might want to cache it
adverse-sapphire
adverse-sapphireOP•4mo ago
would I cache it via this: createServerFnStaticCache? I also was looking into middlewares but couldn't figure out how to execute a middleware call into the createFileRoute function
national-gold
national-gold•4mo ago
you could just use query for this

Did you find this page helpful?