fix(react-email): Missing TextDecoder, TextEncoder and stream variants of these on the `global` for email components being rendered #1259

gabrielmfern · 2024-01-27T11:17:07Z

What does this fix?

This adds a few things that our render utility requires on the global scope
to be ran properly. Missing stuff like TextDecoder was causing someone that used it
inside their email to have issues on this.

Closes #1258

How can I make sure its fixed?

Copy the code for this git diff which has the changes necessary to test

diff --git a/apps/demo/emails/airbnb-review.tsx b/apps/demo/emails/airbnb-review.tsx
index 07386ff..0658ccf 100644
--- a/apps/demo/emails/airbnb-review.tsx
+++ b/apps/demo/emails/airbnb-review.tsx
@@ -11,6 +11,7 @@ import {
   Row,
   Section,
   Text,
+  render,
 } from "@react-email/components";
 import * as React from "react";
 
@@ -32,82 +33,99 @@ export const AirbnbReviewEmail = ({
   const previewText = `Read ${authorName}'s review`;
 
   return (
-    <Html>
-      <Head />
-      <Preview>{previewText}</Preview>
-
-      <Body style={main}>
-        <Container style={container}>
-          <Section>
-            <Img
-              src={`${baseUrl}/static/airbnb-logo.png`}
-              width="96"
-              height="30"
-              alt="Airbnb"
-            />
-          </Section>
-          <Section>
-            <Img
-              src={authorImage}
-              width="96"
-              height="96"
-              alt={authorName}
-              style={userImage}
-            />
-          </Section>
-          <Section style={{ paddingBottom: "20px" }}>
-            <Row>
-              <Text style={heading}>Here's what {authorName} wrote</Text>
-              <Text style={review}>{reviewText}</Text>
-              <Text style={paragraph}>
-                Now that the review period is over, we’ve posted {authorName}
-                ’s review to your Airbnb profile.
-              </Text>
-              <Text style={{ ...paragraph, paddingBottom: "16px" }}>
-                While it’s too late to write a review of your own, you can send
-                your feedback to {authorName} using your Airbnb message thread.
-              </Text>
-
-              <Button style={button} href="https://airbnb.com/">
-                Send My Feedback
-              </Button>
-            </Row>
-          </Section>
-
-          <Hr style={hr} />
-
-          <Section>
-            <Row>
-              <Text style={{ ...paragraph, fontWeight: "700" }}>
-                Common questions
-              </Text>
-              <Text>
-                <Link href="https://airbnb.com/help/article/13" style={link}>
-                  How do reviews work?
-                </Link>
-              </Text>
-              <Text>
-                <Link href="https://airbnb.com/help/article/1257" style={link}>
-                  How do star ratings work?
-                </Link>
-              </Text>
-              <Text>
-                <Link href="https://airbnb.com/help/article/995" style={link}>
-                  Can I leave a review after 14 days?
-                </Link>
-              </Text>
-              <Hr style={hr} />
-              <Text style={footer}>
-                Airbnb, Inc., 888 Brannan St, San Francisco, CA 94103
-              </Text>
-              <Link href="https://airbnb.com" style={reportLink}>
-                Report unsafe behavior
-              </Link>
-            </Row>
-          </Section>
-        </Container>
-      </Body>
-    </Html>
+    <div
+      dangerouslySetInnerHTML={{
+        __html: render(
+          <Html>
+            <Head />
+            <Preview>{previewText}</Preview>
+
+            <Body style={main}>
+              <Container style={container}>
+                <Section>
+                  <Img
+                    src={`${baseUrl}/static/airbnb-logo.png`}
+                    width="96"
+                    height="30"
+                    alt="Airbnb"
+                  />
+                </Section>
+                <Section>
+                  <Img
+                    src={authorImage}
+                    width="96"
+                    height="96"
+                    alt={authorName}
+                    style={userImage}
+                  />
+                </Section>
+                <Section style={{ paddingBottom: "20px" }}>
+                  <Row>
+                    <Text style={heading}>Here's what {authorName} wrote</Text>
+                    <Text style={review}>{reviewText}</Text>
+                    <Text style={paragraph}>
+                      Now that the review period is over, we’ve posted{" "}
+                      {authorName}
+                      ’s review to your Airbnb profile.
+                    </Text>
+                    <Text style={{ ...paragraph, paddingBottom: "16px" }}>
+                      While it’s too late to write a review of your own, you can
+                      send your feedback to {authorName} using your Airbnb
+                      message thread.
+                    </Text>
+
+                    <Button style={button} href="https://airbnb.com/">
+                      Send My Feedback
+                    </Button>
+                  </Row>
+                </Section>
+
+                <Hr style={hr} />
+
+                <Section>
+                  <Row>
+                    <Text style={{ ...paragraph, fontWeight: "700" }}>
+                      Common questions
+                    </Text>
+                    <Text>
+                      <Link
+                        href="https://airbnb.com/help/article/13"
+                        style={link}
+                      >
+                        How do reviews work?
+                      </Link>
+                    </Text>
+                    <Text>
+                      <Link
+                        href="https://airbnb.com/help/article/1257"
+                        style={link}
+                      >
+                        How do star ratings work?
+                      </Link>
+                    </Text>
+                    <Text>
+                      <Link
+                        href="https://airbnb.com/help/article/995"
+                        style={link}
+                      >
+                        Can I leave a review after 14 days?
+                      </Link>
+                    </Text>
+                    <Hr style={hr} />
+                    <Text style={footer}>
+                      Airbnb, Inc., 888 Brannan St, San Francisco, CA 94103
+                    </Text>
+                    <Link href="https://airbnb.com" style={reportLink}>
+                      Report unsafe behavior
+                    </Link>
+                  </Row>
+                </Section>
+              </Container>
+            </Body>
+          </Html>,
+        ),
+      }}
+    ></div>
   );
 };
 
diff --git a/packages/render/src/index.ts b/packages/render/src/index.ts
index bffe0c6..60f05bf 100644
--- a/packages/render/src/index.ts
+++ b/packages/render/src/index.ts
@@ -1,4 +1,4 @@
-export * from "./render";
+// export * from "./render";
 export * from "./render-async";
 
 export * from "./options";

Create a new temp.patch and paste the contents of the diff
Run pnpm install and pnpm build at the root of the project
Run npx tsx ../../packages/react-email/src/cli/index.ts on ./apps/demo
Open http://localhost:3000/preview/airbnb-review.tsx
Verify that there are no errors similar to what TextDecoder is not defined when running email dev #1258 points out

The patch I show above does the following things for clarification:

Calls our render() function on the usual content for the email
Returns a div with its innerHTML set to be the result of render()
Comments out the export for render() on @react-email/render to avoid errors when running the preview server locally

…email Closes #1258

vercel · 2024-01-27T11:17:14Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-email	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 4, 2024 4:37pm

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
react-email-demo	⬜️ Ignored (Inspect)	Visit Preview		Mar 4, 2024 4:37pm

…-server

…s of these on the `global` for email components being rendered (#1259)

fix(react-email): Fixes not being able to call render from inside an …

13467c2

…email Closes #1258

gabrielmfern requested a review from bukinoshita January 27, 2024 11:17

gabrielmfern mentioned this pull request Jan 27, 2024

TextDecoder is not defined when running email dev #1258

Closed

victorvianaom approved these changes Feb 23, 2024

View reviewed changes

gabrielmfern changed the title ~~fix(react-email): Not being able to call render from inside an email~~ fix(react-email): Missing TextDecoder on the global for email components being rendered Mar 4, 2024

gabrielmfern changed the title ~~fix(react-email): Missing TextDecoder on the global for email components being rendered~~ fix(react-email): Missing TextDecoder, TextEncoder and stream variants of these on the global for email components being rendered Mar 4, 2024

bukinoshita previously approved these changes Mar 4, 2024

View reviewed changes

vcapretz previously approved these changes Mar 4, 2024

View reviewed changes

Merge branch 'canary' into fix/missing-global-text-decoder-on-preview…

7f1a16a

…-server

gabrielmfern dismissed stale reviews from vcapretz and bukinoshita via 7f1a16a March 4, 2024 16:36

vercel bot deployed to Preview – react-email March 4, 2024 16:37 View deployment

gabrielmfern requested a review from vcapretz March 4, 2024 16:39

bukinoshita approved these changes Mar 4, 2024

View reviewed changes

gabrielmfern merged commit 20f560b into canary Mar 4, 2024
9 checks passed

gabrielmfern deleted the fix/missing-global-text-decoder-on-preview-server branch March 4, 2024 16:48

gabrielmfern added a commit that referenced this pull request Mar 6, 2024

fix(react-email): Missing TextDecoder, TextEncoder and stream variant…

841c659

…s of these on the `global` for email components being rendered (#1259)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(react-email): Missing TextDecoder, TextEncoder and stream variants of these on the `global` for email components being rendered #1259

fix(react-email): Missing TextDecoder, TextEncoder and stream variants of these on the `global` for email components being rendered #1259

gabrielmfern commented Jan 27, 2024

vercel bot commented Jan 27, 2024 •

edited

Loading

fix(react-email): Missing TextDecoder, TextEncoder and stream variants of these on the global for email components being rendered #1259

fix(react-email): Missing TextDecoder, TextEncoder and stream variants of these on the global for email components being rendered #1259

Conversation

gabrielmfern commented Jan 27, 2024

What does this fix?

How can I make sure its fixed?

vercel bot commented Jan 27, 2024 • edited Loading

fix(react-email): Missing TextDecoder, TextEncoder and stream variants of these on the `global` for email components being rendered #1259

fix(react-email): Missing TextDecoder, TextEncoder and stream variants of these on the `global` for email components being rendered #1259

vercel bot commented Jan 27, 2024 •

edited

Loading