Unable to access process variable in Vue3JS Vite project

Question

I am creating a vue3 application (created with Vite) that interacts with a smart contract written in Solidity and stored on Ropsten. Therefore I am using web3js to interact with my smart contracts and also web3.storage in order to store some images on IPFS. I have a .env file at the root of my project storing my API key for web3.storage :

VUE_APP_API_TOKEN=VALUE
VITE_API_TOKEN=VALUE

The problem is that apparently web3.storage expects the API token to be stored in process.env and I am unable to access the global process variable from my application. I am always getting an error Uncaught ReferenceError: process is not defined.

I think, this is linked to my usage of Vite instead of pure Vue3. I tried to export process env in the vite.config.ts file with that code but it didn't work:

export default ({ mode }) => {
   process.env = { ...process.env, ...loadEnv(mode, process.cwd(), '') };

   console.log(process.env.VITE_API_TOKEN)         //Works fine: VALUE is logged
   console.log(process.env.VUE_APP_API_TOKEN)      //Works fine: VALUE is logged

   return defineConfig({
       plugins: [vue()]
   });
}

How could I access the process variable from my vue files in order to get the values of my environment variable and make web3.storage work?

@tao thanks for the tip, I already tried with the documentation but it didn't help — OkOutside84
– OkOutside84, Commented Feb 14, 2022 at 9:00

tao · Accepted Answer · 2022-02-14 11:06:25Z

8

.env

VITE_WEB3_STORAGE_TOKEN="your_token"

SomeComponent.vue: (or any other file of your app, really):

console.log(import.meta.env.VITE_WEB3_STORAGE_TOKEN) // "your_token"

Note: as specified in vite documentation, only variables prefixed with VITE_ will be exposed:

To prevent accidentally leaking env variables to the client, only variables prefixed with VITE_ are exposed to your Vite-processed code.

answered Feb 14, 2022 at 11:06

tao

91.1k18 gold badges138 silver badges174 bronze badges

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

2 Comments

OkOutside84 Over a year ago

Okay thank you for your solution, I feel like this is the only way. The "process" global variable doesn't seem to be accessible anymore in Vue3 projects

tao Over a year ago

It's not, for precisely the reason quoted in my answer. Considering what process has access to, and what people tend to put in those environment variables, I personally think it's a sensible only to expose what's been prefixed with VITE. You can now safely use other names for stuff that should not be visible anywhere in the client.

B3none · Accepted Answer · 2022-07-25 16:22:10Z

0

If you're running the build script in CI you will need to make sure that you're creating / populating the relevant .env file before you run the build script.

answered Jul 25, 2022 at 16:22

B3none

4094 silver badges18 bronze badges

Collectives™ on Stack Overflow

Unable to access process variable in Vue3JS Vite project

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related