'process' var is undefined in Vue / Typescript component

Question

I am having a problem getting .env variables working in my Vue app. After npm install process this was the only syntax that didn't throw an error when trying to import.

import * as process from 'process';

Before this I also had the following error:

Cannot find name 'process'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node`.

I ran this install and added "node" to types in my tsconfig file.

I have a member variable defined like so,

const testVar = process.env.TEST_VAR

and have tried both TEST_VAR=just test and TEST_VAR="just test" inside my .env file.

The .env file itself is placed in the root folder of the project, ie. outside the src folder, but I have tried placing it inside the src folder also.

Despite all that, the var is coming back undefined.

mounted(){
 console.log('ENV TEST -> ', this.testVar)
 alert(`ENV2 : ${this.testVar}`)
 ...
}

I'd be very grateful for any help solving this. Thanks!

Are you sure you installed the right package? Reading the Readme on npm you can read This module mostly exists to provide the nextTick functionality and little more. Maybe everything you needed was declare const process? — Christian Vincenzo Traina
– Christian Vincenzo Traina, Commented Jul 31, 2022 at 20:32
@CristianTraìna perhaps the package is not correct. I will need to check. I have also installed dotenv but can't figure out how to use it in my component using Typescript. — mikeym
– mikeym, Commented Jul 31, 2022 at 20:40
It's a mistake to use and import process package. process is exposed by a bundler, which is unknown in your case. For Webpack/Vue CLI webpack-env is used to provide respective TS types, can be used in types tsconfig section — Estus Flask
– Estus Flask, Commented Aug 1, 2022 at 6:36

tpliakas · Accepted Answer · 2022-07-31 22:51:02Z

2

Only variables that start with VUE_APP_ will be statically embedded into the client bundle. Vue docs

And then it will be accessible in the components

mounted() {
 console.log(process.env.VUE_APP_TEST_VAR)
}

answered Jul 31, 2022 at 22:51

tpliakas

1,1291 gold badge9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mikeym Over a year ago

This did the trick. Thanks!

Collectives™ on Stack Overflow

'process' var is undefined in Vue / Typescript component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related