Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime

[VaniaPopovic]

Describe the Bug

Hello, this is the one I was referring to to in the other ticket @gabrielmfern,

I have a monorepo with an auth package, an email package and my main app that consumes both of them.
My desire is for users to login through next-auth and have next-auth send out an email with resend of a login link that is styled with react email.
I have been trying to have the next-auth middleware run on edge in order to make it faster.

The problem that I'm experiencing is that the project works well on dev, but when trying to build and deploy to vercel, it fails with

./node_modules/.pnpm/@react-email+tailwind@0.0.14-canary.0_react@18.2.0/node_modules/@react-email/tailwind/dist/index.mjs
Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime
Learn More: https://nextjs.org/docs/messages/edge-dynamic-code-evaluation

Import trace for requested module:
./node_modules/.pnpm/@react-email+tailwind@0.0.14-canary.0_react@18.2.0/node_modules/@react-email/tailwind/dist/index.mjs
./node_modules/.pnpm/@react-email+components@0.0.14-canary.0_@types+react@18.2.39_react@18.2.0/node_modules/@react-email/components/dist/index.mjs
./src/vercel-invite-user.tsx
./src/auth.ts

I've been using the canary versions of both @react-email/components & @react-email/render cause they contain fixes that I need to run on edge : #1079

I'm not sure if it's a regression or a problem caused by a different library eg. NextAuth or Next itsself.

It took me a while to create the reproduction because I have attempted:

1. See if the problem occurs in a NextJS API route. It works without a problem ✅
2. See if the problem occurs when having the renderAsync function in a RSC. It works without a problem ✅
3. Have the function in the NextAuth configuration. It fails ❌

Which package is affected (leave empty if unsure)

@react-email/components

Link to the code that reproduces this issue

https://github.com/VaniaPopovic/react-email-repro

To Reproduce

1. pnpm install
2. pnpm run dev -> everything works as expected
3. pnpm run build it fails with the aformentioned error

Expected Behavior

For it to render the email without a problem

What's your node version? (if relevant)

20.6.1

[gleydson]

Dude, I have the exact same problem. After installing each component individually and removing the tailwind component this error stopped. :(

[lchenneberg]

Dude, I have the exact same problem. After installing each component individually and removing the tailwind component this error stopped. :(

Thanks for this, it on my side still not building. Maybe your solution will help

[kyb3r]

Same problem, unusable on edge runtime

[andrewdoro]

You can use this hack until the PR is merged. In unstable_allowDynamic replace with the path that you get from the error. This is for the middleware, if you have for example a custom verification email and using auth.js.

export const config = {
  matcher: ["/business/:path*", "/join"],
  unstable_allowDynamic: [
    "**/node_modules/.pnpm/@react-email+tailwind@0.0.15_react@18.2.0/**", // use a glob to allow anything in the function-bind 3rd party module
  ],
};

[maccman]

We're running into the same issue. It's unusable on the edge.

We are rendering emails through inngest.

[maccman]

I managed to figure out a work around by uninstalling react-email/components and just using the individual packages. I'm fairly sure it's the tailwind package that's causing the issue.

To the maintainers of this project: I really would fix this one because it is extremely common to use this package in an edge environment. Typically you're sending emails from a job queue like ingest and the only way that ingest is going to work is if it's streaming and so it needs to be in an edge environment.

So I would really give this one some attention. Just my two cents.

[jschuur]

I wonder if the new engine for Tailwind will just magically fix it because it's such a big rewrite.

[Carduelis]

Hey there!

unstable_allowDynamic did not help me, although I figured out the way to fix it:

1. I followed this guide of next-auth@v5 https://authjs.dev/getting-started/migrating-to-v5#edge-compatibility
2. But Isolated events from the config, keeping sendEmail function inside auth.ts file, but with no import to the middleware.

Not sure, if events property is important to be in middleware.

[danlzh]

Hey there!

unstable_allowDynamic did not help me, although I figured out the way to fix it:

1. I followed this guide of next-auth@v5 https://authjs.dev/getting-started/migrating-to-v5#edge-compatibility
2. But Isolated events from the config, keeping sendEmail function inside auth.ts file, but with no import to the middleware.

Not sure, if events property is important to be in middleware.

Same problem using next-auth@5. Your solution helped, thanks!

[dmarcucci]

I managed to figure out a work around by uninstalling react-email/components and just using the individual packages. I'm fairly sure it's the tailwind package that's causing the issue.

To the maintainers of this project: I really would fix this one because it is extremely common to use this package in an edge environment. Typically you're sending emails from a job queue like ingest and the only way that ingest is going to work is if it's streaming and so it needs to be in an edge environment.

So I would really give this one some attention. Just my two cents.

This was the solution that worked for me as well, but it would be a lot nicer if this was fixed so I could just use the single package.

[ValentinH]

It would also be great to explicitly document that the tailwind package is not usable in the Edge Runtime and to provide some documentation about styling emails without Tailwind (especially when it comes to using media queries 😅).