tiernacityT
Convex Community•2y ago•
41 replies
tiernacity

Problem integrating react-email into an internal action

Hi, I'm trying to send email from a convex action, using https://resend.com/ and https://github.com/resend/react-email. It's a next.js 13 app.

The resend integration is working, it's just a simple call to their SDK. But when I try to integrate react-email, the convex functions won't deploy.

My action (in /convex/email.ts) imports and calls a function from another module (in /convex/src/email/new_share.ts). This module then imports a react-email component from a .tsx file outside of /convex (in /emails/new_share.tsx). This component needs to be provided to the resend SDK.

When I run npx convex dev -v --once, I can see .js files generated from my two files inside of /convex.
I can also see .css files generated for each - these are presumably needed by react-email. I haven't yet investigated whether react-email can build without them.

Regardless, my convex dev command fails because it doesn't want to upload CSS files. I've tried adding 'use node' in the action file, but see the same error.

Any advice or guidance you can give me?

Here's some edited output that shows the error:

➜ npx convex dev -v --once             
Codegen finished.
...
Preparing convex/email.ts
Preparing convex/src/email/new_share.ts
...
Convex's runtime modules:  [
...
  'src/email/new_share.js',
  'email.js',
 ...
  'src/email/new_share.css',
  'email.css'
]
Node.js runtime modules:  []
Remote config will be overwritten with the following changes:
...
Add the following modules:
[+] src/email/new_share.js (327 B, source map 93 B)
[+] email.js (631 B, source map 903 B)
...
[+] src/email/new_share.css (1.6 KB, source map 2.0 KB)
[+] email.css (1.6 KB, source map 2.0 KB)

✖ Error: Unable to push deployment config to https://<redacted>.convex.cloud
400 Bad Request: BadConvexModuleIdentifier: Hit an error while pushing:
src/email/new_share.css is not a valid path to a Convex module. Module path (src/email/new_share.css) has an extension that isn't 'js'.
Was this page helpful?