Script Loading

It sometimes might happen that Clerk doesn't successfully load and initialize during page rendering. This could happen for a myriad of reasons, including but not limited to:

• You have no internet connection
• The CDN which is used for the ClerkJS script is offline or blocked
• Another script is colliding with Clerk
• Missing or invalid Publishable key

Check your internet access and that e.g. no Ad-Blocker is blocking Clerk's scripts.

If Clerk stops working after you've added another script (e.g. through a React component), you can try delaying the loading of that other script. For example, to only mount @monaco-editor/react after Clerk loaded you can use the useClerk() hook:

import { Editor } from "@monaco-editor/react";
import { useClerk } from "@clerk/nextjs";
 
export default function Home() {
  const clerk = useClerk()
  
  return (
    <main>
      {clerk.loaded && <Editor />}
    </main>
  );
}

Last updated on October 31, 2023