SG.dev•9mo ago

Resend / Convex: Issue with Deploying JSX in Convex Environment - Unexpected Syntax Error

Can't for the life of me figure out how to resolve this issue. I'm encountering a deployment issue when using JSX within my Convex environment.

✖ Error: Unable to push deployment config to https://<deploymentUrl>
Error fetching POST  https://<deploymentUrl>/api/push_config 400 Bad Request: InvalidModules: Hit an error while pushing:
Loading the pushed modules encountered the following
    error:
Failed to analyze emails.js: Uncaught SyntaxError: Unexpected token '<'

✖ Error: Unable to push deployment config to https://<deploymentUrl>
Error fetching POST  https://<deploymentUrl>/api/push_config 400 Bad Request: InvalidModules: Hit an error while pushing:
Loading the pushed modules encountered the following
    error:
Failed to analyze emails.js: Uncaught SyntaxError: Unexpected token '<'

I've also added : "jsx": "react-jsx" under the compilerOptions in my /convex/tsconfig.json Here is the code:

// emails.tsx

export const sendWelcomeEmail = async ({
  email,
  name,
}: {
  email: string;
  name: string;
}) => {
  const { error } = await resend.emails.send({
    from: "",
    to: email,
    subject: "Welcome",
    react: <WelcomeEmail name={name} />,
  });

  if (error) {
    console.error(error);
    throw new ConvexError({ message: error.message });
  }
};

// emails.tsx

export const sendWelcomeEmail = async ({
  email,
  name,
}: {
  email: string;
  name: string;
}) => {
  const { error } = await resend.emails.send({
    from: "",
    to: email,
    subject: "Welcome",
    react: <WelcomeEmail name={name} />,
  });

  if (error) {
    console.error(error);
    throw new ConvexError({ message: error.message });
  }
};

I've also tried just calling the function like this and get the same error:

react: WelcomeEmail({name})

react: WelcomeEmail({name})

Any insight would be great, thanks guys!

4 Replies

SG.devOP•9mo ago

Update: This resolved the issue https://discord.com/channels/1019350475847499849/1161498699558559754/1161557176649777183 Although not sure why this this is happening

Michal Srb•9mo ago

Got it! So for others: Make sure the .tsx file is under the convex/ folder. I'm not exactly sure why this is happening, but it could be some interplay between esbuild and tsconfig.

SG.devOP•9mo ago

Yeah its strange, but somehow react: (<div></div>) works 🤷‍♂️

erquhart•9mo ago

Because that jsx is inline, the issue seems to be with importing jsx from outside of the convex directory.

Resend / Convex: Issue with Deploying JSX in Convex Environment - Unexpected Syntax Error

Did you find this page helpful?