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

DonHartman · 2018-04-13T19:30:51Z

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 · 2018-04-14T10:28:36Z

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 · 2018-04-16T11:53:30Z

...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 · 2018-06-18T18:49:40Z

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 · 2018-06-18T18:55:40Z

This issue is closed.

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

RichPC · 2018-07-03T09:24:27Z

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 · 2018-07-03T17:34:51Z

@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 · 2018-11-13T03:48:36Z

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 · 2019-01-10T21:47:44Z

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 · 2019-01-10T21:56:17Z

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

entioentio · 2019-02-26T13:29:27Z

@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 · 2019-05-30T16:11:39Z

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

ArturoBurela · 2019-06-27T15:44:36Z

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 · 2019-08-17T00:02:12Z

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

mklueh · 2019-11-01T07:27:20Z

I have the problem in my index.html, where I wanted to set the title via env variable

<title><%= VUE_APP_NAME %></title>

This does not happen when building my docker image with this Dockerfile from https://vuejs.org/v2/cookbook/dockerize-vuejs-app.html

I´ve just added @vue/cli-service-global because it could not finde the vue-cli-service out of the box

FROM node:lts-alpine

# install simple http server for serving static content
RUN npm install -g http-server @vue/cli-service-global

# make the 'app' folder the current working directory
WORKDIR /app

# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./

# install project dependencies leaving out dev dependencies
RUN npm install

# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .

# build app for production with minification
RUN npm run build

EXPOSE 8080
CMD [ "http-server", "dist" ]

genericengine2018 · 2019-11-17T15:03:55Z

guys. i tried all your ways. touch .env, build and serve again.
process always undefined in debug window of chrome ....
nevertheless, the variables now are CORRECTLY interpreted.
that is to say, it works now despite of the error msg 'process is undefined' is still there...

dingkewen · 2019-11-18T08:43:29Z

i set .env,but process is undefined . why?

dingkewen · 2019-11-18T08:48:33Z

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

oh ,that's true. why?

hello2parth · 2020-04-04T06:26:13Z

I tried following and it's not working for me.

created .env file using touch env in root directory
VUE_APP_TITLE=My App (added into env file)
Added following into component

data() {
    return {
      title: process.env.VUE_APP_TITLE,
    }
  },
  mounted() {
    console.warn(this.title);
}

Restarted vue cli service by npm run serve

Console Result: undefined

ghost · 2020-06-06T19:22:43Z

Same steps like @hello2parth done and same issue. Also if you run with docker-compose and define there environment it will not read the environement variables. This is slowly getting annoying.

vpistis · 2020-06-16T20:50:17Z

I'm having a similar problem, some var into .env was not visible into js file.
I have solved adding VUE_APP_ to all var names that I want into js code.
I don't know if this is the right solution, but this trick solve my problem.

before: BASE_URL=https://github.com/
after: VUE_APP_BASE_URL=https://github.com/

MariaIm · 2020-07-31T03:21:15Z

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!

Your solution WORKED for me

JLueke · 2020-10-21T10:32:33Z

I'm having a similar problem, some var into .env was not visible into js file.
I have solved adding VUE_APP_ to all var names that I want into js code.
I don't know if this is the right solution, but this trick solve my problem.

before: BASE_URL=https://github.com/
after: VUE_APP_BASE_URL=https://github.com/

Adding VUE_APP_ as prefix worked for me, too.

stitch · 2020-11-02T14:42:01Z

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

This is definitely a must add to the manual. The manual now does not make it clear that these values cannot be used in templates, only in javascript objects. Thank you for figuring this out and sharing it!
https://cli.vuejs.org/guide/mode-and-env.html#example-staging-mode

LynnWonder · 2021-03-22T11:44:16Z

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

I'm having a similar problem. Any methods to fix it?

LynnWonder · 2021-03-22T12:27:14Z

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

I'm having a similar problem. Any methods to fix it?

I think i have understood it. Firstly you can use process.env in data or computed. If you want to use it in template, you should make the process.env in prototype. As follows:

