Unhandled Runtime Error

[abisao1]

Unhandled Runtime Error

Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function Call Stack undefined node_modules/@radix-ui/react-direction/dist/index.mjs (4:82) (rsc)/./node_modules/@radix-ui/react-direction/dist/index.mjs /Users/hassan/Desktop/Projects/NextJS/pms/.next/server/vendor-chunks/@radix-ui.js (1222:1) webpack_require /Users/hassan/Desktop/Projects/NextJS/pms/.next/server/webpack-runtime.js (33:43) eval webpack-internal:///(rsc)/./node_modules/@radix-ui/react-roving-focus/dist/index.mjs (19:83) (rsc)/./node_modules/@radix-ui/react-roving-focus/dist/index.mjs /Users/hassan/Desktop/Projects/NextJS/pms/.next/server/vendor-chunks/@radix-ui.js (1262:1) webpack_require /Users/hassan/Desktop/Projects/NextJS/pms/.next/server/webpack-runtime.js (33:43) eval webpack-internal:///(rsc)/./node_modules/@radix-ui/react-tabs/dist/index.mjs (17:86) (rsc)/./node_modules/@radix-ui/react-tabs/dist/index.mjs /Users/hassan/Desktop/Projects/NextJS/pms/.next/server/vendor-chunks/@radix-ui.js (1282:1) webpack_require /Users/hassan/Desktop/Projects/NextJS/pms/.next/server/webpack-runtime.js (33:43) eval webpack-internal:///(rsc)/./src/component/ui/tabs.tsx (11:78) (rsc)/./src/component/ui/tabs.tsx /Users/hassan/Desktop/Projects/NextJS/pms/.next/server/app/app/dashboard/page.js (641:1) webpack_require /Users/hassan/Desktop/Projects/NextJS/pms/.next/server/webpack-runtime.js (33:43) eval webpack-internal:///(rsc)/./src/app/app/dashboard/page.tsx (7:76) (rsc)/./src/app/app/dashboard/page.tsx /Users/hassan/Desktop/Projects/NextJS/pms/.next/server/app/app/dashboard/page.js (435:1) Function.webpack_require /Users/hassan/Desktop/Projects/NextJS/pms/.next/server/webpack-runtime.js (33:43) process.processTicksAndRejections node:internal/process/task_queues (95:5) async ez /Users/hassan/Desktop/Projects/NextJS/pms/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:395759) async t7 /Users/hassan/Desktop/Projects/NextJS/pms/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (38:5732) async /Users/hassan/Desktop/Projects/NextJS/pms/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (38:7840) async t7 /Users/hassan/Desktop/Projects/NextJS/pms/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (38:7607) async /Users/hassan/Desktop/Projects/NextJS/pms/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (38:7840) async t7 /Users/hassan/Desktop/Projects/NextJS/pms/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (38:7607) async /Users/hassan/Desktop/Projects/NextJS/pms/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (38:7840) async t7 /Users/hassan/Desktop/Projects/NextJS/pms/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (38:7607) async /Users/hassan/Desktop/Projects/NextJS/pms/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (38:10118)

[cstayyab]

Please provide full details about the libraries are you using with radix-ui or if you are directly using Radix-UI.

In case you are using Shadcn UI, you need to add "use client" at the start of components that are causing the issue. In my case there were two components:

1. form.tsx
2. navigation-menu.tsx

[Geraldf]

I had the same issue, and adding "use client" as the first line, did solve the issue. thanks

[abisao1]

Thanks for heads up.

I have resolved the issue with “use client” but I have landed into below issue:

Unhandled Runtime Error Error: RovingFocusGroupItem must be used within RovingFocusGroup Call Stack useContext @./react-context/dist/index.mjs (55:0) $d7bdfb9eb0fdf311$export$ab9df7c53fe8454< @./react-roving-focus/dist/index.mjs (143:0) renderWithHooks node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (10930:0) updateForwardRef node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (15574:0) beginWork$1 node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (18317:0) beginWork node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26647:0) performUnitOfWork node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25493:0) workLoopSync node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25209:0) renderRootSync node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25164:0) recoverFromConcurrentError node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24381:0) performConcurrentWorkOnRoot node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24326:0) workLoop node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (261:0) flushWork node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (230:0) performWorkUntilDeadline node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (534:0)

