"Error: The Edge Function "middleware" is referencing unsupported modules: crypto" upon deployment to vercel with next-auth

[Tasselhat]

Operating System:
Platform: win32
Arch: x64
Version: Windows 10 Pro
Binaries:
Node: 16.15.1
npm: 9.4.0
Yarn: N/A
pnpm: N/A
Relevant packages:
next: 13.1.5
eslint-config-next: 13.0.6
react: 18.2.0
react-dom: 18.2.0
next-auth: 4.18.10
mongodb: 4.13.0
@auth0/nextjs-auth0: 2.0.1
@next-auth/mongodb-adapter: 1.1.1

also using appDir: True

I'm using next-auth package to protect routes, but upon deployment to Vercel am getting the error:

Build Completed in /vercel/output [40s]
Error: The Edge Function "middleware" is referencing unsupported modules: crypto, crypto, crypto

I don't believe crypto is required within the middleware

middlewear.ts

export { default } from "next-auth/middleware";

export const config = {
    matcher: ["/admin/:path*", "/search/:path*", "/dashboard/:path*"],
};

Any help is appreciated, I can provide further info just not sure what would be causing this.

[icyJoseph]

Hi,

Do you still see if your downgrade next-auth/middleware? Typically this error happens only at midddleware level, so your auth file shouldn't really matter, but you never know... Kind of weird that it doesn't log where crypto is used, or perhaps you could include that?

Also make sure to remove .next and re-install node_modules. Hopefully this is not a windows specific issue. Or that a 3rd party dependency has broken something in their code.

Just tried this in a couple of projects, and no issues were present. I haven't implemented the [...nextauth].js file though, but I don't think that should matter for middleware.

[icyJoseph]

Thanks! I'll take a look first thing tomorrow! (Late on my time zone)

You could go ask in the next-auth repository! With that reproduction repo as well!

[khuezy]

Found the issue. I'm not sure if this is a jose issue or a esbuild bundling issue, but jose assumes crypto and CryptoKey are globally available, ie imported somewhere. If it's a bundling issue, then that reference somehow gets lost.

To solve this issue, I injected import crypto from 'node:crypto' and const CryptoKey = crypto.webcrypto.CryptoKey at the top of the bundled script and everything works now.

[marco-digennaro]

Having the same issue:

Error: The Edge Function "middleware" is referencing unsupported modules:

17:01:23.624 | - middleware.js: @/utils, next-intl/middleware
17:01:23.624 | - next: stream, fs, url
17:01:24.129 | Deployment completed
17:01:23.741 | NOW_SANDBOX_WORKER_EDGE_FUNCTION_UNSUPPORTED_MODULES: The Edge Function "middleware" is referencing unsupported modules: - middleware.js: @/utils, next-intl/middleware - next: stream, fs, url

[muke5hy]

Getting the same issue with Nextjs and Next-auth

Error: The Edge Function "middleware" is referencing unsupported modules:

19:41:32.334 | - next: stream, fs, url
19:41:34.376 | NOW_SANDBOX_WORKER_EDGE_FUNCTION_UNSUPPORTED_MODULES: The Edge Function "middleware" is referencing unsupported modules: - next: stream, fs, url

I am on the following version

"next": "13.4.3",
"next-auth": "4.22.1",

[marco-digennaro]

Getting the same issue with Nextjs and Next-auth

Error: The Edge Function "middleware" is referencing unsupported modules:

19:41:32.334 | - next: stream, fs, url
19:41:34.376 | NOW_SANDBOX_WORKER_EDGE_FUNCTION_UNSUPPORTED_MODULES: The Edge Function "middleware" is referencing unsupported modules: - next: stream, fs, url

I am on the following version

"next": "13.4.3",
"next-auth": "4.22.1",

Same versions for me.
Is there any date planned for the release of the new version of Auth.js?

[IonelLupu]

I just got a similar error:

Error: The Edge Function "middleware" is referencing unsupported modules:
--
10:38:13.200 | - index.js: ./resvg.wasm?module, ./yoga.wasm?module
10:38:15.234 | NOW_SANDBOX_WORKER_EDGE_FUNCTION_UNSUPPORTED_MODULES: The Edge Function "middleware" is referencing unsupported modules:	- index.js: ./resvg.wasm?module, ./yoga.wasm?module

I don't even have these keywords in my code

[IonelLupu]

I found something really weird. I created an issue for it: #50492

[boulaycote]

I had the same issue. I deleted my project and redeployed without changing anything... it worked. Anything to do with the build cache?

[IonelLupu]

I did the same, but when I started to add the same configs to it, I got the error again. Here is the issue that explains how to replicate it: #50492

[tungvn]

I got the same issue and found a way to fix it.

In the Project Settings > Build & Development Settings, I changed the Framework Presets from Others to Next.js and it worked perfectly.

Hope it help!

[arpit3210]

Thanks 👍🏻

[khitishkumar18]

Where is the project settings which u r telling ?can anyone tell me

[arpit3210]

@khitishkumar18

Go to Vercel > Settings > General > Build & Development Settings > Framework Preset > Set to -- Next.js

I hope everything is clear now.

[ashishsah1000]