Vue.prototype.process = Object.freeze({
  env: process.env,
})

drascom · 2021-06-16T17:06:33Z

hi everybody, i was struggling for an hour to solve the same problem. i tried every changing mentioned above than i noticed that i'm using " : " instead of " = "
be careful what you are typing :)

OpenSauce · 2021-08-06T18:25:46Z

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!

Been struggling with this for so long, thanks!

dranduil · 2022-04-18T15:42:18Z

I'm having a similar problem, some var into .env was not visible into js file. I have solved adding VUE_APP_ to all var names that I want into js code. I don't know if this is the right solution, but this trick solve my problem.

before: BASE_URL=https://github.com/ after: VUE_APP_BASE_URL=https://github.com/

TOP that's work for me

LinusBorg closed this as completed Apr 14, 2018

vpiskunov mentioned this issue Jun 5, 2019

Clean install: HMR broken! nativescript-vue/vue-cli-plugin-nativescript-vue#16

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

DonHartman commented Apr 13, 2018

LinusBorg commented Apr 14, 2018

DonHartman commented Apr 16, 2018

evinkuraga commented Jun 18, 2018

LinusBorg commented Jun 18, 2018

RichPC commented Jul 3, 2018

FossPrime commented Jul 3, 2018

Frayion commented Nov 13, 2018 •

edited

Loading

mouafa commented Jan 10, 2019

LinusBorg commented Jan 10, 2019

entioentio commented Feb 26, 2019 •

edited

Loading

ravindragaikwad commented May 30, 2019

ArturoBurela commented Jun 27, 2019

mk1novotny commented Aug 17, 2019

mklueh commented Nov 1, 2019

genericengine2018 commented Nov 17, 2019

dingkewen commented Nov 18, 2019

dingkewen commented Nov 18, 2019

hello2parth commented Apr 4, 2020

ghost commented Jun 6, 2020

vpistis commented Jun 16, 2020 •

edited

Loading

MariaIm commented Jul 31, 2020

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.

JLueke commented Oct 21, 2020

stitch commented Nov 2, 2020

LynnWonder commented Mar 22, 2021

LynnWonder commented Mar 22, 2021

drascom commented Jun 16, 2021 •

edited

Loading

OpenSauce commented Aug 6, 2021

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.

dranduil commented Apr 18, 2022

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

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

Comments

DonHartman commented Apr 13, 2018

Version

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

LinusBorg commented Apr 14, 2018

DonHartman commented Apr 16, 2018

evinkuraga commented Jun 18, 2018

LinusBorg commented Jun 18, 2018

RichPC commented Jul 3, 2018

FossPrime commented Jul 3, 2018

Frayion commented Nov 13, 2018 • edited Loading

mouafa commented Jan 10, 2019

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.

LinusBorg commented Jan 10, 2019

entioentio commented Feb 26, 2019 • edited Loading

ravindragaikwad commented May 30, 2019

ArturoBurela commented Jun 27, 2019

mk1novotny commented Aug 17, 2019

mklueh commented Nov 1, 2019

genericengine2018 commented Nov 17, 2019

dingkewen commented Nov 18, 2019

dingkewen commented Nov 18, 2019

hello2parth commented Apr 4, 2020

ghost commented Jun 6, 2020

vpistis commented Jun 16, 2020 • edited Loading

MariaIm commented Jul 31, 2020

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.

JLueke commented Oct 21, 2020

stitch commented Nov 2, 2020

LynnWonder commented Mar 22, 2021

LynnWonder commented Mar 22, 2021

drascom commented Jun 16, 2021 • edited Loading

OpenSauce commented Aug 6, 2021

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.

dranduil commented Apr 18, 2022

Frayion commented Nov 13, 2018 •

edited

Loading

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.

entioentio commented Feb 26, 2019 •

edited

Loading

vpistis commented Jun 16, 2020 •

edited

Loading

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.

drascom commented Jun 16, 2021 •

edited

Loading

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.