Fixes for react email to run in the deno env

Author: joeldevelops

packages/app/public/discord.png

@@ -27,5 +27,8 @@
     "resend": "npm:resend@^4.5.2",
     "stripe": "npm:stripe@^18.2.1",
     "zod": "npm:zod@^3.24.4"
+  },
+  "compilerOptions": {
+    "jsx": "react"
   }
 }

packages/app/public/linkedin.png

@@ -1,3 +1,6 @@
+/** @jsx React.createElement */
+/** @jsxFrag React.Fragment */
+import React from "react";
 import { Heading, Section, Text } from "@react-email/components";
 import { baseTemplate } from "./base.tsx";
 import { headingStyle } from "./styles.tsx";

packages/app/public/youtube.png

@@ -1,3 +1,6 @@
+/** @jsx React.createElement */
+/** @jsxFrag React.Fragment */
+import React from "react";
 import { Button, Heading, Section, Text } from "@react-email/components";
 import { baseTemplate } from "./base.tsx";
 import { headingStyle } from "./styles.tsx";

packages/core/deno.json

@@ -1,3 +1,6 @@
+/** @jsx React.createElement */
+/** @jsxFrag React.Fragment */
+import React from "react";
 import { Heading, Section, Text } from "@react-email/components";
 import { baseTemplate } from "./base.tsx";
 import { headingStyle } from "./styles.tsx";
@@ -12,7 +15,8 @@ const codeStyle = {
   color: "#222",
   fontFamily: "roboto mono, monospace",
   fontSize: "28px",
-  textAlign: "center",
+  // deno-lint-ignore no-explicit-any
+  textAlign: "center" as any,
   letterSpacing: "5px",
 };
 

packages/core/src/email/templates/DowngradeEmail.tsx

@@ -1,3 +1,6 @@
+/** @jsx React.createElement */
+/** @jsxFrag React.Fragment */
+import React from "react";
 import { Heading, Section, Text } from "@react-email/components";
 import { baseTemplate } from "./base.tsx";
 import { headingStyle } from "./styles.tsx";

packages/core/src/email/templates/InvitationEmail.tsx

@@ -1,3 +1,7 @@
+/** @jsx React.createElement */
+/** @jsxFrag React.Fragment */
+// deno-lint-ignore no-undef
+import React from "react";
 import {
   Button,
   Column,

packages/core/src/email/templates/OtpEmail.tsx

@@ -1,3 +1,7 @@
+/** @jsx React.createElement */
+/** @jsxFrag React.Fragment */
+import React from "react";
+import ReactDOM from "react-dom/server";
 import type { ReactNode } from "react";
 import {
   Body,
@@ -20,7 +24,8 @@ const bodyStyle = {
 };
 
 const sectionStyle = {
-  textAlign: "center",
+  // deno-lint-ignore no-explicit-any
+  textAlign: "center" as any,
 };
 
 const tableStyle = {

packages/core/src/email/templates/UpgradeEmail.tsx

@@ -1,5 +1,6 @@
 export const headingStyle = {
-  textAlign: "center",
+  // deno-lint-ignore no-explicit-any
+  textAlign: "center" as any,
   fontFamily: "Arial, sans-serif",
   marginTop: "30px",
   marginBottom: "40px",