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?

Answer 1

.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.