Cannot use @react-email/components with Cloudflare

[colesanderson]

Describe the Bug

I keep getting error with Publish to Cloudflare Pages with Github Actions when using the @react-email/components.

Which package is affected (leave empty if unsure)

@react-email/components

Link to the code that reproduces this issue

no link

To Reproduce

Run cloudflare/pages-action@v1
npm warn exec The following package was not found and will be installed: [email protected]
npm warn deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.
npm warn deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead
Delegating to locally-installed [email protected] over global [email protected]...
Run `npx wrangler pages publish ./build/client --project-name=web-starter-cloudflare --branch=main` to use the local version directly.
▲ [WARNING] `wrangler pages publish` is deprecated and will be removed in the next major version.
  Please use `wrangler pages deploy` instead, which accepts exactly the same arguments.
✨ Compiled Worker successfully
Uploading... (9/9)
✨ Success! Uploaded 0 files (9 already uploaded) (0.30 sec)
✨ Uploading _headers
✨ Uploading Functions bundle
✨ Uploading _routes.json
🌎 Deploying...
✘ [ERROR] Deployment failed!
  Failed to publish your Function. Got error: Error: Script startup exceeded CPU time limit.
🪵  Logs were written to "/home/runner/.config/.wrangler/logs/wrangler-2024-06-16_03-00-22_546.log"
npm notice
npm notice New minor version of npm available! [10](https://github.com/colesanderson/web-starter-cloudflare/actions/runs/9532835999/job/26275393016#step:6:11).7.0 -> 10.8.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.1
npm notice To update run: npm install -g [email protected]
npm notice
EXIT WHEN NOT EXPECTED
SHELLAC COMMAND FAILED!
Executing: npx wrangler@2 pages publish "./build/client" --project-name="web-starter-cloudflare" --branch="main" in /home/runner/work/web-starter-cloudflare/web-starter-cloudflare
STDOUT:
Delegating to locally-installed [email protected] over global [email protected]...
Run `npx wrangler pages publish ./build/client --project-name=web-starter-cloudflare --branch=main` to use the local version directly.
✨ Compiled Worker successfully
Uploading... (9/9)
✨ Success! Uploaded 0 files (9 already uploaded) (0.30 sec)
✨ Uploading _headers
✨ Uploading Functions bundle
✨ Uploading _routes.json
🌎 Deploying...
STDERR:
npm warn exec The following package was not found and will be installed: [email protected]
npm warn deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-inject.
npm warn deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead
▲ [WARNING] `wrangler pages publish` is deprecated and will be removed in the next major version.
  Please use `wrangler pages deploy` instead, which accepts exactly the same arguments.
✘ [ERROR] Deployment failed!
  Failed to publish your Function. Got error: Error: Script startup exceeded CPU time limit.
🪵  Logs were written to "/home/runner/.config/.wrangler/logs/wrangler-2024-06-[16](https://github.com/colesanderson/web-starter-cloudflare/actions/runs/9532835999/job/26275393016#step:6:17)_03-00-22_546.log"
npm notice
npm notice New minor version of npm available! 10.7.0 -> 10.8.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.1
npm notice To update run: npm install -g [email protected]
npm notice
node:internal/process/promises:279
            triggerUncaughtException(err, true /* fromPromise */);
            ^
[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "#<Object>".] {
  code: 'ERR_UNHANDLED_REJECTION'
}

Code

import { json } from "@remix-run/cloudflare";
import { Resend } from "resend";
import { render } from "@react-email/render";
import { Button } from "@react-email/components";

export async function action(args: ActionFunctionArgs) {
  const { request, context } = args;
  const { env } = context.cloudflare;

  const resend = new Resend(env.RESEND_EMAIL);

  const Foo = () => (
    <Button href="https://example.com" style={{ color: "#61dafb" }}>
      Click me
    </Button>
  );

  const emailHtml = render(<Foo />);
  

  try {
    // Sending an email using the Resend API
    const { error } = await resend.emails.send({
      from: `Person <${defaultEmail}>`,
      reply_to: email,
      to: [defaultEmail],
      subject: "Form Submission",
      html: emailHtml,
      // render: <Foo /> // tried this too
    });

    if (error) {
      throw new Error("Failed to send email");
    }

    return json({ success: true, message: "Email sent successfully!" });
  } catch (error) {
    return json({ error: (error as Error).message }, 400);
  }
}

export default function Contact() {
  return <Contact />;
}

Expected Behavior

Expecting for deploy to work or output more helpful error?

What's your node version? (if relevant)

v20.10.0