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 : https://github.com/resend/react-email/pull/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 😅).

[eli-front]

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

Worked for me

[hisachin]

I got similar issue I fix it by adding this to my middleware

  unstable_allowDynamic: [
    "**/node_modules/@react-email*/**/*.mjs*",
  ],

Thanks buddy it works for me

[agrowaid]

I got similar issue I fix it by adding this to my middleware

  unstable_allowDynamic: [
    "**/node_modules/@react-email*/**/*.mjs*",
  ],

Thanks a lot. Worked for me too!

[alexcalabrese]

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.

+1

[DeveloperOskar]

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.

+1

The middleware did not work for me, but I also changed the imports and no problems 👍

[alexcalabrese]

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.

+1

The middleware did not work for me, but I also changed the imports and no problems 👍

I did the same and it's working! The problem was the Tailwind package

[ValentinH]

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.

+1

Just to share a few cents on this: we are also using Inngest and we try to use the Edge Runtime as much as possible. However, we also really want to use Tailwind. One thing you can do with Inngest is create 2 apps, each one served on a dedicated endpoint. Therefore, we have an edge app and a node app. The Node app is used to serve all functions that are not runnable on the Edge runtime. Events can still be sent between each app though. The function rendering the React emails is on the Node.js app.

[StarDxxx]

你可以使用这个 hack 直到 PR 被合并。替换为您从错误中获得的路径。这适用于中间件，例如，如果您有自定义验证电子邮件并使用 auth.js。unstable_allowDynamic

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
  ],
};

Thanks, it works! pnpm

[Ikuzweshema]

Unistalling this package @react-email/components
and installing Individual components works

import { Body } from "@react-email/body"; import { Button } from "@react-email/button"; import { Head } from "@react-email/head"; import { Html } from "@react-email/html"; import { Hr } from "@react-email/hr"; import { Preview } from "@react-email/preview"; import { Section } from "@react-email/section"; import { Text } from "@react-email/text"; import { Img } from "@react-email/img"; import { Container } from "@react-email/container";

[taylor-lindores-reeves]

When using next-auth and edge config, react-email is massive and causing Vercel edge function to reach its limits when deploying to Vercel infra. This is due to the verify request email being used in auth config, which is necessary (it's not possible for email-only passwordless login without verify-request, so not possible to split the config).

I have tried running email build command with the CLI and get .react-email directory not found. Anyone got any suggestions for reducing bundle size in production build?