Why does SendGrid break my app
Hi All, new to the discord, read all the Email blogs and documentation but still can't solve this one.
I've created a a very simply button to test email, when have Provider: Dummy and click the email, I get the email contents in the webpage console.
HOWEVER, when I change Provider: SendGrid, then add SENDGRID_API_KEY to env.server , not pages load on my app anymore and the console, spits out the following error:
env.ts:71 Uncaught ReferenceError: process is not defined
at env.ts:71:36
(anonymous) @ env.ts:71
that line of code reads:
// PUBLIC API
export const env = ensureEnvSchema(process.env, serverEnvSchema)
Any ideas why this isn't working?
4 Replies
Hi @stobbsc. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The error you're seeing,
Double-check your imports and make sure nothing that uses
See Discord thread for similar issues and advice. 2. Check your project structure.
All your work should be in the root
See Discord advice on project structure. 3. Environment variables usage:
- Use
See Wasp docs on env vars. 4. Why it works with Dummy provider:
The Dummy provider only logs emails to the console and doesn't require any server-side secrets or API calls, so you might not hit this issue until you switch to a real provider like SendGrid, which requires server-side configuration. What to do next: - Search your codebase for any use of
Uncaught ReferenceError: process is not defined, typically means that server-side code (which expects to run in a Node.js environment) is being executed on the client (browser), where process.env does not exist. This is not directly related to SendGrid itself, but rather to how your environment variables and code are being handled in your Wasp app.
From the Discord discussions and migration issues, this usually happens if:
- Server code (which uses process.env) is accidentally imported or executed in the client-side code.
- There is a misconfiguration after migrating Wasp versions, causing server files to be served to the client.
- You might be importing something from wasp/server/* or similar in your client code, which should be avoided.
Key points to check:
1. Ensure server-only code is not imported on the client.Double-check your imports and make sure nothing that uses
process.env is being used in your React components or any code that runs in the browser. For example, don't import from wasp/server/* or from your own server-side files in client code.See Discord thread for similar issues and advice. 2. Check your project structure.
All your work should be in the root
src folder and main.wasp. Do not edit or rely on files in the .wasp folder, as these are generated and meant for internal use only.See Discord advice on project structure. 3. Environment variables usage:
- Use
process.env.SOME_VAR only in server code.
- Use import.meta.env.REACT_APP_SOME_VAR for client code, and only for non-secret values.See Wasp docs on env vars. 4. Why it works with Dummy provider:
The Dummy provider only logs emails to the console and doesn't require any server-side secrets or API calls, so you might not hit this issue until you switch to a real provider like SendGrid, which requires server-side configuration. What to do next: - Search your codebase for any use of
process.env or imports from server files in your client code.
- Make sure your SendGrid configuration and API key are only accessed on the server side.
- If you recently migrated Wasp versions, check for any TODOs or migration notes in your code, as there may be leftover issues from the migration process.
If after these checks the issue persists, try to isolate which file or import is causing the problem by commenting out code or checking your import paths, especially after a migration.
Let me know if you need help tracking down a specific import or file!
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @stobbsc, 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?yes great catch so I was doing a server import in one of my pages: import { emailSender } from "wasp/server/email"; how do I call or import the emailSender correctly?
Hmm, Wasp should have caught this. You didn't get the error in the browser telling you about the server import?
Where'd you like to import and call it from?
Thanks Sodic, I didn't get the error in browser. I finally worked this out I added it as an action to operations and now it calls and all works. Thanks