From: Gerald Fuchs @.> Date: Sunday, 3 December 2023 at 10:00 AM To: radix-ui/primitives @.> Cc: abisao1 @.>, Author @.> Subject: Re: [radix-ui/primitives] Unhandled Runtime Error (Issue #2559)

I had the same issue, and adding "use client" as the first line, did solve the issue. thanks

— Reply to this email directly, view it on GitHubhttps://github.com/radix-ui/primitives/issues/2559#issuecomment-1837401719, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ADTY6L3QZPK4RMSQZVDVFM3YHQWR5AVCNFSM6AAAAABADNBMVOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMZXGQYDCNZRHE. You are receiving this because you authored the thread.Message ID: @.***>

[abisao1]

Below is my code:

'use client'

import React from 'react'; import * as Tabs from @.***/react-tabs';

export const TabsMenuItem = ({ children, value } : {children: React.ReactNode, value: string}) => { return ( <Tabs.Trigger className="bg-white px-5 h-[45px] flex-1 flex items-center justify-center text-[15px] leading-none text-mauve11 select-none first:rounded-tl-md last:rounded-tr-md hover:text-violet11 data-[state=active]:text-violet11 data-[state=active]:shadow-[inset_0_-1px_0_0,0_1px_0_0] data-[state=active]:shadow-current data-[state=active]:focus:relative data-[state=active]:focus:shadow-[0_0_0_2px] data-[state=active]:focus:shadow-black outline-none cursor-default" value={ value } > { children } </Tabs.Trigger> ) }

export const TabsMenuContent = ({ children, value } : {children: React.ReactNode, value: string}) => { return ( <Tabs.Content className="grow p-5 bg-white rounded-b-md outline-none focus:shadow-[0_0_0_2px] focus:shadow-black" value={ value } > { children } </Tabs.Content> ) }

export const TabsMenu = ({ children, defaultValue } : {children: React.ReactNode, defaultValue: string}) => { return ( <Tabs.Root className="flex flex-col w-[300px] shadow-[0_2px_10px] shadow-blackA2" defaultValue={ defaultValue }

{ children }

</Tabs.Root> ) }

From: hassan abisao @.> Date: Sunday, 3 December 2023 at 1:01 PM To: radix-ui/primitives @.>, radix-ui/primitives @.> Cc: Author @.> Subject: Re: [radix-ui/primitives] Unhandled Runtime Error (Issue #2559) Thanks for heads up.

I have resolved the issue with “use client” but I have landed into below issue:

Unhandled Runtime Error Error: RovingFocusGroupItem must be used within RovingFocusGroup Call Stack useContext @./react-context/dist/index.mjs (55:0) $d7bdfb9eb0fdf311$export$ab9df7c53fe8454< @./react-roving-focus/dist/index.mjs (143:0) renderWithHooks node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (10930:0) updateForwardRef node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (15574:0) beginWork$1 node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (18317:0) beginWork node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26647:0) performUnitOfWork node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25493:0) workLoopSync node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25209:0) renderRootSync node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25164:0) recoverFromConcurrentError node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24381:0) performConcurrentWorkOnRoot node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24326:0) workLoop node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (261:0) flushWork node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (230:0) performWorkUntilDeadline node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (534:0)

From: Gerald Fuchs @.> Date: Sunday, 3 December 2023 at 10:00 AM To: radix-ui/primitives @.> Cc: abisao1 @.>, Author @.> Subject: Re: [radix-ui/primitives] Unhandled Runtime Error (Issue #2559)

I had the same issue, and adding "use client" as the first line, did solve the issue. thanks

— Reply to this email directly, view it on GitHubhttps://github.com/radix-ui/primitives/issues/2559#issuecomment-1837401719, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ADTY6L3QZPK4RMSQZVDVFM3YHQWR5AVCNFSM6AAAAABADNBMVOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMZXGQYDCNZRHE. You are receiving this because you authored the thread.Message ID: @.***>

[abisao1]

I figured it out. Thanks

[rockyessel]

Got the same error, tried the solution above, but didn't work for me.

When it started: It started this morning suddenly when I tried to visit /api/users in my next.js application, then I got the error and also got the same error when I visited it in the browser myself. So I thought it was Mongosse, so I spent the whole day learning and re-writing everything in supabase, and using "use server" this time. But a few minutes ago, I ran theW app, and this time I got the same error on the page.tsx and not on the API routes.

The solution I tried:

1. "use client"
2. Re-written my whole db in supbase with drizzle orm,
3. Tried changing my auth from next-auth to kinde auth()Still didn't solve the problem.
4. Updated my entire package
5. Using Next.14.0.4 Error:

⨯ node_modules/@radix-ui/react-context/dist/index.mjs (34:63) @ defaultContext
 ⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
    at $c512c27ab02ef895$export$fd42f52fd3ae1109 (webpack-internal:///(rsc)/./node_modules/@radix-ui/react-context/dist/index.mjs:37:95)
    at eval (webpack-internal:///(rsc)/./node_modules/@radix-ui/react-checkbox/dist/index.mjs:33:92)
    at (rsc)/./node_modules/@radix-ui/react-checkbox/dist/index.mjs (/home/rockyessel/Desktop/clogarr/blogengine/.next/server/vendor-chunks/@radix-ui.js:290:1)
    at __webpack_require__ (/home/rockyessel/Desktop/clogarr/blogengine/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./src/lib/utils/constants/index.tsx:22:82)
    at (rsc)/./src/lib/utils/constants/index.tsx (/home/rockyessel/Desktop/clogarr/blogengine/.next/server/app/(root)/home/account/[authType]/page.js:857:1)
    at __webpack_require__ (/home/rockyessel/Desktop/clogarr/blogengine/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./src/lib/db/queries/users.ts:16:78)
    at (rsc)/./src/lib/db/queries/users.ts (/home/rockyessel/Desktop/clogarr/blogengine/.next/server/app/(root)/home/account/[authType]/page.js:770:1)
    at __webpack_require__ (/home/rockyessel/Desktop/clogarr/blogengine/.next/server/webpack-runtime.js:33:43) {
  type: 'TypeError',
  page: '/home/account/sign-up'
}
null
 ○ Compiling /_error ...
 ✓ Compiled /_error in 6.5s (1389 modules)

Using Radix with SchadCN.

[connorwforsyth]

Also solved for me using "use client" Thanks!

[Poylar]

in my case, i try to use <Tabs.Trigger> outside <Tabs,List>, but i guess Tabs trigger must be placed inside tabs list