Description
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 21.6.0: Sat Jun 18 17:07:22 PDT 2022; root:xnu-8020.140.41~1/RELEASE_ARM64_T6000
Binaries:
Node: 18.15.0
npm: 9.5.0
Yarn: 1.22.19
pnpm: 7.32.4
Relevant packages:
next: 13.4.6
eslint-config-next: 13.4.3
react: 18.2.0
react-dom: 18.2.0
typescript: 4.8.4
Which area(s) of Next.js are affected? (leave empty if unsure)
Middleware / Edge (API routes, runtime)
Link to the code that reproduces this issue or a replay of the bug
https://github.com/inflearn/inflearn-ucc-frontend/pull/14
To Reproduce
In the middleware.ts file, we are importing a file that is using lodash-es.
If you run the next build, you will get an error and the build will fail.
I set the config as suggested in the documentation, but the result is the same.
The documentation even says to set the runtime to edge, but when you run the actual build, you get this error: Error: Page /src/middleware provided runtime 'edge', the edge runtime for rendering is currently experimental. Use runtime 'experimental-edge' instead.
You'll find an error like this
Option values I set
export const config = {
runtime: "experimental-edge",
unstable_allowDynamic: [
"/src/utils/Fetcher.ts",
"/src/@types/schema.ts",
"*/**/node_modules/lodash-es/**",
],
matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};
Describe the Bug
build will fail.
Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime
Used by default
Learn More: https://nextjs.org/docs/messages/edge-dynamic-code-evaluation
Expected Behavior
You'll likely encounter an error message like this
../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/_root.js
profile:build: Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime
profile:build: Learn More: https://nextjs.org/docs/messages/edge-dynamic-code-evaluation
profile:build:
profile:build: Import trace for requested module:
profile:build: ../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/_root.js
profile:build: ../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/isBuffer.js
profile:build: ../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/lodash.js
profile:build: ./src/utils/Fetcher.ts
profile:build: ./src/@types/schema.ts
profile:build:
profile:build: ../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/template.js
profile:build: Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime
profile:build: Used by default
profile:build: Learn More: https://nextjs.org/docs/messages/edge-dynamic-code-evaluation
profile:build:
profile:build: Import trace for requested module:
profile:build: ../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/template.js
profile:build: ../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/lodash.js
profile:build: ./src/utils/Fetcher.ts
profile:build: ./src/@types/schema.ts
Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
Activity
shuding commentedon Jun 19, 2023
As the error message says
This is expected as https://unpkg.com/lodash-es@4.17.21/_root.js has a
Function('return this')()
.jer-k commentedon Jun 19, 2023
@shuding Can this be-reopened?
I'm running into this same issue and we run our Next.js project in a Docker container in Kubernetes so there is 0% chance the code will run on the Edge Runtime. The code executes perfectly fine in development mode.
My understanding, and what @shinyuna demonstrated in the reproduction, is that
unstable_allowDynamic
is supposed to allow us to tell Next.js that we aren't worried about the Edge runtime and we should be allowed to have Dynamic Code Evaluation. However, after adding the path tounstable_allowDynamic
we are still presented with the error and unable to create a production build. I thought the point ofunstable_allowDynamic
was to allow the build to work, please let me know if this is not the correct thinking.jer-k commentedon Jun 19, 2023
I did some debugging and re-created the issue in this repository https://github.com/jer-k/middleware-debug
On the
main
branch, everything works as expectedunstable_allowDynamic
andyarn build
workedOn the
yarnpnp
branch, I cannot get the build to work correctlyunstable_allowDynamic: ["**/node_modules/lodash/lodash.js"],
unstable_allowDynamic: ["./.yarn/cache/lodash-npm-4.17.21-6382451519-eb835a2e51.zip/node_modules/lodash/lodash.js"],
This leads me to believe the issue lies in the
isMatch
function here https://github.com/vercel/next.js/pull/39539/files#diff-f85f0611a4f531f0d0eb59c9818aff5717e1b1c4523a8ba55c37b263d5a492a4R258I'm not savvy enough to hook up my repository to a local version of next.js so I could see what is being passed in and debug further, but hopefully this reproduction is enough to get some help here.
Tagging @feugy as it looks like this feature was added via #39539
Thank you
jer-k commentedon Jun 20, 2023
Looks like I was able to resolve this. After adding the telemetry output I was able to see this
The matcher from the glob is expecting to match against
"/.yarn/cache/lodash-npm-4.17.21-6382451519-eb835a2e51.zip/node_modules/lodash/lodash.js"
which has just a leading/
. This is different from the logged message which had a leading./
The fixed absolute url can be seen here jer-k/middleware-debug@20a696e
Then I changed from an absolute path to a glob path.
unstable_allowDynamic: ["**/.yarn/cache/**/node_modules/lodash/*.js"]
. It appears that the**
matcher doesn't match on hidden directories, such as.yarn/
thus why the original**/node_modules/lodash/lodash.js
pattern did not allow the build to successfully finish. The change can be seen here jer-k/middleware-debug@664a96bThe solution might be a adjusting the logging to match what is passed into
fileWithDynamicCode
?grantmagdanz commentedon Jun 22, 2023
@jer-k how did you get that telemetry output? I'm running into the same issue but can't figure out what is wrong. I'm using pnpm and not yarnpnp. I tried with NEXT_TELEMETRY_DEBUG=1 but didn't see your output.
jer-k commentedon Jun 22, 2023
@grantmagdanz You have to include the
config
withunstable_allowDynamic
in yourmiddleware
file to get the telemetry to print out. As long as there is anything in there, it'll print.should suffice to get it printing. It only prints on the build command, so
yarn build
for me. Hope that helps!shinyuna commentedon Jun 22, 2023
I still get the same error.
The config value I set:
error log:
[-]using lodash-es & pnpm, Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime[/-][+]using lodash-es & pnpm & turberepo(monorepo), Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime[/+]jer-k commentedon Jun 22, 2023
@shinyuna Try
"**/.pnpm/**/node_modules/lodash-es/*.js"
you need to capture the../../node_modules
at the start of../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/_root.js
which**
will matchgrantmagdanz commentedon Jun 22, 2023
In case anyone else runs into this and is using Sentry,
withSentryConfig
breaksunstable_allowDynamic
. Everything else in the above is also true but I ran into issues because of Sentry. Filed an issue with Sentry: getsentry/sentry-javascript#8386shuding commentedon Jun 23, 2023
I think on the Next.js side, we will try to compile
Function('return this')()
into non-dynamic code (globalThis
) in the Edge Runtime. In the meantime, this seems like also a bug inunstable_allowDynamic
that needs to be addressed.Edge Runtime is not an infra, and it will be the runtime for Next.js middleware, and pages with
export const runtime = 'edge'
, no matter where you host the Next.js project.20 remaining items