Saturday, May 25, 2024
 Popular · Latest · Hot · Upcoming
147
rated 0 times [  150] [ 3]  / answers: 1 / hits: 6456  / 2 Years ago, sun, february 13, 2022, 12:00:00

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?


More From » vue.js

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



[#363] Monday, February 7, 2022, 2 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
yaquelina

Total Points: 517
Total Questions: 101
Total Answers: 96

Location: Egypt
Member since Tue, Jul 6, 2021
3 Years ago
yaquelina questions
;