Error: Failed to publish your Function. Got error: Your Functions script is over the 1 MiB size lim

How can I know which one is too big?

10 Replies

neuner•10mo ago

do: du -sh * functions for to check file sizes

is it the whole functions folder that must be under 1MB ?

 56K    account
 80K    account.func.js
544K    api
116K    castings
 52K    castings.func.js
156K    cron.func.js
 44K    dashboard.func.js
520K    middleware.func.js
 48K    resend.func.js
 48K    settings.func.js
 44K    sign-in
 44K    sign-up
 48K    survey.func.js
 76K    welcome.func.js

 56K    account
 80K    account.func.js
544K    api
116K    castings
 52K    castings.func.js
156K    cron.func.js
 44K    dashboard.func.js
520K    middleware.func.js
 48K    resend.func.js
 48K    settings.func.js
 44K    sign-in
 44K    sign-up
 48K    survey.func.js
 76K    welcome.func.js

Chaika•10mo ago

that seems pretty large but yea it bundles all of them together + any dependencies into a single function/worker which has to be less then 1 MiB gzip on free

BaptistabombOP•10mo ago

I dont know why my middleware function is so large there is barely 125lines of code there I also have in /api/email an email function that takes a string of 25lines and it's 444ko I dont get it

Chaika•10mo ago

probably dependencies/libraries you are using

BaptistabombOP•10mo ago

hmm maybe it's the react import?

import * as React from "react";

interface EmailTemplateProps {
  firstName: string;
}

export const EmailTemplate: React.FC<Readonly<EmailTemplateProps>> = ({
  firstName,
}) => (
  <div>
    <h1>Welcome, {firstName}!</h1>
    <p>
      Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
      labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet.
      Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum
      Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident.
      Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex
      occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat
      officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in
      Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non
      excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco
      ut ea consectetur et est culpa et culpa duis.
    </p>
    <hr />
    <p>Sent with help from Resend and Kirimase :blush:</p>
  </div>
);

import * as React from "react";

interface EmailTemplateProps {
  firstName: string;
}

export const EmailTemplate: React.FC<Readonly<EmailTemplateProps>> = ({
  firstName,
}) => (
  <div>
    <h1>Welcome, {firstName}!</h1>
    <p>
      Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim
      labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet.
      Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum
      Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident.
      Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex
      occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat
      officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in
      Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non
      excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco
      ut ea consectetur et est culpa et culpa duis.
    </p>
    <hr />
    <p>Sent with help from Resend and Kirimase :blush:</p>
  </div>
);

that's not it so that's probably the imports inside my route

import { EmailTemplate } from "@/components/emails/FirstEmail";
import { resend } from "@/lib/email/index";
import { emailSchema } from "@/lib/email/utils";
import { NextResponse } from "next/server";

export const runtime = 'edge';

export async function POST(request: Request) {
  const body = await request.json();
  const { name, email } = emailSchema.parse(body);
  try {
    const data = await resend.emails.send({
      from: "Kirimase <[email protected]>",
      to: [email],
      subject: "Hello world!",
      react: EmailTemplate({ firstName: name }),
      text: "Email powered by Resend.",
    });

    return NextResponse.json(data);
  } catch (error) {
    return NextResponse.json({ error });
  }
}

import { EmailTemplate } from "@/components/emails/FirstEmail";
import { resend } from "@/lib/email/index";
import { emailSchema } from "@/lib/email/utils";
import { NextResponse } from "next/server";

export const runtime = 'edge';

export async function POST(request: Request) {
  const body = await request.json();
  const { name, email } = emailSchema.parse(body);
  try {
    const data = await resend.emails.send({
      from: "Kirimase <[email protected]>",
      to: [email],
      subject: "Hello world!",
      react: EmailTemplate({ firstName: name }),
      text: "Email powered by Resend.",
    });

    return NextResponse.json(data);
  } catch (error) {
    return NextResponse.json({ error });
  }
}

yeah looks like it's the resend library :/ Argh I loved cloudflare pages, I have my domain there and analytics

neuner•10mo ago

you won't get as robust error handling/typing, but what if you try using fetch via their api?

BaptistabombOP•10mo ago

Yeah that’s what I did but sadly it means I can’t send react content anymore I’m afraid my functions will get higher fast every page takes 60ko maybe I should switch some to use client but I lose SSR

K•10mo ago

You can send emails in html format, if that's what you want to do. Probably there are lighter packages for that.

neuner•10mo ago

also if you're using react email, you can build to plain html, no? what i did back when i needed formatted email was make placeholders like {{this}} and then manually .replace(/{{thing}}/, "value") for me, formatted email is a little annoying and just a tiny amount of html with pretty much plaintext email works nice

Gaming

Programming

Error: Failed to publish your Function. Got error: Your Functions script is over the 1 MiB size lim