`@clerk/nextjs@5.2.0` cause a build warning in NextJS middleware

arvinxx commented 4 months ago

Preliminary Checks

[X] I have reviewed the documentation: https://clerk.com/docs
[X] I have searched for existing issues: https://github.com/clerk/javascript/issues
[X] I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)
[X] 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:

https://github.com/clerk/javascript/blob/1a704ed9de3ad222ff17d10cb383639b2fc038b9/packages/nextjs/src/server/clerkMiddleware.ts#L10

Environment

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

LauraBeatris commented 4 months ago

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

LauraBeatris commented 4 months ago

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

shawnesquivel commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

@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 commented 4 months ago

@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 commented 3 months ago

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 commented 3 months ago

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 commented 3 weeks ago

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

clerk / javascript