6

I've been developing a thread video from JS Mastery and got hit by this error:

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

can anyone help me?

I tried a lot of things but nothing seems to resolve my problem

Mattia Righetti
  • 1,265
  • 1
  • 18
  • 31
killuaconfessions
  • 69
  • 3

6 Answers6

3

Have you checked if the <ClerkProvider/> component has been correctly set up in your application? As per the documentation, It is recommended that the <ClerkProvider> wraps the <body> to enable the context to be accessible anywhere within the app.

<ClerkProvider>
  <html lang="en">
    <body className={inter.className}>{children}</body>
  </html>
</ClerkProvider>
user17978165
  • 31
  • 1
2

Wrap Your all Layout.tsx tags with ClerkProvider tags

 <ClerkProvider>
    <html lang="en">
      <body className={`${inter.className} `}>
        {/* App */}
        <TopBar />
        <main>
          <LeftSidebar />
          <section className="main-container">
            <div className="w-full max-w-4xl">
              {children}
            </div>
          </section>
          <RightSidebar />
        </main>
        <BottomBar />
        {/* App */}
      </body>
    </html>
  </ClerkProvider>

I was facing the same problem, go to your (root)/layout.tsx and (auth)/layout.tsx, wrap tag with ClerkProvider tags

and dont forget the import statement

import { ClerkProvider } from "@clerk/nextjs";
Pratyay Roy
  • 3
  • 1
y17godara
  • 49
  • 8
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 09 '23 at 15:32
1

Turns out i was also facing the same issue and as the user "user17978165" has mentioned above haed to app/root/layout.tsx and update the code to

<ClerkProvider>
 <html lang="en">
   <body className={inter.className}>
     <Topbar/>
       <main>
         <LeftSidebar/>
           <section className='main-container'>
             <div className="w-full max-w-4xl">
              {children}
             </div>
           </section>
         <RightSidebar/>
       </main>
     <Bottombar/>
   </body>
 </html>
</ClerkProvider>
bablu1921
  • 11
  • 1
0

add ClerkProvider to (root) layout.tsx and add the existing HTML tag in ClerkProvider

Vinod Vyavhare
  • 5
  • 2
0

http://localhost:3000/sign-up route to the sign-up page, then you will be able to signup with clerk

Rahul Jha
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 12 '23 at 11:41
0

Issue: You're encountering the "Error: ClerkInstanceContext not found" when using the command: npm run dev.

Solution: To resolve this issue, please make sure to wrap your app with a ClerkProvider, like so:

return (
    <ClerkProvider>
        <html lang='en'>
            <body className={inter.className}>
            </body>
        </html>
    </ClerkProvider>
)

Note: This includes both /auth/layout.tsx and root/layout.tsx. Also remember to import the ClerkProvider for these files as well, using import { ClerkProvider } from "@clerk/nextjs;" from top.

Explanation: The ClerkInstanceContext is part of Clerk's authentication system. By wrapping your app with ClerkProvider, you ensure that the necessary context is available throughout your app.

Good luck!

Löta Digital
  • 11