Nx serve not loading .env variable changes with monorepo format (Vite/Vue)

[NitroG42]

Current Behavior

Using a vite/vue scaffold, running the project through a monorepo architecture and using nx serve myapp with a .env.local file containing variables

when we change a variable from .env, the page will reload, but the variable will match the previous value. We have to restart the nx serve to make it use the new value.

Tested directly with vite serve, it does work : [vite] .env.local changed, restarting server...; but not through nx. I wonder if it's caused by the daemon ? (https://github.com/nrwl/nx/pull/22786)

Expected Behavior

Modifying the .env.local restart the nx/vite server.

GitHub Repo

https://github.com/NitroG42/nxenv

Steps to Reproduce

1. start the server npm run app
2. Test should be displayed
3. Change "Test" string in .env.local
4. The page should change after reload, it doesn't.

Nx Report

NX   Report complete - copy this into the issue template

Node   : 20.11.1
OS     : darwin-arm64
npm    : 10.2.4

nx (global)        : 18.3.3
nx                 : 18.3.4
@nx/js             : 18.3.4
@nx/linter         : 18.3.4
@nx/eslint         : 18.3.4
@nx/workspace      : 18.3.4
@nx/devkit         : 18.3.4
@nx/eslint-plugin  : 18.3.4
@nrwl/tao          : 18.3.4
@nx/vite           : 18.3.4
@nx/vue            : 18.3.4
@nx/web            : 18.3.4
typescript         : 5.4.5
---------------------------------------
Registered Plugins:
@nx/eslint/plugin
@nx/vite/plugin

Failure Logs

No response

Package Manager Version

No response

Operating System

• [X] macOS
• [ ] Linux
• [X] Windows
• [ ] Other (Please specify)

Additional Information

No response

[creotip]

It's absolutely correct behaviour and not related to NX. Vite(or any other build tool) hot reload doesn't watch on .env file changes.

[NitroG42]

It's absolutely correct behaviour and not related to NX. Vite(or any other build tool) hot reload doesn't watch on .env file changes.

I can make another sample where you'll see that Vite definitelly does that ! (though with vue 2 and vue-cli it didn't). With a non-monorepo scaffold + NX, it also works

also, as i put in the first post, modifying the .env cause the following logs : (on non-monorepo setup)

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

[jaysoo]

The issue here is that Nx is loading the .env.local from the project folder, which is intentional. When Vite reloads itself, it is still inheriting the environment variable set by Nx since Vite process is spawned from Nx.

The workaround for now is to use npx vite dev from the app folder, which circumvents the Nx process.

To skip or unload from .env.local file requires changes to the Nx core. Stay tuned!

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.