isomorphic (browser & server) env vars for use in components

[harrygr]

In my Remix app I use the recommended approach to expose certain (non-secret) environment variables to the browser.

I then made an isomorphic getPublicEnv function to return the value of one of these predefined variables. If called on the server it will return it from the config.server.ts module; and on the client will get it from window.appConfig:

import { config } from "~/config.server";

/**
 * Get an env value that's available on the `window` object for client side but also needs to
 * be accessed server side.
 * @param key
 * @returns
 */
export function getPublicEnv<T extends keyof PublicConfig>(
  key: T
): PublicConfig[T] {
  return typeof window === "undefined"
    ? config[key]
    : window.appConfig[key];
}

This is very useful for certain things like public-facing api keys that are used in a React component, say to render some URL.

E.g.

const MapImage = ({lat,lng}) => {
  return <img src={`https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/${lng},${lat}?access_token=${getPublicEnv('mapboxToken')}`} />
}

Because this component itself may be rendered by both the client and server, the getPublicEnv function must be isomorphic.

This works fine with the Remix server and bundler, but since migrating to Vite I get an error when bundling:

Error: [commonjs--resolver] Server-only module referenced by client

This is not too surprising and likely a result of how Vite separates client and server code.

My question is how to enable this behaviour with Vite. Given that React components in Remix themselves are isomorphic, I'd expect this to be possible.

[kiliman]

Use the serverOnly$ export from vite-env-only instead of naming it *.server

The .server suffix should only be applied to a file where all exports are on the server.

See this example:
https://github.com/kiliman/remix-global-data/blob/main/app/global-data.ts#L23

[sergiodxa]

I think it's simpler to define window.process.env client-side, then you can just do process.env.SOMETHING, check https://sergiodxa.com/tutorials/use-process-env-client-side-with-remix

[harrygr]

Thanks for the suggestion. This looks like a possible solution, but it seems a little hacky. I prefer @kiliman's solution