`@clerk/[email protected]` cause a build warning in NextJS middleware #3660

arvinxx · 2024-07-03T17:19:17Z

Preliminary Checks

I have reviewed the documentation: https://clerk.com/docs
I have searched for existing issues: https://github.com/clerk/javascript/issues
I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)
This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction

https://github.com/lobehub/lobe-chat/tree/reproduction/clerk-nextjs-5.2.0

Publishable key

no need, it's a build time issue

Description

here is the build log:

   Creating an optimized production build ...
 ✓ (pwa) Compiling for server...
 ✓ (pwa) Compiling for server...
 ✓ (pwa) Compiling for client (static)...
 ○ (pwa) Service worker: /vercel/path1/public/sw.js
 ○ (pwa)   URL: /sw.js
 ○ (pwa)   Scope: /
 ⚠ Compiled with warnings
./node_modules/@clerk/nextjs/dist/esm/server/clerkMiddleware.js
A Node.js module is loaded ('async_hooks' at line 3) which is not supported in the Edge Runtime.
Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime
Import trace for requested module:
./node_modules/@clerk/nextjs/dist/esm/server/clerkMiddleware.js
./node_modules/@clerk/nextjs/dist/esm/server/index.js
./node_modules/@clerk/shared/dist/chunk-RSOCGYTF.mjs
A Node.js API is used (MessageEvent at line: 28) which is not supported in the Edge Runtime.
Learn more: https://nextjs.org/docs/api-reference/edge-runtime
Import trace for requested module:
./node_modules/@clerk/shared/dist/chunk-RSOCGYTF.mjs
./node_modules/@clerk/shared/dist/index.mjs
./node_modules/@clerk/nextjs/dist/esm/server/utils.js
./node_modules/@clerk/nextjs/dist/esm/server/clerkClient.js
./node_modules/@clerk/nextjs/dist/esm/server/index.js

you can see the error from @clerk/nextjs. please remove this usage:

javascript/packages/nextjs/src/server/clerkMiddleware.ts

Line 10 in 1a704ed

import { AsyncLocalStorage } from 'async_hooks';

Environment

Next.JS: 14.2.4
@nextjs/clerk: >=5.2.0

The text was updated successfully, but these errors were encountered:

LauraBeatris · 2024-07-03T21:00:04Z

Hi @arvinxx, thanks for raising the issue! We're working on a fix for it and it should be released soon.

LauraBeatris · 2024-07-04T13:42:24Z

@arvinxx The fix has been merged and will soon release a patch for @clerk/nextjs! 🫡

shawnesquivel · 2024-07-14T01:29:58Z

Hi @LauraBeatris I'm still facing what seems to be the same issue in my project

    "@clerk/nextjs": "^5.2.3",
    "next": "14.1.3",

middleware.ts

import { clerkMiddleware } from "@clerk/nextjs/server";

export default clerkMiddleware();

console.log("middleware called");

