Changing environment variables restarts Vite server but doesn't actually update value

[VHall1]

Reproduction

vite.config.js

import { vitePlugin as remix } from "@remix-run/dev";
import { installGlobals } from "@remix-run/node";
import { defineConfig } from "vite";

installGlobals();

export default defineConfig({
  plugins: [remix()],
});

Step 1

.env

TEST_VARIABLE="test"

_index.js

export default function Index() {
  return <p>hello</p>;
}

export function loader() {
  console.log(process.env.TEST_VARIABLE);
}

Prints "test" on the server console.

Step 2

Change the variable value:

.env

TEST_VARIABLE="another test"

Vite will print the following in the console:

[vite] .env changed, restarting server...
[vite] server restarted.

The server restarts, but the loader still prints "test" rather than "another test".

System Info

System:
  OS: Windows 11 10.0.22631
  CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor
  Memory: 22.05 GB / 31.92 GB
Binaries:
  Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
  Yarn: 1.22.21 - ~\AppData\Roaming\npm\yarn.CMD
  npm: 10.2.5 - C:\Program Files\nodejs\npm.CMD
  pnpm: 8.11.0 - ~\AppData\Roaming\npm\pnpm.CMD
Browsers:
  Edge: Chromium (123.0.2420.97)
  Internet Explorer: 11.0.22621.3527
npmPackages:
  @remix-run/dev: ^2.9.2 => 2.9.2
  @remix-run/node: ^2.9.2 => 2.9.2
  @remix-run/react: ^2.9.2 => 2.9.2
  @remix-run/serve: ^2.9.2 => 2.9.2
  vite: ^5.1.0 => 5.2.11

Used Package Manager

npm

Expected Behavior

After changing the environment variable, the server should restart and the new value should be applied.

Actual Behavior

The server restarts, but the value doesn't actually change (only after the server is manually stopped/started).

[VHall1]

Think I might have figured out why. It seems like the Remix plugin is loading .env by using Vite's loadEnv helper and assigns the values returned to process.env. However, it seems like loadEnv reads directly from process.env and forces those values over the parsed values it reads from .env. So, if the file changes while the dev server is running, it will be picked up as a change and will restart the server (as expected), however, since the old values have been assigned to process.env, those old values will take precedence over the new values in .env. I'm not sure if this is a bug with Vite or just if we shouldn't be assigning loadEnv's result directly to process.env as Vite seems to use it internally.

Remix Plugin

remix/packages/remix-dev/vite/plugin.ts

Line 1019 in c3efad3

vite.loadEnv(

Vite Source
https://github.com/vitejs/vite/blob/feae09fdfab505e58950c915fe5d8dd103d5ffb9/packages/vite/src/node/env.ts#L54

[carry0987]

Think I might have figured out why. It seems like the Remix plugin is loading .env by using Vite's loadEnv helper and assigns the values returned to process.env. However, it seems like loadEnv reads directly from process.env and forces those values over the parsed values it reads from .env. So, if the file changes while the dev server is running, it will be...

@VHall1 I just found a way to resolve it, but I still hope Remix official team to fix it.
Here is the updated code for vite.config.ts:

import { vitePlugin as remix } from '@remix-run/dev';
import { defineConfig, loadEnv } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig(({ mode }) => {
    // Load environment variables based on the mode (e.g. development, production)
    const env = loadEnv(mode, process.cwd(), '');

    return {
        server: {
            host: '127.0.0.1',
            port: Number(env.PORT) || 3000,
            strictPort: true
        },
        plugins: [
            remix({
                future: {
                    v3_fetcherPersist: true,
                    v3_relativeSplatPath: true,
                    v3_throwAbortReason: true
                },
                serverModuleFormat: 'esm'
            }),
            tsconfigPaths()
        ]
    };
});

Project Information

npmPackages:
  @remix-run/dev: ^2.9.2 => 2.9.2
  @remix-run/node: ^2.9.2 => 2.9.2
  @remix-run/react: ^2.9.2 => 2.9.2
  @remix-run/serve: ^2.9.2 => 2.9.2
  vite: ^5.1.0 => 5.3.1

By doing this, we explicitly load the environment variables using Vite's loadEnv helper every time the configuration is loaded. This ensures that the latest changes in the .env file are applied even after the server restarts.

Hope this helps, and I look forward to an official fix from the Remix team!