.env taking priority over .env.local

Describe the bug

I have an API with a VITE_API_URL environment variable that I use to change where the client is pointing depending whether it’s local or in production.

I have the variables declared in .env and an override in .env.local as follows.

.env

VITE_API_URL=https://example.com/graphql

.env.local

VITE_API_URL=http://localhost:8888/graphql

I then integrate the environment variable with the following and the variable works.

const client = new ApolloClient({
  uri: import.meta.env.VITE_API_URL,
  // rest of config...
})

When developing locally with the Vite dev server, the client uses the value from .env instead of .env.local.

I was under the impression that .env values would act as defaults and that .env.local would override any variables with the same name.

Reproduction

n/a

System Info

System:
    OS: Linux 4.19 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-6850K CPU @ 3.60GHz
    Memory: 24.78 GB / 50.14 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.7.0 - ~/.nvm/versions/node/v16.7.0/bin/node
    Yarn: 1.16.0 - /mnt/c/Users/Ian/AppData/Roaming/npm/yarn
    npm: 7.20.3 - ~/.nvm/versions/node/v16.7.0/bin/npm
    Watchman: 2021.06.07.00 - /home/linuxbrew/.linuxbrew/bin/watchman
  npmPackages:
    @vitejs/plugin-vue: ^2.0.0 => 2.0.1 
    vite: ^2.8.1 => 2.8.1

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[poyoho]

sorry, I mean your expect is right 😂

[Soviut]

@poyoho I just figured it out. That documentation you quoted is talking about system environment variables not being replaced by .env variables and that jogged my mind.

Well I’m using Netlify and need to run netlify dev to load functions. Netlify runs npm run dev and also loads the .env so this becomes a “system” environment variable in the netlify environment. When I just run npm run dev on its own, the .env.local gets priority.

So now I either stick with my solution where I put local values into .env and build values in .env.production, or I need to figure out how to tell Netlify not to load the .env file so it won’t turn them into system values.