A Node.js API is used (setImmediate at line: 51) which is not supported in the Edge Runtime.

zjrwtx commented 5 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/clerk/javascript

Publishable key

pk_test_123456789

Description

(base) PS F:\next13-ai-saas> yarn run build yarn run v1.22.22 $ next build

info Loaded env from F:\next13-ai-saas.env info Creating an optimized production build . [webpack.cache.PackFileCacheStrategy] Serializing big strings (101kiB) impacts deserialization performance (consider using Buffer instead and decode when needed) warn Compiled with warnings ./node_modules/scheduler/cjs/scheduler.production.min.js A Node.js API is used (setImmediate at line: 51) 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/scheduler/cjs/scheduler.production.min.js ./node_modules/scheduler/index.js ./node_modules/react-dom/cjs/react-dom.production.min.js ./node_modules/react-dom/index.js ./node_modules/@clerk/clerk-react/dist/esm/utils/useCustomElementPortal.js ./node_modules/@clerk/clerk-react/dist/esm/utils/index.js ./node_modules/@clerk/clerk-react/dist/esm/contexts/ClerkProvider.js ./node_modules/@clerk/clerk-react/dist/esm/contexts/index.js ./node_modules/@clerk/clerk-react/dist/esm/index.js ./node_modules/@clerk/nextjs/dist/esm/client-boundary/controlComponents.js ./node_modules/@clerk/nextjs/dist/esm/index.js

./node_modules/scheduler/cjs/scheduler.production.min.js A Node.js API is used (setImmediate at line: 51) 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/scheduler/cjs/scheduler.production.min.js ./node_modules/scheduler/index.js ./node_modules/react-dom/cjs/react-dom.production.min.js ./node_modules/react-dom/index.js ./node_modules/@clerk/clerk-react/dist/esm/utils/useCustomElementPortal.js ./node_modules/@clerk/clerk-react/dist/esm/utils/index.js ./node_modules/@clerk/clerk-react/dist/esm/contexts/ClerkProvider.js ./node_modules/@clerk/clerk-react/dist/esm/contexts/index.js ./node_modules/@clerk/clerk-react/dist/esm/index.js ./node_modules/@clerk/nextjs/dist/esm/client-boundary/controlComponents.js ./node_modules/@clerk/nextjs/dist/esm/index.js

./node_modules/scheduler/cjs/scheduler.production.min.js A Node.js API is used (MessageChannel at line: 120) 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/scheduler/cjs/scheduler.production.min.js ./node_modules/scheduler/index.js ./node_modules/react-dom/cjs/react-dom.production.min.js ./node_modules/react-dom/index.js ./node_modules/@clerk/clerk-react/dist/esm/utils/useCustomElementPortal.js ./node_modules/@clerk/clerk-react/dist/esm/utils/index.js ./node_modules/@clerk/clerk-react/dist/esm/contexts/ClerkProvider.js ./node_modules/@clerk/clerk-react/dist/esm/contexts/index.js ./node_modules/@clerk/clerk-react/dist/esm/index.js ./node_modules/@clerk/nextjs/dist/esm/client-boundary/controlComponents.js ./node_modules/@clerk/nextjs/dist/esm/index.js

./node_modules/scheduler/cjs/scheduler.production.min.js A Node.js API is used (MessageChannel at line: 121) 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/scheduler/cjs/scheduler.production.min.js ./node_modules/scheduler/index.js ./node_modules/react-dom/cjs/react-dom.production.min.js ./node_modules/react-dom/index.js ./node_modules/@clerk/clerk-react/dist/esm/utils/useCustomElementPortal.js ./node_modules/@clerk/clerk-react/dist/esm/utils/index.js ./node_modules/@clerk/clerk-react/dist/esm/contexts/ClerkProvider.js ./node_modules/@clerk/clerk-react/dist/esm/contexts/index.js ./node_modules/@clerk/clerk-react/dist/esm/index.js ./node_modules/@clerk/nextjs/dist/esm/client-boundary/controlComponents.js ./node_modules/@clerk/nextjs/dist/esm/index.js

./node_modules/@clerk/shared/dist/chunk-RSOCGYTF.mjs A Node.js API is used (MessageEvent at line: 27) 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/clerk-react/dist/esm/components/uiComponents.js ./node_modules/@clerk/clerk-react/dist/esm/components/index.js ./node_modules/@clerk/clerk-react/dist/esm/index.js ./node_modules/@clerk/nextjs/dist/esm/client-boundary/controlComponents.js ./node_modules/@clerk/nextjs/dist/esm/index.js

info Linting and checking validity of types .Failed to compile. ./components/ui/dialog.tsx:14:3 Type error: Property 'className' does not exist on type 'DialogPortalProps'.

