React Refresh Does not work.

[gaurishhs]

Hello everyone! I have a custom provider that provides all data provided by Vite from server-side vars using define in vite config.. Now whenever the page is refresh all the variables are undefined. What could be the issue?

const [AppContextProvider, useAppContext] = constate(() => {
    const { logo, title, navLinks, sidebar, footer } = useMemo(() => {
        return __CODOC_APP_CONTEXT__;
    }, []);

    const routes = useMemo(() => {
        return asyncRoutes.find(item => item.path === '/')?.children ?? [];
    }, []);

    return {
        logo,
        title,
        routes,
        sidebar,
        navLinks,
        footer
    } as AppContext;
});

[Mhamad-Raad]

I am not sure if I understood the question correctly, but if you mean that when you refresh the page (which means the page loads again from the server) it is normal behavior that the context starts being empty again, I would suggest you use local-storage or anything of that sort if you want the data to stay or have default values, use it with useEffect, like the followings:

useEffect(() => {
if (!logo) setLogo(CODOC_APP_CONTEXT.logo);
if (!title) setTitle(CODOC_APP_CONTEXT.title);
if (!navLinks) setNavLinks(CODOC_APP_CONTEXT.navLinks);
if (!sidebar) setSidebar(CODOC_APP_CONTEXT.sidebar);
if (!footer) setFooter(CODOC_APP_CONTEXT.footer);
}, [logo, title, navLinks, sidebar, footer]);

It's also a good idea to check that the CODOC_APP_CONTEXT is defined and only set it on client side.

Copy code
let appContext;
if(typeof window !== 'undefined'){
appContext = window.CODOC_APP_CONTEXT
}