Remix "process is not defined" in the browser/edge bundle in CI

process is a Node global. When client-side code or an edge-runtime deploy reads process.env, the reference fails because neither the browser nor the edge runtime defines process. Read env only on the server, or expose values through the loader.

What this error means

The browser console or an edge deploy throws "ReferenceError: process is not defined", or the build injects an undefined value where process.env.X was read in a component.

remix

Uncaught ReferenceError: process is not defined
    at app-entry.client-abc123.js:1:842

Common causes

Reading process.env in client code

A component or client module reads process.env.SOMETHING; since process is not defined in the browser, it throws at runtime.

An edge runtime without a Node process global

Deploying the server bundle to an edge target (Cloudflare Workers, Vercel Edge) removes the Node process global, so server code that reads process.env directly breaks.

How to fix it

Pass server values through the loader

Read env only inside loader/action on the server.
Return the needed values to the component as loader data.
Consume them with useLoaderData instead of process.env.

app/routes/_index.tsx

export async function loader() {
  return json({ apiBase: process.env.API_BASE });
}
// component: const { apiBase } = useLoaderData<typeof loader>();

Use the edge adapter env binding

On an edge target, read env from the runtime binding the adapter provides (for example the Cloudflare context.env) instead of process.env.

How to prevent it

Never reference process in client code.
Read env in loaders/actions and pass results down as loader data.
On edge targets, use the adapter env binding, not process.env.