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!

[yasz]

Any update here?

[yasz]

I added this in entry.server.tsx

import dotenv from "dotenv";

const result = dotenv.config();

for (const key in result.parsed) {
  if (result.parsed.hasOwnProperty(key)) {
    process.env[key] = result.parsed[key];
  }
}

[github-actions]

Thank you for opening this issue, and our apologies we haven't gotten around to it yet!

With the release of React Router v7 we are sun-setting continued development/maintenance on Remix v2. If you have not already upgraded to React Router v7, we recommend you do so. We've tried to make the upgrade process as smooth as possible with our Future Flags. We are now in the process of cleaning up outdated issues and pull requests to improve the overall hygiene of our repositories.

We plan to continue to address 2 types of issues in Remix v2:

• Bugs that pose security concerns
• Bugs that prevent upgrading to React Router v7

If you believe this issue meets one of those criteria, please respond or create a new issue.

For all other issues, ongoing maintenance will be happening in React Router v7, so:

• If this is a bug, please reopen this issue in that repo with a new minimal reproduction against v7
• If this is a feature request, please open a new Proposal Discussion in React Router, and if it gets enough community support it can be considered for implementation

If you have any questions you can always reach out on Discord. Thanks again for providing feedback and helping us make our framework even better!