Can not use async/await in middleware

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #202203111231 SMP PREEMPT Fri Mar 11 12:59:53 UTC 2022
    Binaries:
      Node: 16.13.1
      npm: 8.1.2
      Yarn: 1.22.17
      pnpm: N/A
    Relevant packages:
      next: 12.1.4
      react: 17.0.1
      react-dom: 17.0.1

What browser are you using? (if relevant)

N/A

How are you deploying your application? (if relevant)

N/A

Describe the Bug

When using middleware, next build throws an error when using async/await in the middleware function (or a function imported by the middleware).

Error:

Dynamic Code Evaluation (e. g. 'eval', 'new Function') not allowed in Middleware pages/library/_middleware

Expected Behavior

No error to be thrown. I am expecting no error because async/await is fully support as per the middleware documentation.

Also when I change my code to use native Promises instead of async/await, next build works fine.

To Reproduce

I am having a hard time reproducing it, but this is what I found:

To my knowledge, the regenerator-runtime is shim/polyfill/whatever that is used to support async/await both in the browser and node.

I believe the error I am seeing above is from the static code analysis, and not an actual compilation error.

I traced the error back to here: https://github.com/vercel/next.js/blob/canary/packages/next/build/webpack/plugins/middleware-plugin.ts#L239

I noticed that the error is not thrown if the module.identifier is regenerator-runtime! However, the path seems to only be allowed to be a specific path/filename. I then noticed that (for some reason) my build is pulling in this path as the regenerator-runtime:

node_modules/next/dist/compiled/@babel/runtime/regenerator/index.js

It looks like that is a valid path because the file is just one line that pulls in the actual regenerator-runtime from node_modules/next/dist/compiled/regenerator-runtime/runtime.js (and this is the file path that seems to match the regex).

I’m not sure how to reporduce because I am not sure why Next.js is pulling in this other file for the regenerator-runtime that doesn’t match the regex.

[michael-pomelo]

Further development on this: I now believe this comes from un-transpiled dependencies. We use a monorepo so we use https://www.npmjs.com/package/next-transpile-modules to transpile our shared code. If I have a shared function that uses async/await and import it into my middleware, I get this error.

If I copy/paste the same code into my Next.js directory, I don’t get an error and it works fine.

[tmilewski]

Just wanted to follow up on @michael-pomelo’s discovery…

When using Nx…

Importing from a middleware-specific project: On serve: Success On build: ../../node_modules/next/dist/compiled/regenerator-runtime/runtime.js error.

Placing all code from said middleware-specific project directly into the _middleware.ts file: On serve: Success On build: Success