T
TanStack•2w ago
wise-white

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
fascinating-indigo
fascinating-indigo•2w ago
what is getCookie ?
wise-white
wise-whiteOP•2w ago
import { getCookie, setCookie } from "@tanstack/react-start/server";
fascinating-indigo
fascinating-indigo•2w 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
wise-white
wise-whiteOP•2w 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?
fascinating-indigo
fascinating-indigo•2w 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
wise-white
wise-whiteOP•2w 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
fascinating-indigo
fascinating-indigo•2w ago
you could just use query for this

Did you find this page helpful?