TanStackT
TanStack•11mo ago•
2 replies
ordinary-sapphire

how to pass a process.env value from SSR context to client?

I have a .env variable for my API (let's say process.env.SERVER_API) and I want to make it available in my client. one way I thought to do this was context so my file route components could access it as:

const {apiBase} = Route.useRouteContext();


my implementation was:

declare global {
  interface Window {
    SERVER_API: string;
  }
}

export function createRouter() {
  const queryClient = getQueryClient();
  const SERVER_API = process.env[API_BASE_URL_ENV_VAR];
  window.SERVER_API = process.env[API_BASE_URL_ENV_VAR];

  if (SERVER_API === undefined) {
    throw new Error(`Missing environment variable: ${API_BASE_URL_ENV_VAR}`);
  }

  console.log({env: import.meta.env});

  return routerWithQueryClient(
    createTanStackRouter({
      routeTree,
      context: {queryClient, SERVER_API},
      defaultPreload: 'intent',
      defaultErrorComponent: DefaultCatchBoundary,
      defaultNotFoundComponent: () => <NotFound />,
    }),
    queryClient,
  );
}


the problem is, in ssr.rsx process.env.SERVER_API resolves to a value but in the client process.env.SERVER_API is undefined.

is there a way to accomplish what I'm trying to do here without adding the VITE_ prefix? I would prefer to use one env variable and not duplicate it for the client
Was this page helpful?