process undefined when accessing env variables

when trying to access an environment variable setup in .env from login.tsx I get the following error process undefined

3 Replies

Hi @Pops / Spruce. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like you're having trouble accessing environment variables in your React application. Here are a few things you can check: 1. Naming of environment variables: In a Create React App project (which Refine is based on), you can only access environment variables that start with REACT_APP_. So, if you're trying to access a variable like API_KEY, you should rename it to REACT_APP_API_KEY in your .env file. 2. Installation of dotenv: Although Create React App should handle environment variables out of the box, if you're not using CRA or if it's not working for some reason, you might need to use the dotenv package. You can install it with npm install dotenv, and then at the top of your file, before any other imports, add the following lines:

import * as dotenv from 'dotenv';
dotenv.config();

import * as dotenv from 'dotenv';
dotenv.config();

This will load the variables from your .env file into process.env. (source (https://github.com/refinedev/refine/issues/4039)) 3. Usage in the code: When you want to use the variable in your code, you can access it with process.env.REACT_APP_API_KEY (or whatever you named your variable). 4. Restart your server: After making changes to your .env file, you need to restart your development server to see the changes. If you're using a different build tool or server environment, the way you handle environment variables might be different. For example, if you're using Vite, you should check out Vite's guide on environment variables (https://vitejs.dev/guide/env-and-mode.html). (source (https://discord.com/channels/837692625737613362/1204246074953310268)) If none of these suggestions help, please provide more information about your setup, such as the build tool you're using and the exact code where you're trying to access the environment variable. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@184452259327770625> kapa.ai is still learning and improving, please let us know how it did by reacting below

flat-fuchsia•5mo ago

i'm using refine with vite