12 | 13 | const DialogPortal = ({

14 | className, | ^ 15 | ...props 16 | }: DialogPrimitive.DialogPortalProps) => ( 17 | <DialogPrimitive.Portal className={cn(className)} {...props} /> error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Environment

F:\nextjsaisaas>npx envinfo --system --browsers --binaries --npmPackages
Need to install the following packages:
envinfo@7.11.1
Ok to proceed? (y) y

  System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 5800U with Radeon Graphics
    Memory: 4.27 GB / 15.31 GB
  Binaries:
    Node: 20.11.1 - E:\nodejs\node.EXE
    Yarn: 1.22.22 - E:\nodejs\node_global\yarn.CMD
    npm: 10.2.4 - E:\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (123.0.2420.65)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @clerk/nextjs: ^4.21.15 => 4.29.9
    @hookform/resolvers: ^3.1.1 => 3.3.4
    @prisma/client: ^5.0.0 => 5.11.0
    @radix-ui/react-avatar: ^1.0.3 => 1.0.4
    @radix-ui/react-dialog: ^1.0.4 => 1.0.5
    @radix-ui/react-dropdown-menu: ^2.0.5 => 2.0.6
    @radix-ui/react-label: ^2.0.2 => 2.0.2
    @radix-ui/react-progress: ^1.0.3 => 1.0.3
    @radix-ui/react-select: ^1.2.2 => 1.2.2
    @radix-ui/react-separator: ^1.0.3 => 1.0.3
    @radix-ui/react-slot: ^1.0.2 => 1.0.2
    @types/node: 20.4.1 => 20.4.1
    @types/react: 18.2.14 => 18.2.14
    @types/react-dom: 18.2.6 => 18.2.6
    autoprefixer: 10.4.14 => 10.4.14
    axios: ^1.4.0 => 1.6.8
    class-variance-authority: ^0.6.1 => 0.6.1
    clsx: ^1.2.1 => 1.2.1
    cmdk: ^0.2.0 => 0.2.1
    crisp-sdk-web: ^1.0.19 => 1.0.22
    eslint: 8.44.0 => 8.44.0
    eslint-config-next: 13.4.9 => 13.4.9
    lucide-react: ^0.259.0 => 0.259.0
    next: 13.4.9 => 13.4.9
    next-themes: ^0.2.1 => 0.2.1
    openai: ^3.3.0 => 3.3.0
    postcss: 8.4.25 => 8.4.25
    prisma: ^5.0.0 => 5.11.0
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    react-hook-form: ^7.45.1 => 7.51.2
    react-hot-toast: ^2.4.1 => 2.4.1
    react-markdown: ^8.0.7 => 8.0.7
    replicate: ^0.12.3 => 0.12.3
    stripe: ^12.13.0 => 12.18.0
    tailwind-merge: ^1.13.2 => 1.14.0
    tailwindcss: 3.3.2 => 3.3.2
    tailwindcss-animate: ^1.0.6 => 1.0.7
    typescript: 5.1.6 => 5.1.6
    typewriter-effect: ^2.20.1 => 2.21.0
    zod: ^3.21.4 => 3.22.4
    zustand: ^4.3.9 => 4.5.2

LekoArts commented 5 months ago

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Clerk!

jescalan commented 5 months ago

Hey there,

We have often seen this error come up when middleware is not imported from @clerk/nextjs/server - could you check your middleware import path and see if this is the issue?

zjrwtx commented 5 months ago

Hey there,

We have often seen this error come up when middleware is not imported from @clerk/nextjs/server - could you check your middleware import path and see if this is the issue?

hey there, it doesnt appear the problems you mention ,the problems appear when i run "next build"

zjrwtx commented 5 months ago

Hey there,

We have often seen this error come up when middleware is not imported from @clerk/nextjs/server - could you check your middleware import path and see if this is the issue?

freddyrangel commented 4 months ago

I'm having the same issue. Well, I'm unsure it's an actual "issue". It only occurs in Next 14.2 when running a production build with next build. It seems to just be printing to console but it's unclear if it's just a warning or a show stopper. I won't be able to confirm until I try deploying to production, but it will take a while for that.

zjrwtx commented 4 months ago

I'm having the same issue. Well, I'm unsure it's an actual "issue". It only occurs in Next 14.2 when running a production build with next build. It seems to just be printing to console but it's unclear if it's just a warning or a show stopper. I won't be able to confirm until I try deploying to production, but it will take a while for that.

thanks bro，waiting for your reply

jescalan commented 4 months ago

I see if the code example you showed that middleware is being imported from @clerk/nextjs and not @clerk/nextjs/server as mentioned before - could you try changing your import path to see if that resolves it?

freddyrangel commented 4 months ago

Woah that's so weird. It auto-magically just ... went away? Sorry I'm totally not being helpful here but I'll give you what I got for now but for some reason I can't reproduce anymore. Weird. Maybe someone else can reproduce?

Here's my output from npm run build

> divonic@0.1.0 build
> next build

  ▲ Next.js 14.2.1
  - Environments: .env.local

   Creating an optimized production build ...
 ✓ Compiled successfully
   Linting and checking validity of types ...
   Collecting page data ...
   Generating static pages (0/11) ...
   Generating static pages (2/11) 
   Generating static pages (5/11) 
   Generating static pages (8/11) 
 ✓ Generating static pages (11/11)
   Finalizing page optimization ...
   Collecting build traces ...

Route (app)                              Size     First Load JS
┌ ƒ /                                    2.39 kB         326 kB
├ ○ /_not-found                          879 B          89.3 kB
├ ƒ /api/run                             0 B                0 B
├ ƒ /api/solutions                       0 B                0 B
├ ƒ /api/tutor                           0 B                0 B
├ ○ /challenges                          3.49 kB         298 kB
├ ƒ /challenges/[challengeId]            364 kB          663 kB
├ ○ /privacy-policy                      9.5 kB          120 kB
└ ○ /terms-and-conditions                7.23 kB         117 kB
+ First Load JS shared by all            88.4 kB
  ├ chunks/7023-e4650b6b7c5a7ddc.js      31.5 kB
  ├ chunks/fd9d1056-5ee3151e8489ce74.js  53.6 kB
  └ other shared chunks (total)          3.3 kB

ƒ Middleware                             120 kB

○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand

middleware.ts:

import { authMiddleware } from "@clerk/nextjs";

// See https://clerk.com/docs/references/nextjs/auth-middleware
// for more information about configuring your Middleware
export default authMiddleware({
  // Allow signed out users to access the specified routes:
  publicRoutes: [
    "/",
  ],
});

export const config = {
  matcher: [
    // Exclude files with a "." followed by an extension, which are typically static files.
    // Exclude files in the _next directory, which are Next.js internals.
    "/((?!.+\\.[\\w]+$|_next).*)",
    // Re-include any files in the api or trpc folders that might have an extension
    "/(api|trpc)(.*)",
  ],
};

And package.json for good measure:

{
  "name": "divonic",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@clerk/nextjs": "^4.29.9",
    "@ebay/nice-modal-react": "^1.2.13",
    "@iconify/react": "^4.1.1",
    "@mdx-js/loader": "^3.0.0",
    "@mdx-js/react": "^3.0.0",
    "@next/mdx": "^14.0.4",
    "@nextui-org/react": "^2.2.9",
    "@tailwindcss/typography": "^0.5.10",
    "@types/mdx": "^2.0.10",
    "ace-builds": "^1.32.3",
    "firebase": "^10.10.0",
    "firebase-admin": "^12.0.0",
    "framer-motion": "^10.18.0",
    "lodash": "^4.17.21",
    "next": "^14.2.1",
    "next-themes": "^0.2.1",
    "openai": "^4.24.7",
    "prismjs": "^1.29.0",
    "raw-loader": "^4.0.2",
    "react": "^18.2.0",
    "react-ace": "^10.1.0",
    "react-dom": "^18.2.0",
    "react-scroll-to-bottom": "^4.2.0",
    "remark-gfm": "^4.0.0",
    "sonner": "^1.4.41",
    "usehooks-ts": "^3.0.1"
  },
  "devDependencies": {
    "@types/fs-extra": "^11.0.4",
    "@types/lodash": "^4.14.202",
    "@types/node": "^20",
    "@types/prismjs": "^1.26.3",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "^14.1.0",
    "eslint-config-prettier": "^9.1.0",
    "fs-extra": "^11.2.0",
    "postcss": "^8",
    "prettier": "^3.2.4",
    "prettier-plugin-tailwindcss": "^0.5.12",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

freddyrangel commented 4 months ago

Ok I was able to reproduce. I think NextJS caches builds so the error isn't triggered if you run the build a few times without changing the code. However when I blow away the cache, it comes back.

> divonic@0.1.0 build
> next build

  ▲ Next.js 14.2.1
  - Environments: .env.local

   Creating an optimized production build ...
(node:24335) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
 ⚠ Compiled with warnings

./node_modules/scheduler/cjs/scheduler.production.min.js
A Node.js API is used (setImmediate at line: 11) 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/scheduler/cjs/scheduler.production.min.js
./node_modules/scheduler/index.js
./node_modules/react-dom/cjs/react-dom.production.min.js
./node_modules/react-dom/index.js
./node_modules/@clerk/clerk-react/dist/esm/utils/useCustomElementPortal.js
./node_modules/@clerk/clerk-react/dist/esm/utils/index.js
./node_modules/@clerk/clerk-react/dist/esm/contexts/ClerkProvider.js
./node_modules/@clerk/clerk-react/dist/esm/contexts/index.js
./node_modules/@clerk/clerk-react/dist/esm/index.js
./node_modules/@clerk/nextjs/dist/esm/client-boundary/hooks.js
./node_modules/@clerk/nextjs/dist/esm/index.js

./node_modules/scheduler/cjs/scheduler.production.min.js
A Node.js API is used (setImmediate at line: 11) 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/scheduler/cjs/scheduler.production.min.js
./node_modules/scheduler/index.js
./node_modules/react-dom/cjs/react-dom.production.min.js
./node_modules/react-dom/index.js
./node_modules/@clerk/clerk-react/dist/esm/utils/useCustomElementPortal.js
./node_modules/@clerk/clerk-react/dist/esm/utils/index.js
./node_modules/@clerk/clerk-react/dist/esm/contexts/ClerkProvider.js
./node_modules/@clerk/clerk-react/dist/esm/contexts/index.js
./node_modules/@clerk/clerk-react/dist/esm/index.js
./node_modules/@clerk/nextjs/dist/esm/client-boundary/hooks.js
./node_modules/@clerk/nextjs/dist/esm/index.js

./node_modules/scheduler/cjs/scheduler.production.min.js
A Node.js API is used (MessageChannel at line: 14) 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/scheduler/cjs/scheduler.production.min.js
./node_modules/scheduler/index.js
./node_modules/react-dom/cjs/react-dom.production.min.js
./node_modules/react-dom/index.js
./node_modules/@clerk/clerk-react/dist/esm/utils/useCustomElementPortal.js
./node_modules/@clerk/clerk-react/dist/esm/utils/index.js
./node_modules/@clerk/clerk-react/dist/esm/contexts/ClerkProvider.js
./node_modules/@clerk/clerk-react/dist/esm/contexts/index.js
./node_modules/@clerk/clerk-react/dist/esm/index.js
./node_modules/@clerk/nextjs/dist/esm/client-boundary/hooks.js
./node_modules/@clerk/nextjs/dist/esm/index.js

./node_modules/scheduler/cjs/scheduler.production.min.js
A Node.js API is used (MessageChannel at line: 14) 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/scheduler/cjs/scheduler.production.min.js
./node_modules/scheduler/index.js
./node_modules/react-dom/cjs/react-dom.production.min.js
./node_modules/react-dom/index.js
./node_modules/@clerk/clerk-react/dist/esm/utils/useCustomElementPortal.js
./node_modules/@clerk/clerk-react/dist/esm/utils/index.js
./node_modules/@clerk/clerk-react/dist/esm/contexts/ClerkProvider.js
./node_modules/@clerk/clerk-react/dist/esm/contexts/index.js
./node_modules/@clerk/clerk-react/dist/esm/index.js
./node_modules/@clerk/nextjs/dist/esm/client-boundary/hooks.js
./node_modules/@clerk/nextjs/dist/esm/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/clerk-react/dist/esm/components/uiComponents.js
./node_modules/@clerk/clerk-react/dist/esm/components/index.js
./node_modules/@clerk/clerk-react/dist/esm/index.js
./node_modules/@clerk/nextjs/dist/esm/client-boundary/hooks.js
./node_modules/@clerk/nextjs/dist/esm/index.js

 ✓ Linting and checking validity of types
   Collecting page data  ...(node:24651) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
 ✓ Collecting page data
   Generating static pages (1/11)  [=   ](node:24681) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
 ✓ Generating static pages (11/11)
 ✓ Collecting build traces
 ✓ Finalizing page optimization

Route (app)                              Size     First Load JS
┌ ƒ /                                    1.75 kB         449 kB
├ ○ /_not-found                          879 B          89.3 kB
├ ƒ /api/run                             0 B                0 B
├ ƒ /api/solutions                       0 B                0 B
├ ƒ /api/tutor                           0 B                0 B
├ ○ /challenges                          3.5 kB          421 kB
├ ƒ /challenges/[challengeId]            241 kB          664 kB
├ ○ /privacy-policy                      8.89 kB         242 kB
└ ○ /terms-and-conditions                6.62 kB         240 kB
+ First Load JS shared by all            88.4 kB
  ├ chunks/7023-e4650b6b7c5a7ddc.js      31.5 kB
  ├ chunks/fd9d1056-5ee3151e8489ce74.js  53.6 kB
  └ other shared chunks (total)          3.3 kB

ƒ Middleware                             120 kB

○  (Static)   prerendered as static content
ƒ  (Dynamic)  server-rendered on demand

panteliselef commented 4 months ago

This issue should no longer exist in @clerk/nextjs v5

dimkl commented 4 months ago

Closing this issue as it should be resolved in @clerk/nextjs@v5. Feel free to re-open it.

clerk / javascript