This is not working for me. Mine is already selected to Next.js and this is the error:

Error: The Edge Function "index" is referencing unsupported modules:
	- __vc__ns__/0/index.js: ./empty-GlqisfcO.js, ./index-BIqdkLuE.js, ./index-DFn6bF3J.js, ./url-Dkx9cvHv.js

[maxeth]

Aye, you saved me. 🙌

The framework indeed isn't auto-detected in large monorepos.

[ashishsah1000]

Unable to deploy on vercel. Last major changes that I did was added "lucid-react" icons. No error while building it in my local machine, while on vercel it shows this:

[09:38:44.428] Running build in Washington, D.C., USA (East) – iad1
[09:38:44.602] Cloning github.com/ashishsah1000/edu_prototype (Branch: main, Commit: 4e85275)
[09:38:45.388] Cloning completed: 783.254ms
[09:39:21.950] Restored build cache
[09:39:22.117] Running "vercel build"
[09:39:23.836] Vercel CLI 34.3.0
[09:39:24.572] Running "install" command: `npm install`...
[09:39:30.133] npm WARN deprecated npmlog@5.0.1: This package is no longer supported.
[09:39:30.135] npm WARN deprecated are-we-there-yet@2.0.0: This package is no longer supported.
[09:39:30.137] npm WARN deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
[09:39:30.373] npm WARN deprecated @humanwhocodes/config-array@0.11.14: Use @eslint/config-array instead
[09:39:30.638] npm WARN deprecated gauge@3.0.2: This package is no longer supported.
[09:39:38.367] 
[09:39:38.367] added 45 packages, removed 210 packages, changed 248 packages, and audited 706 packages in 13s
[09:39:38.368] 
[09:39:38.368] 171 packages are looking for funding
[09:39:38.368]   run `npm fund` for details
[09:39:38.376] 
[09:39:38.376] 4 vulnerabilities (1 moderate, 3 high)
[09:39:38.376] 
[09:39:38.376] To address all issues (including breaking changes), run:
[09:39:38.376]   npm audit fix --force
[09:39:38.377] 
[09:39:38.377] Run `npm audit` for details.
[09:39:38.407] Detected Next.js version: 14.2.4
[09:39:38.408] Running "npm run build"
[09:39:38.718] 
[09:39:38.718] > postgres-starter@0.0.0 build
[09:39:38.718] > next build
[09:39:38.718] 
[09:39:39.412]   ▲ Next.js 14.2.4
[09:39:39.413] 
[09:39:39.486]    Creating an optimized production build ...
[09:40:31.282]  ✓ Compiled successfully
[09:40:31.284]    Linting and checking validity of types ...
[09:40:44.272]    Collecting page data ...
[09:40:45.172] 
[09:40:45.185] 
[09:40:45.512]  ⚠ Using edge runtime on a page currently disables static generation for that page
[09:40:47.917]    Generating static pages (0/59) ...
[09:40:48.662]    Generating static pages (14/59) 
[09:40:52.811]    Generating static pages (29/59) 
[09:41:02.218] ├ ƒ /api/post/user                       0 B                0 B
[09:41:02.218] ├ ƒ /api/profile                         0 B                0 B
[09:41:02.218] ├ ƒ /api/search                          0 B                0 B
[09:41:02.218] ├ ƒ /api/search/posts                    0 B                0 B
[09:41:02.219] ├ ○ /api/users                           0 B                0 B
[09:41:02.219] ├ ○ /bookings                            316 B           525 kB
[09:41:02.219] ├ ○ /dumb                                142 B          87.5 kB
[09:41:02.219] ├ ○ /ignite                              403 B          87.8 kB

[09:41:02.220] + First Load JS shared by all            87.4 kB
[09:41:02.220]   ├ chunks/526-071a949821a87699.js       31.7 kB
[09:41:02.220]   ├ chunks/fd9d1056-8c4fa5ea2500dc91.js  53.6 kB
[09:41:02.220]   └ other shared chunks (total)          2.04 kB
[09:41:02.220] 
[09:41:02.220] 
[09:41:02.221] ○  (Static)   prerendered as static content
[09:41:02.221] ƒ  (Dynamic)  server-rendered on demand
[09:41:02.221] 
[09:41:02.589] Traced Next.js server files in: 42.829ms
[09:41:14.078] Created all serverless functions in: 11.487s
[09:41:14.492] Collected static files (public/, static/, .next/static): 8.296ms
[09:41:14.606] Build Completed in /vercel/output [2m]
[09:41:14.888] Deploying outputs...
[09:41:44.017] Injected preview comments middleware, you can disable this in your project settings.
_[09:41:47.051] Error: The Edge Function "index" is referencing unsupported modules:
[09:41:47.051] 	- __vc__ns__/0/index.js: ./empty-GlqisfcO.js, ./index-BIqdkLuE.js, ./index-DFn6bF3J.js, ./url-Dkx9cvHv.js
[09:41:49.341]_ 

[ashishsah1000]

due to react-icons the node server was taking around 8GB of memory and kept on growing, when I removed react-icons and switched to lucid-icons, now it takes around 1-1.5GB. But since then my vercel build kept failing while local build does not show any error.