Guidance on environment variables

[victoralvelais]

The Remix docs advise on accessing environment variables using the loader functions, but I'm running into a weird issue accessing them. Everything works as intended in dev mode, but it changes when I deploy to Netlify.

console.log(
    'ENV',
    process,
    process.env,
    process.env.GA_TRACKING_ID
  )

gives me this response:

[Remix server handler] ENV {
  env: [Object: null prototype] {
    GA_TRACKING_ID: "G-BLAHBLAH",
    ...other variables
  }
} {} undefined

I can access the process object as a whole and pass all its contents, but it passes an empty object for env and undefined for the variable. Does anyone know what I might be missing or have guidance on handling env with this template? Or why I might be experiencing this disconnect. Idk how to inject env into the netlify serve process so I'm testing this on my deploy.

[victoralvelais]

I figured it out. Vite uses a different syntax for the environment variables, import.meta.env instead of process.env. I tried that before and it didn’t work, but the issue is that it requires the VITE_ prefix to expose these variables to the client. I didn’t know that included the loader functions since there was no issues in Remix dev, but I ran into this double gotcha.

I also want to continue using process.env instead of the other syntax, so I added it back here, filtering for the VITE_ prefix:

import { vitePlugin as remix } from "@remix-run/dev";
import tsconfigPaths from "vite-tsconfig-paths";
import { defineConfig, loadEnv } from 'vite';
import { netlifyPlugin } from "@netlify/remix-edge-adapter/plugin";

export default ({ mode }: { mode: string }) => {
  const env = loadEnv(mode, process.cwd(), 'VITE_')

  return defineConfig({
      plugins: [
          remix(),
          netlifyPlugin(),
          tsconfigPaths(),
      ],
      define: {
        'process.env': env
      }
  });
}