export const config = {
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

Error

 ⨯ node:async_hooks
Module build failed: UnhandledSchemeError: Reading from "node:async_hooks" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.
Import trace for requested module:
node:async_hooks
./node_modules/@clerk/nextjs/dist/esm/server/clerkMiddleware.js
./node_modules/@clerk/nextjs/dist/esm/server/index.js
./src/app/profile/[[...profile]]/page.jsx

LauraBeatris · 2024-07-14T01:32:07Z

Hi @LauraBeatris I'm still facing what seems to be the same issue in my project

    "@clerk/nextjs": "^5.2.3",
    "next": "14.1.3",

middleware.ts

import { clerkMiddleware } from "@clerk/nextjs/server";

export default clerkMiddleware();

console.log("middleware called");

export const config = {
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

Error

 ⨯ node:async_hooks
Module build failed: UnhandledSchemeError: Reading from "node:async_hooks" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.
Import trace for requested module:
node:async_hooks
./node_modules/@clerk/nextjs/dist/esm/server/clerkMiddleware.js
./node_modules/@clerk/nextjs/dist/esm/server/index.js
./src/app/profile/[[...profile]]/page.jsx

Hey @shawnesquivel! Thanks for reporting, I'm looking into this now and will keep you updated.

shawnesquivel · 2024-07-14T01:36:32Z

Thanks @LauraBeatris . I tried making a minimal repro with no luck – it seems to work on a fresh repo when using the quickstart instructions.

As an interim, here's what I've tried on my own project:

cleared .next directory, node_modules folders
verified that other Clerk components can be imported properly and used.

import { SignedOut, SignedIn, SignInButton } from "@clerk/nextjs";

pinpointed the error comes when I import this line of code on client/server components, regular/async components

import { auth, currentUser } from "@clerk/nextjs/server";

Let me know if there are specific actions I can take to help diagnose the issue better.

shawnesquivel · 2024-07-14T18:00:39Z

@LauraBeatris I can confirm that this issue has presently went away when I stopped using it in a client component, denoted by the "use client" directive.

The docs do say it should be able to be used in client components though, so I think it's still a bug worth noting.

https://clerk.com/docs/references/nextjs/read-session-data

LauraBeatris · 2024-07-15T11:49:28Z

@LauraBeatris I can confirm that this issue has presently went away when I stopped using it in a client component, denoted by the "use client" directive.

The docs do say it should be able to be used in client components though, so I think it's still a bug worth noting.

https://clerk.com/docs/references/nextjs/read-session-data

Hi @shawnesquivel! auth() and currentUser() are server-side APIs only to be used from Next.js app router.

On client components, useAuth should be used instead: https://clerk.com/docs/references/nextjs/read-session-data#client-side.

I agree that the error shown is confusing when using a server-side helper on a client-side component. On 5.1.0, the following was shown instead:

Error: Clerk: auth() was called but Clerk can't detect usage of clerkMiddleware() (or the deprecated authMiddleware()). Please ensure the following:
-  clerkMiddleware() (or the deprecated authMiddleware()) is used in your Next.js Middleware.
- Your Middleware matcher is configured to match this route or page.
- If you are using the src directory, make sure the Middleware file is inside of it.

We should either continue displaying it or work on a better error message.

joelrb · 2024-07-17T13:13:42Z

I just encountered this issue.

It seems that import { auth } from "@clerk/nextjs/server"; must be used in an async page.

It connection with the Import { auth }, the documentation displays const { userId } = auth(); and we just copy paste that into our code.

https://clerk.com/docs/references/nextjs/read-session-data

Kindly inform the team responsible for the documentatio to add await, thus const { userId } = await auth(); or explicitly say that's for server side.

Well, the Clerk team must improve the documentation so that we won't get this kind of simple issues and waste both your time and ours.

Thanks for your help.
Great product!

@LauraBeatris I can confirm that this issue has presently went away when I stopped using it in a client component, denoted by the "use client" directive.
The docs do say it should be able to be used in client components though, so I think it's still a bug worth noting.
https://clerk.com/docs/references/nextjs/read-session-data

Hi @shawnesquivel! auth() and currentUser() are server-side APIs only to be used from Next.js app router.

On client components, useAuth should be used instead: https://clerk.com/docs/references/nextjs/read-session-data#client-side.

I agree that the error shown is confusing when using a server-side helper on a client-side component. On 5.1.0, the following was shown instead:
Error: Clerk: auth() was called but Clerk can't detect usage of clerkMiddleware() (or the deprecated authMiddleware()). Please ensure the following:
-  clerkMiddleware() (or the deprecated authMiddleware()) is used in your Next.js Middleware.
- Your Middleware matcher is configured to match this route or page.
- If you are using the src directory, make sure the Middleware file is inside of it.
We should either continue displaying it or work on a better error message.

LauraBeatris · 2024-07-17T22:21:47Z

Hey everyone! We're actively working to improve the error message when server-side helpers are used in a client-side context.

I'll re-open this issue again and related to a PR soon.

sonnguyen-propte · 2024-10-17T04:32:26Z

Hi @LauraBeatris @shawnesquivel , I'm facing the same issue. Is there a way to resolve this?

philosofonusus · 2025-01-24T07:47:26Z

I have the same issue, in @clerk/nextjs version 6.10.1. Using nextjs version 13.1.6 with pages router. Is there any way to resolve it?

shawnesquivel · 2025-01-24T10:54:45Z

Hi @LauraBeatris @shawnesquivel , I'm facing the same issue. Is there a way to resolve this?

My fix was to not use it in a client component – you should use useAuth as mentioned from the Clerk dev.

arvinxx added the needs-triage A ticket that needs to be triaged by a team member label Jul 3, 2024

arvinxx mentioned this issue Jul 3, 2024

📌 chore: pin @clerk/nextjs to 5.1.6 lobehub/lobe-chat#3137

Merged

7 tasks

LauraBeatris self-assigned this Jul 3, 2024

LauraBeatris mentioned this issue Jul 3, 2024

fix(nextjs): Update imports to avoid Node.js build warnings on edge runtime #3661

Merged

9 tasks

LauraBeatris closed this as completed in #3661 Jul 4, 2024

clerk-cookie mentioned this issue Jul 4, 2024

ci(repo): Version packages #3665

Merged

LauraBeatris reopened this Jul 17, 2024

LekoArts added nextjs confirmed and removed needs-triage A ticket that needs to be triaged by a team member labels Jul 18, 2024

LauraBeatris mentioned this issue Jul 18, 2024

chore(nextjs): Introduce build-time error for server-only helpers on client-side #3758

Merged

9 tasks

LauraBeatris closed this as completed in #3758 Jul 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`@clerk/[email protected]` cause a build warning in NextJS middleware #3660

`@clerk/[email protected]` cause a build warning in NextJS middleware #3660

arvinxx commented Jul 3, 2024 •

edited

Loading

LauraBeatris commented Jul 3, 2024

LauraBeatris commented Jul 4, 2024

shawnesquivel commented Jul 14, 2024

LauraBeatris commented Jul 14, 2024 •

edited

Loading

shawnesquivel commented Jul 14, 2024 •

edited

Loading

shawnesquivel commented Jul 14, 2024 •

edited

Loading

LauraBeatris commented Jul 15, 2024 •

edited

Loading

joelrb commented Jul 17, 2024

LauraBeatris commented Jul 17, 2024

sonnguyen-propte commented Oct 17, 2024

philosofonusus commented Jan 24, 2025 •

edited

Loading

shawnesquivel commented Jan 24, 2025

@clerk/[email protected] cause a build warning in NextJS middleware #3660

@clerk/[email protected] cause a build warning in NextJS middleware #3660

Comments

arvinxx commented Jul 3, 2024 • edited Loading

Preliminary Checks

Reproduction

Publishable key

Description

Environment

LauraBeatris commented Jul 3, 2024

LauraBeatris commented Jul 4, 2024

shawnesquivel commented Jul 14, 2024

LauraBeatris commented Jul 14, 2024 • edited Loading

shawnesquivel commented Jul 14, 2024 • edited Loading

shawnesquivel commented Jul 14, 2024 • edited Loading

LauraBeatris commented Jul 15, 2024 • edited Loading

joelrb commented Jul 17, 2024

LauraBeatris commented Jul 17, 2024

sonnguyen-propte commented Oct 17, 2024

philosofonusus commented Jan 24, 2025 • edited Loading

shawnesquivel commented Jan 24, 2025

`@clerk/[email protected]` cause a build warning in NextJS middleware #3660

`@clerk/[email protected]` cause a build warning in NextJS middleware #3660

arvinxx commented Jul 3, 2024 •

edited

Loading

LauraBeatris commented Jul 14, 2024 •

edited

Loading

shawnesquivel commented Jul 14, 2024 •

edited

Loading

shawnesquivel commented Jul 14, 2024 •

edited

Loading

LauraBeatris commented Jul 15, 2024 •

edited

Loading

philosofonusus commented Jan 24, 2025 •

edited

Loading