process is not defined
I'm building a chatbot SAAS using OpenSAAS. I created the app files (.tsx and operations.ts) in its own folder, just like the demo app. I also stored some API keys in .env.server, and I'm trying to access them in operations.ts via process.env, but when I run it, it always errors saying "process is not defined" (dev console points to config.ts), but the demo app (which also uses process.env) works fine.
Can anyone help? Is there a step I'm missing?
Here's a snippet of code trying to access OpenAI's key
function setupOpenAI() {
if (!import.meta.env.REACT_APP_OPENAI_API_KEY) {
return new HttpError(500, 'OpenAI API key is not set');
}
return new OpenAI({ apiKey: import.meta.env.REACT_APP_OPENAI_API_KEY });
}
7 Replies
Hi @Kynetix. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The error message "process is not defined" typically occurs when you're trying to access server-side environment variables from the client-side code. In Wasp, you can use environment variables in both the client and the server code, but they are accessed differently.
For server-side code, you can access environment variables using
process.env.VARIABLE_NAME. However, for client-side code, you should use import.meta.env.REACT_APP_VARIABLE_NAME instead. This is because client-side environment variables are embedded into the client code during the build and shipping process, making them public and readable by anyone. Therefore, you should never store secrets in them (such as secret API keys) source (https://wasp-lang.dev/docs/project/env-vars).
In your case, it seems like you're trying to access the OpenAI API key from the client-side code. If the OpenAI API key is stored in the .env.server file, it won't be accessible from the client-side code. Instead, you should store it in the .env.client file and access it using import.meta.env.REACT_APP_OPENAI_API_KEY.
Here's how you can modify your code:
In the .env.client file, you should have something like this:
Remember to replace your_openai_api_key with your actual OpenAI API key.
If you're still encountering issues, it might be helpful to share more information or a reproducible example. It's also worth checking if there's any server code being executed in the client, as this could also cause the error source (https://discord.com/channels/686873244791210014/1212533517360177253).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Kynetix, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?Thanks, @kapa.ai . I'd like to store the API keys in .env.server because I don't want them visible in the client.
Is operations.ts server code?
Let me check the knowledge base for you again. One moment! :books:
----------------------
Yes,
operations.ts is indeed server-side code. In Wasp, operations are Node.js functions that execute on the server. They are used to define how to interact with your data models, and can be either queries (read data) or actions (write data) source (https://wasp-lang.dev/docs#so-what-does-the-code-look-like).
In server-side code, you can access environment variables stored in .env.server using process.env.VARIABLE_NAME. So, in your case, you should be able to access the OpenAI API key like this:
In the .env.server file, you should have something like this:
Remember to replace your_openai_api_key with your actual OpenAI API key.
If you're still encountering issues, it might be helpful to share more information or a reproducible example.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Kynetix, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?operations.ts should be server code. But it sounds like you are importing server code somewhere in the client code? Maybe you tried to direclty import operations.ts in your client code?
Hi @martinsos yea I think I was importing the functions from operations.ts into the .tsx file.
The functions involve adding/updating/deleting records in Supabase. How do I go about calling them from the .tsx file? I find it a bit hard to understand how it works.
Nevermind. With some googling and querying perplexity.ai, I was able to get it working.
Thanks.
Wohooo @Kynetix, you just became a Waspeteer level 1!
All right good to hear! But since there are Wasp operations, yo uwill want to check Wasp's docs on Operartions (Queries and Actions). Queries you call via react-query, and actions direclty. All are imported with special "wasp" imports.