fix(clerk-react): Add frontendAPI on window as a fallback

Store frontendAPI value on window as a fallback. This value can be used as a fallback during ClerkJS hot loading in case ClerkJS fails to find the "data-clerk-frontend-api" attribute on its script tag.

This can happen when the DOM is altered completely during client rehydration.
For example, in Remix with React 18 the document changes completely via `hydrateRoot(document)`.

For more information refer to:

- remix-run/remix#2947
- facebook/react#24430

packages/clerk-js/src/core/clerk.ts

@@ -77,6 +77,7 @@ export type ClerkCoreBroadcastChannelEvent = { type: 'signout' };
 declare global {
   interface Window {
     Clerk?: Clerk;
+    __clerk_frontend_api?: string;
   }
 }
 

packages/clerk-js/src/index.browser.ts

@@ -6,7 +6,9 @@ import { mountComponentRenderer } from './ui';
 Clerk.mountComponentRenderer = mountComponentRenderer;
 
 const frontendApi =
-  document.querySelector('script[data-clerk-frontend-api]')?.getAttribute('data-clerk-frontend-api') || '';
+  document.querySelector('script[data-clerk-frontend-api]')?.getAttribute('data-clerk-frontend-api') ||
+  window.__clerk_frontend_api ||
+  '';
 
 window.Clerk = new Clerk(frontendApi);
 

packages/clerk-js/src/index.headless.browser.ts

@@ -3,7 +3,9 @@ import 'regenerator-runtime/runtime';
 import Clerk from './core/clerk';
 
 const frontendApi =
-  document.querySelector('script[data-clerk-frontend-api]')?.getAttribute('data-clerk-frontend-api') || '';
+  document.querySelector('script[data-clerk-frontend-api]')?.getAttribute('data-clerk-frontend-api') ||
+  window.__clerk_frontend_api ||
+  '';
 
 window.Clerk = new Clerk(frontendApi);
 

packages/react/src/isomorphicClerk.ts

@@ -96,6 +96,19 @@ export default class IsomorphicClerk {
     if (!this.frontendApi) {
       this.throwError(noFrontendApiError);
     }
+
+    // Store frontendAPI value on window as a fallback. This value can be used as a
+    // fallback during ClerkJS hot loading in case ClerkJS fails to find the
+    // "data-clerk-frontend-api" attribute on its script tag.
+
+    // This can happen when the DOM is altered completely during client rehydration.
+    // For example, in Remix with React 18 the document changes completely via `hydrateRoot(document)`.
+
+    // For more information refer to:
+    // - https://github.com/remix-run/remix/issues/2947
+    // - https://github.com/facebook/react/issues/24430
+    window.__clerk_frontend_api = this.frontendApi;
+
     try {
       if (this.Clerk) {
         // Set a fixed Clerk version

packages/react/src/types.ts

@@ -1,5 +1,11 @@
 import type { Clerk, ClerkOptions, ClientResource, LoadedClerk, RedirectOptions, UserResource } from '@clerk/types';
 
+declare global {
+  interface Window {
+    __clerk_frontend_api?: string;
+  }
+}
+
 export interface IsomorphicClerkOptions extends ClerkOptions {
   Clerk?: ClerkProp;
   clerkJSUrl?: string;