wip

jacekradko · jacekradko · commit b6431b110103 · 2025-05-29T13:20:55.000-05:00
diff --git a/packages/nextjs/src/utils/clerk-js-script.tsx b/packages/nextjs/src/utils/clerk-js-script.tsx
@@ -1,5 +1,6 @@
 import { useClerk } from '@clerk/clerk-react';
 import { buildClerkJsScriptAttributes, clerkJsScriptUrl } from '@clerk/clerk-react/internal';
+import Head from 'next/head';
 import NextScript from 'next/script';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 
@@ -149,17 +150,14 @@ function useClerkJSLoadingState() {
 /**
  * Enhanced ClerkJS Script component with bulletproof load detection.
  *
- * This component renders TWO script tags:
- * 1. A render-blocking inline script that sets up the coordinator globally
- * 2. The actual ClerkJS script tag (which the coordinator will manage)
- *
- * The coordinator uses comprehensive DOM interception to catch scripts regardless
- * of where they're placed (head, body, or injected dynamically).
+ * This component ensures the blocking coordinator is loaded in the document head
+ * before any ClerkJS scripts, regardless of the router type.
  */
 function ClerkJSScript(props: ClerkJSScriptProps) {
   const { publishableKey, clerkJSUrl, clerkJSVersion, clerkJSVariant, nonce } = useClerkNextOptions();
   const { domain, proxyUrl } = useClerk();
   const scriptRef = useRef<HTMLScriptElement>(null);
+  const coordinatorInjected = useRef(false);
 
   /**
    * If no publishable key, avoid appending invalid scripts in the DOM.
@@ -179,6 +177,31 @@ function ClerkJSScript(props: ClerkJSScriptProps) {
   };
   const scriptUrl = clerkJsScriptUrl(options);
 
+  // Inject coordinator script into head manually to ensure it's there first
+  useEffect(() => {
+    if (typeof window === 'undefined' || coordinatorInjected.current) return;
+
+    // Check if coordinator already exists
+    if ((window as any).__clerkJSBlockingCoordinator) {
+      coordinatorInjected.current = true;
+      return;
+    }
+
+    // Create and inject coordinator script into head
+    const coordinatorScript = document.createElement('script');
+    coordinatorScript.id = 'clerk-blocking-coordinator';
+    coordinatorScript.innerHTML = getBlockingCoordinatorScript();
+
+    // Insert at the beginning of head to ensure it runs first
+    if (document.head.firstChild) {
+      document.head.insertBefore(coordinatorScript, document.head.firstChild);
+    } else {
+      document.head.appendChild(coordinatorScript);
+    }
+
+    coordinatorInjected.current = true;
+  }, []);
+
   // Handle state changes from the blocking coordinator
   const handleLoad = useCallback(() => {
     props.onLoad?.();
@@ -210,17 +233,9 @@ function ClerkJSScript(props: ClerkJSScriptProps) {
   const scriptAttributes = buildClerkJsScriptAttributes(options);
 
   if (props.router === 'app') {
-    // For App Router, use regular script tags
-    // The coordinator will catch these regardless of placement
+    // For App Router, use Next.js Head component to ensure script goes to head
     return (
-      <>
-        {/* Blocking coordinator script - MUST run first */}
-        <script
-          dangerouslySetInnerHTML={{ __html: getBlockingCoordinatorScript() }}
-          // No async/defer - this must block to set up coordination
-        />
-
-        {/* Actual ClerkJS script - managed by the coordinator */}
+      <Head>
         <script
           ref={scriptRef}
           src={scriptUrl}
@@ -229,31 +244,20 @@ function ClerkJSScript(props: ClerkJSScriptProps) {
           crossOrigin='anonymous'
           {...scriptAttributes}
         />
-      </>
+      </Head>
     );
   } else {
     // For Pages Router, use Next.js Script components with beforeInteractive
-    // This ensures both scripts are placed in head and execute early
     return (
-      <>
-        {/* Blocking coordinator script - MUST run first and block */}
-        <NextScript
-          id='clerk-blocking-coordinator'
-          strategy='beforeInteractive'
-          dangerouslySetInnerHTML={{ __html: getBlockingCoordinatorScript() }}
-        />
-
-        {/* Actual ClerkJS script - managed by the coordinator */}
-        <NextScript
-          src={scriptUrl}
-          data-clerk-js-script='true'
-          async
-          defer={false}
-          crossOrigin='anonymous'
-          strategy='beforeInteractive'
-          {...scriptAttributes}
-        />
-      </>
+      <NextScript
+        src={scriptUrl}
+        data-clerk-js-script='true'
+        async
+        defer={false}
+        crossOrigin='anonymous'
+        strategy='beforeInteractive'
+        {...scriptAttributes}
+      />
     );
   }
 }
