vue-cli-service serve does not set process.env.NODE_ENV, or any environmental variables. "process is not defined".

[DonHartman]

Version

2.9.3

Reproduction link

https://github.com/DonHartman/vue-bug

Steps to reproduce

Clone the linked repo. (or Create a .env file for a new vue project in accordance with https://github.com/vuejs/vue-cli/blob/dev/docs/env.md, and give VUE_APP_TEST a value, then use it in code.)

Serve the project with "npm run serve" (I used powershell, if it makes a difference).

View the served app in a browser with dev tools open, I've included a "debugger;" line above the issue.

What is expected?

According to https://github.com/vuejs/vue-cli/blob/dev/docs/env.md , process.env.VUE_APP_TEST should have the "sample" value .

What is actually happening?

The code that accesses "process" throws the error "process is not defined".

---

The github repo linked has the fully initialized project (the first commit is auto-generated by vue-cli, the second is my minimal changes to recreate the issue). It can likely be reproduced with much less code, but I wanted to emphasize that it is a problem out-of-the-box with vue-cli, so I only made minimal changes to the pre-made project instead of a minimal project.

These are the settings I used to create it:
Run "vue create "
Choose manual settings
Typescript, Router, Vuex, Linkter / Formatter
yes, class style components
yes, babel polyfills
TSLint
Lint on save
In dedicated config files

[LinusBorg]

From the documentation that you linked to:

You can specify env variables by placing the following files in your project root:

Your .env file is in /src, so it's in the wrong place.

[DonHartman]

...thanks.
I swear I tried putting it everywhere (including root), but eventually decided since 'process' was not defined that something higher up had to be the problem. I would have expected the error to be 'process.env doesn't not have a definition for VUE_APP_TEST', if I just had the wrong location for the file.

It's finally working this morning though, so I'm happy.

[evinkuraga]

Getting similar issue. I have a .env in the root directory. When trying to console.log from a component ( console.log(process.env.VUE_APP_TEST), i get an undefined (even though it exists in the .env file).

When console logging process.env , it does actually give me the BASE_URL and NODE_ENV, but those are values that are probably set as defaults somewhere. I have no way to change them or get it to pick up the .env file variables.

[LinusBorg]

This issue is closed.

Either ask for help on forum.vuejs.org or open a new issue.

[RichPC]

For anyone else finding this, if you're using vue-cli-service serve remember to restart the service after adding new variables to your .env files.

[FossPrime]

@RichPC I did... I still get process not defined in the debugger... totally baffled there. Then I tried incognito, which wasn't using the source map by default and to my surprise
process.env.SOCKET_ENDPOINT.includes('localhost') produces Object({"VUE_APP_DEBUG":"true","NODE_ENV":"development","BASE_URL":"/"}).SOCKET_ENDPOINT, every time it's used. Your mileage may vary based on what version of chrome debugger you're on.

[Frayion]

Getting similar issue. I have a .env in the root directory. When trying to console.log from a component ( console.log(process.env.VUE_APP_TEST), i get an undefined (even though it exists in the .env file).

When console logging process.env , it does actually give me the BASE_URL and NODE_ENV, but those are values that are probably set as defaults somewhere. I have no way to change them or get it to pick up the .env file variables.

Same problem as well....

I tried starting from scratch using Vue Cli3 to create a new project and also tried using the vue webpack template. None of them works!
I tried it in root and /src then tried console.log() in main.js other .js and .vue file!

[mouafa]

If someone stumbles in this as I did, it's not vue-cli fault, somehow if you create the file via a text editor (vscode in my case) node fs module can't read it, I couldn't even do cat .env

the solution is to use the terminal, run touch .env in your project root folder, a new .env file will be created and node fs could read it.

The first .env was created with touch .env command, and you could see that it's using the proper icon.
The second one was created from vscode.
I don't know what's the difference, but apparently not all .env are a .env 🙈

happy coding!

[LinusBorg]

I always create my .env files from within vscode, so the problem must be related to your system in some way.

[entioentio]

@mouafa thx, helped in my case
@LinusBorg files created with phpstorm and fs couldn't read them. Tried chowning and chmoddig, didn't help.
But I don't think it's directly related to to vue-cli

[ravindragaikwad]

I fixed it by running
npm run build
npm run dev
then it started reading the env values.

[ArturoBurela]

Getting similar issue. I have a .env in the root directory. When trying to console.log from a component ( console.log(process.env.VUE_APP_TEST), i get an undefined (even though it exists in the .env file).
When console logging process.env , it does actually give me the BASE_URL and NODE_ENV, but those are values that are probably set as defaults somewhere. I have no way to change them or get it to pick up the .env file variables.

Same problem as well....

I tried starting from scratch using Vue Cli3 to create a new project and also tried using the vue webpack template. None of them works!
I tried it in root and /src then tried console.log() in main.js other .js and .vue file!

I have the same problem too! Were you able to solve it?

[mk1novotny]

For me helps not to place process.env.VUE_APP_* directly, but
data() { return { version: process.env.VUE_APP_VERSION } }
then use version variable