How toAccess Remix's loaders data in entry.client

If you need to run some code in app/entry.client.tsx before hydrating your Remix application, you can leverage the global window.__remixContext object to access the data.

First return the data you need from a route loader, e.g from app/root.tsx.

export async function loader() { let env = { GA_ID: process.env.GA_ID! }; return json({ env }) } // more code

Then in your entry.client you can access it.

import { RemixBrowser } from "@remix-run/react"; import { startTransition, StrictMode } from "react"; import { hydrateRoot } from "react-dom/client"; const { GA_ID } = window.__remixContext.state.loaderData.root.env; // use value here startTransition(() => { hydrateRoot( document, <StrictMode> <RemixBrowser /> </StrictMode> ); });