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

VaniaPopovic · 2023-12-18T23:40:39Z

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/@[email protected][email protected]/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/@[email protected][email protected]/node_modules/@react-email/tailwind/dist/index.mjs
./node_modules/.pnpm/@[email protected]_@[email protected][email protected]/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:

See if the problem occurs in a NextJS API route. It works without a problem ✅
See if the problem occurs when having the renderAsync function in a RSC. It works without a problem ✅
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

pnpm install
pnpm run dev -> everything works as expected
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 · 2024-01-03T05:18:18Z

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

lchenneberg · 2024-03-18T02:35:34Z

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 · 2024-03-24T08:14:45Z

Same problem, unusable on edge runtime

andrewdoro · 2024-03-30T17:55:17Z

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/@[email protected][email protected]/**", // use a glob to allow anything in the function-bind 3rd party module
  ],
};

maccman · 2024-04-14T16:26:19Z

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

We are rendering emails through inngest.

maccman · 2024-04-14T17:08:23Z

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 · 2024-04-15T08:04:06Z

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

Carduelis · 2024-05-26T10:14:46Z

Hey there!

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

I followed this guide of next-auth@v5 https://authjs.dev/getting-started/migrating-to-v5#edge-compatibility
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 · 2024-05-28T16:10:06Z

Hey there!

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

I followed this guide of next-auth@v5 https://authjs.dev/getting-started/migrating-to-v5#edge-compatibility

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 · 2024-06-24T22:43:59Z

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 · 2024-07-16T13:52:24Z

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 · 2024-08-05T04:14:41Z

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

Worked for me

hisachin · 2024-08-16T14:08:56Z

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 · 2024-08-18T17:17:42Z

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 · 2024-09-14T08:47:21Z

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 · 2024-09-14T10:11:06Z

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 · 2024-09-14T14:12:17Z

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 · 2024-09-14T14:36:04Z

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 · 2024-09-20T05:19:56Z

你可以使用这个 hack 直到 PR 被合并。替换为您从错误中获得的路径。这适用于中间件，例如，如果您有自定义验证电子邮件并使用 auth.js。unstable_allowDynamic
export const config = {
  matcher: ["/business/:path*", "/join"],
  unstable_allowDynamic: [
    "**/node_modules/.pnpm/@[email protected][email protected]/**", // use a glob to allow anything in the function-bind 3rd party module
  ],
};

Thanks, it works! pnpm

Ikuzweshema · 2024-09-29T18:28:41Z

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 · 2024-09-30T07:09:01Z

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?

gabrielmfern · 2024-10-17T15:38:27Z

We just merged #1383 and released it under canary, @react-email/[email protected], should fix it

VaniaPopovic added the Type: Bug Confirmed bug label Dec 18, 2023

gabrielmfern added the Package: @react-email/tailwind label Jan 3, 2024

gabrielmfern mentioned this issue Jan 3, 2024

feat(tailwind): Smaller bundle size #1124

Closed

gabrielmfern mentioned this issue Mar 27, 2024

feat(tailwind): Smaller bundle size #1383

Merged

gabrielmfern added the Fixed under canary label Oct 15, 2024

gabrielmfern closed this as completed Oct 31, 2024

gabrielmfern removed the Fixed under canary label Oct 31, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

VaniaPopovic commented Dec 18, 2023 •

edited

Loading

gleydson commented Jan 3, 2024 •

edited

Loading

lchenneberg commented Mar 18, 2024

kyb3r commented Mar 24, 2024

andrewdoro commented Mar 30, 2024 •

edited

Loading

maccman commented Apr 14, 2024

maccman commented Apr 14, 2024

jschuur commented Apr 15, 2024

Carduelis commented May 26, 2024

danlzh commented May 28, 2024

dmarcucci commented Jun 24, 2024

ValentinH commented Jul 16, 2024

eli-front commented Aug 5, 2024

hisachin commented Aug 16, 2024

agrowaid commented Aug 18, 2024

alexcalabrese commented Sep 14, 2024

DeveloperOskar commented Sep 14, 2024

alexcalabrese commented Sep 14, 2024

ValentinH commented Sep 14, 2024

StarDxxx commented Sep 20, 2024

Ikuzweshema commented Sep 29, 2024

taylor-lindores-reeves commented Sep 30, 2024

gabrielmfern commented Oct 17, 2024

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

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

Comments

VaniaPopovic commented Dec 18, 2023 • edited Loading

Describe the Bug

Which package is affected (leave empty if unsure)

Link to the code that reproduces this issue

To Reproduce

Expected Behavior

What's your node version? (if relevant)

gleydson commented Jan 3, 2024 • edited Loading

lchenneberg commented Mar 18, 2024

kyb3r commented Mar 24, 2024

andrewdoro commented Mar 30, 2024 • edited Loading

maccman commented Apr 14, 2024

maccman commented Apr 14, 2024

jschuur commented Apr 15, 2024

Carduelis commented May 26, 2024

danlzh commented May 28, 2024

dmarcucci commented Jun 24, 2024

ValentinH commented Jul 16, 2024

eli-front commented Aug 5, 2024

hisachin commented Aug 16, 2024

agrowaid commented Aug 18, 2024

alexcalabrese commented Sep 14, 2024

DeveloperOskar commented Sep 14, 2024

alexcalabrese commented Sep 14, 2024

ValentinH commented Sep 14, 2024

StarDxxx commented Sep 20, 2024

Ikuzweshema commented Sep 29, 2024

taylor-lindores-reeves commented Sep 30, 2024

gabrielmfern commented Oct 17, 2024

VaniaPopovic commented Dec 18, 2023 •

edited

Loading

gleydson commented Jan 3, 2024 •

edited

Loading

andrewdoro commented Mar 30, 2024 •

edited

Loading