Vite: process.env variables are not working inside loader

[mikkpokk]

What version of Remix are you using?

2.2.0

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

Define custom environment variable on .env file:

TEST="Custom value"
REMIX_TEST="Custom value"
VITE_TEST="Custom value"

On root.tsx add loader

export const loader: LoaderFunction = async (args) => {
    console.log(process.env.TEST) // outputs undefined
    console.log(process.env.REMIX_TEST) // outputs undefined
    console.log(import.meta.env.VITE_TEST) // outputs Custom value

     return {
         test: process.env.TEST, // outputs undefined
         remix_test: process.env.REMIX_TEST, // outputs undefined
         vite_test: import.meta.env.VITE_TEST, // outputs Custom value
     }
}

Expected Behavior

Server side code should be able to read data from process.env. I believe using import.meta.env.VITE_TEST on SSR code reveals that variable to client side code as expected by Vite documentation.

Maybe I'm missing something? Or it's a bug?

Actual Behavior

Trying to get any process.env variables inside loaders return always undefined instead.

[mikkpokk]

Adding import 'dotenv/config' inside any *.server.ts file, which are used in all the routes, will fix the issue on dev server, but doesn't fix it on build.

[markdalgleish]

This was an oversight on my part as I misunderstood how Vite handles .env files. I should have a fix for this soon, but you can use this workaround in the meantime:

import { unstable_vitePlugin as remix } from "@remix-run/dev";
import { ConfigEnv, defineConfig, loadEnv } from "vite";

export default ({ mode }: ConfigEnv) => {
  // Here we add env vars from .env files to process.env.
  // Note the last arg is a blank string so that all env vars
  // are loaded, not just those starting with "VITE_"
  Object.assign(process.env, loadEnv(mode, process.cwd(), ""));

  return defineConfig({
    plugins: [
      remix(),
      // ...etc
    ],
  });
};

[markdalgleish]

This has been fixed in #7958 and will be available in the next release. If you'd like, you can update to the latest nightly to get this fix. If you're still having issues, let me know.

[github-actions]

🤖 Hello there,

We just published version 2.3.0-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 2.3.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[mtin79]

HI @markdalgleish, upgraded to 2.3.0 and when i run nom run build and nom run start all the variables i have in .env are undefined when i try to get their values via process.env.<VariableName> in loader functions.

i am not using vite but the regular remix server config as of ^2.0.0

[markdalgleish]

@mtin79 Could you share a minimal repro?

[kolorfilm]

This was an oversight on my part as I misunderstood how Vite handles .env files. I should have a fix for this soon, but you can use this workaround in the meantime:

import { unstable_vitePlugin as remix } from "@remix-run/dev";
import { ConfigEnv, defineConfig, loadEnv } from "vite";

export default ({ mode }: ConfigEnv) => {
  // Here we add env vars from .env files to process.env.
  // Note the last arg is a blank string so that all env vars
  // are loaded, not just those starting with "VITE_"
  Object.assign(process.env, loadEnv(mode, process.cwd(), ""));

  return defineConfig({
    plugins: [
      remix(),
      // ...etc
    ],
  });
};

I tried that as well and I still not seeing any process.env variables in my react code.

It says: Uncaught ReferenceError: process is not defined when I try to log/access them.

[kiliman]

You can't access process.env inside your React components because they will render on both the client and the server, and the browser doesn't have access to process.

You'll need to send the desired environment variables from your root loader.

https://remix.run/docs/en/main/guides/envvars#browser-environment-variables

[AdityaSaroj]

This was an oversight on my part as I misunderstood how Vite handles .env files. I should have a fix for this soon, but you can use this workaround in the meantime:

import { unstable_vitePlugin as remix } from "@remix-run/dev";
import { ConfigEnv, defineConfig, loadEnv } from "vite";

export default ({ mode }: ConfigEnv) => {
  // Here we add env vars from .env files to process.env.
  // Note the last arg is a blank string so that all env vars
  // are loaded, not just those starting with "VITE_"
  Object.assign(process.env, loadEnv(mode, process.cwd(), ""));

  return defineConfig({
    plugins: [
      remix(),
      // ...etc
    ],
  });
};

I tried that as well and I still not seeing any process.env variables in my react code.

It says: Uncaught ReferenceError: process is not defined when I try to log/access them.

Did you manage to make this work?

[kolorfilm]

This was an oversight on my part as I misunderstood how Vite handles .env files. I should have a fix for this soon, but you can use this workaround in the meantime:

I tried that as well and I still not seeing any process.env variables in my react code.
It says: Uncaught ReferenceError: process is not defined when I try to log/access them.

Did you manage to make this work?

Yes they implemented a fix in one of the last versions. See here: vitejs/vite#15173