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
Project ID:
ffbaaf13-8e19-48ac-9ac5-f25bae33aea5^
ffbaaf13-8e19-48ac-9ac5-f25bae33aea5
can you please share your repo
It's private, so I can't unfortunately.
send your package.json then?
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"
},
I would like the entire package.json
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"
}
}
}
Thanks, Ill take a look. I think vite is just for my dev mode, but Ill see if its causing issues.
Na, no luck. Thanks for your help anyway.
