错误:在Nextjs中使用Clerk时找不到ClerkInstanceContext。

huangapple go评论107阅读模式
英文:

Error: ClerkInstanceContext not found in Nextjs using for Clerk

问题

  • error node_modules/@clerk/shared/dist/esm/hooks/createContextAndHook.js (4:0) @ assertContextExists
  • error Error: ClerkInstanceContext not found
    null

错误:

未处理的运行时错误
错误:未找到ClerkInstanceContext

调用堆栈
assertContextExists
node_modules/@clerk/shared/dist/esm/hooks/createContextAndHook.js (4:0)
useCtx
node_modules/@clerk/shared/dist/esm/hooks/createContextAndHook.js (13:0)
HOC
node_modules/@clerk/clerk-react/dist/esm/components/withClerk.js (10:43)
renderWithHooks
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (10697:0)
updateFunctionComponent
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (15180:0)
mountLazyComponent
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (15620:0)
beginWork$1
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (17316:0)
beginWork
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25689:0)
performUnitOfWork
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24540:0)
workLoopSync
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24256:0)
renderRootSync
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24211:0)
recoverFromConcurrentError
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (23446:0)
performConcurrentWorkOnRoot
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (23352: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)
MessagePort.performWorkUntilDeadline
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (537:0)

我需要在主页上修复这个问题,并根据排列顺序进行核心调整。

英文:

Check this Photo

I am working on a project in which I have created a login dialog but I am getting an error which I am not able to solve, what is it I have given in the above photo and request you to answer it somehow.

- error node_modules/@clerk/shared/dist/esm/hooks/createContextAndHook.js (4:0) @ assertContextExists
- error Error: ClerkInstanceContext not found
null

ERROR:

Unhandled Runtime Error
Error: ClerkInstanceContext not found

Call Stack
assertContextExists
node_modules/@clerk/shared/dist/esm/hooks/createContextAndHook.js (4:0)
useCtx
node_modules/@clerk/shared/dist/esm/hooks/createContextAndHook.js (13:0)
HOC
node_modules/@clerk/clerk-react/dist/esm/components/withClerk.js (10:43)
renderWithHooks
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (10697:0)
updateFunctionComponent
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (15180:0)
mountLazyComponent
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (15620:0)
beginWork$1
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (17316:0)
beginWork
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25689:0)
performUnitOfWork
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24540:0)
workLoopSync
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24256:0)
renderRootSync
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24211:0)
recoverFromConcurrentError
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (23446:0)
performConcurrentWorkOnRoot
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (23352: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)
MessagePort.performWorkUntilDeadline
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (537:0)

I need to fix the problem on that home page and give it core as per arrangement

答案1

得分: 2

Your app/auth/layout.tsx and app/root/layout.tsx should be wrapped with <ClerkProvider>.

<ClerkProvider>
  <html>
     <body>
       (your code).
     </body>
  </html>
</ClerkProvider>
英文:

Your app/auth/layout.tsx and app/root/layout.tsx should be wrapped with &lt;ClerkProvider&gt;.

&lt;ClerkProvider&gt;
  &lt;html&gt;
     &lt;body&gt;
       (your code).
     &lt;/body&gt;
  &lt;/html&gt;
&lt;/ClerkProvider&gt;

huangapple
  • 本文由 发表于 2023年8月10日 12:01:43
  • 转载请务必保留本文链接:https://go.coder-hub.com/76872582.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定