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>
  );
});