process.env not recognized in React Email #2074
Description
Describe the Bug
🚫 process.env not recognized in React Email
✅ Proposed working solution
Hello everyone 👋,
I encountered a similar issue and after some research and testing, I managed to get the use of environment variables working in react-email project.
🔧 What I did
1. I installed dotenv:
npm install dotenv2. I set the environment variable in the .env file
// .env
SITE_URL="http://localhost:3000"3. In my Email.tsx file, I used dotenv/config to load the environment variables
import "dotenv/config";
import {
Body,
Container,
Head,
Html,
Link,
Preview,
Text,
} from "@react-email/components";
import { Tailwind } from "@react-email/tailwind";
export default function Email() {
const baseUrl = process.env.SITE_URL;
return (
<Html>
<Head />
<Preview>Discover my website</Preview>
<Tailwind>
<Body className="bg-white font-sans">
<Container className="mx-auto max-w-[600px] py-5">
<Text className="text-lg font-semibold text-gray-800">
Hello there,
</Text>
<Text className="mt-4 text-gray-600">
I invite you to discover my website.
</Text>
<Link
href={baseUrl}
className="mt-6 inline-block rounded-md bg-blue-600 px-6 py-3 text-white no-underline"
>
Visit my website
</Link>
<Text className="mt-6 text-sm text-gray-500">
Direct link : {baseUrl}
</Text>
</Container>
</Body>
</Tailwind>
</Html>
);
}✔️ Results
- Local:
Variables are correctly injected into the generated email. - In production:
Works after configuring variables in hosting (Vercel/Netlify/etc.)
🔍 Why does it work?
- dotenv/config loads variables from the .env file before code execution.
Which package is affected (leave empty if unsure)
No response
Link to the code that reproduces this issue
https://github.com/thewhite2255dev/react-email-env-test
To Reproduce
🧪 To Reproduce
Steps to reproduce the issue:
1. Clone the repository
git clone https://github.com/thewhite2255dev/react-email-env-test
cd react-email-env-test
npm install
# or
yarn2. Create a .env file at the root with:
SITE_URL="http://localhost:3000"3. Run the development server:
npm run dev
# or
yarn devOpen localhost:3000 with your browser to see the result.
License
MIT License
Expected Behavior
🚀 Expected Behavior
I expected the process.env.SITE_URL environment variable to be correctly loaded and accessible in the Email.tsx component, with the value http://localhost:3000, as defined in the .env file.
The variable should be injected into the email template and rendered correctly when the component is used.
What's your node version? (if relevant)
v20.14.0