R
Railway15mo ago
Olllie

Struggling to access env variables in my react projects frontend

Hey everyone, I'm encountering issues while trying to access my environment variables in the front end. I've simplified the process as shown in my screenshot below and am currently attempting to console.log the variable for testing purposes. At the moment, it's displaying as "undefined" in my browser console. However, as depicted in my second screenshot, it's logging correctly in the railway deploy logs. Do any of you have any ideas or suggestions? Your assistance would be greatly appreciated.
12 Replies
Percy
Percy15mo ago
Project ID: ffbaaf13-8e19-48ac-9ac5-f25bae33aea5
Brody
Brody15mo ago
^
Olllie
Olllie15mo ago
ffbaaf13-8e19-48ac-9ac5-f25bae33aea5
Brody
Brody15mo ago
can you please share your repo
Olllie
Olllie15mo ago
It's private, so I can't unfortunately.
Brody
Brody15mo ago
send your package.json then?
Olllie
Olllie15mo ago
Sure, here are the dependencies: "dependencies": { "@apollo/client": "^3.7.10", "@shopify/app-bridge": "^3.7.4", "@shopify/app-bridge-react": "^3.7.4", "@shopify/polaris": "^10.35.0", "@shopify/shopify-api": "^6.2.0", "axios": "^1.3.5", "compression": "^1.7.4", "crossenv": "^0.0.2-security", "crypto-js": "^4.1.1", "dotenv": "^16.0.3", "express": "^4.18.2", "firebase": "^9.19.1", "graphql": "^16.6.0", "raviger": "^4.1.2", "react": "^18.2.0", "react-beautiful-dnd": "^13.1.1", "react-dom": "^18.2.0", "serve-static": "^1.15.0", "unsplash-image-picker": "^1.0.2", "web-vitals": "^3.4.0" }, "devDependencies": { "@shopify/app": "^3.44.1", "@shopify/cli": "^3.44.1", "@shopify/cli-kit": "^3.44.1", "@vitejs/plugin-react": "^3.1.0", "concurrently": "^7.6.0", "ngrok": "^4.3.3", "nodemon": "^2.0.21", "npm-check-updates": "^16.7.12", "prettier": "^2.8.4", "vite": "^4.1.4" },
Brody
Brody15mo ago
I would like the entire package.json
Olllie
Olllie15mo ago
Sure: { "name": "redacted", "version": "1.0.0", "description": "redacted", "type": "module", "author": { "name": "Ollie" }, "scripts": { "update": "ncu -u", "update:check": "ncu", "update:url": "node devUtils/updateDashboard.js", "dev": "concurrently "npm run dev:*"", "dev:server": "NODE_ENV=dev nodemon server/index.js --ignore client/ --ignore dist/", "dev:client": "vite --config=./client/vite.config.cjs", "preserve": "npm run build", "build": "vite build --config=./client/vite.config.cjs", "start": "NODE_ENV=prod node server/index.js", "pretty": "prettier --write .", "ngrok:auth": "ngrok authtoken <your-auth-token>", "ngrok": "ngrok http 5173", "ngrok:prod": "ngrok http 8081", "shopify": "shopify", "s:e:create": "shopify app generate extension", "s:e:deploy": "shopify app deploy" }, "dependencies": { "@apollo/client": "^3.7.10", "@shopify/app-bridge": "^3.7.4", "@shopify/app-bridge-react": "^3.7.4", "@shopify/polaris": "^10.35.0", "@shopify/shopify-api": "^6.2.0", "axios": "^1.3.5", "compression": "^1.7.4", "crossenv": "^0.0.2-security", "crypto-js": "^4.1.1", "dotenv": "^16.0.3", "express": "^4.18.2", "firebase": "^9.19.1", "graphql": "^16.6.0", "raviger": "^4.1.2", "react": "^18.2.0", "react-beautiful-dnd": "^13.1.1", "react-dom": "^18.2.0", "serve-static": "^1.15.0", "unsplash-image-picker": "^1.0.2", "web-vitals": "^3.4.0" }, "devDependencies": { "@shopify/app": "^3.44.1", "@shopify/cli": "^3.44.1", "@shopify/cli-kit": "^3.44.1", "@vitejs/plugin-react": "^3.1.0", "concurrently": "^7.6.0", "ngrok": "^4.3.3", "nodemon": "^2.0.21", "npm-check-updates": "^16.7.12", "prettier": "^2.8.4", "vite": "^4.1.4" }, "overrides": { "@shopify/cli-kit": { "react": "18.2.0" }, "@shopify/cli": { "react": "18.2.0" }, "@shopify/app": { "react": "18.2.0" } } }
Olllie
Olllie15mo ago
Thanks, Ill take a look. I think vite is just for my dev mode, but Ill see if its causing issues.
Olllie
Olllie15mo ago
Na, no luck. Thanks for your help anyway.
Want results from more Discord servers?
Add your server