fix: downgrade to clerk 4.7 due to error

app/helpers/application_helper.rb

@@ -5,14 +5,14 @@ def clerk_frontend_api
 
   def clerk_script_tag
     script_url = ENV["CLERKJS_SCRIPT_URL"].presence ||
-      "https://#{clerk_frontend_api()}/npm/@clerk/clerk-js@5.0.0-beta-v5.20/dist/clerk.browser.js"
+      "https://#{clerk_frontend_api()}/npm/@clerk/clerk-js@4.71.2/dist/clerk.browser.js"
 
     javascript_include_tag(
       script_url,
       {
         "data-clerk-publishable-key": ENV.fetch("CLERK_PUBLISHABLE_KEY"),
         crossorigin: "anonymous",
-        onload: "startClerk()",
+        onload: "window.startClerk()",
         defer: true,
         nonce: true
       }

app/javascript/application.js

@@ -3,22 +3,35 @@ import "@hotwired/turbo-rails"
 import "controllers"
 
 // Start Clerk as soon as ClerkJS is loaded
+// Called from application_helpers.clerk_script_tag included in app erb
 window.startClerk = async () => {
-  const Clerk = window.Clerk;
-
+  const clerk = window.Clerk
   try {
     // Load Clerk environment & session if available
-    await Clerk.load();
+    await clerk.load();
 
+    // Mounts the UI that shows the user avatar, and menus for account settings and logout button
     function mountUserButton() {
-      if (Clerk.user && !document.getElementById('user-button').hasChildNodes()) {
-        const userButtonEl = document.getElementById('user-button');
-        Clerk.mountUserButton(userButtonEl);
+      // nothing to load if the user hasn't signed in
+      if (!clerk.user) {
+        return;
+      }
+
+      // why do something if it's already done ?
+      const hasClerkAlreadyInstantiated = document.getElementById('user-button').hasChildNodes();
+      if (hasClerkAlreadyInstantiated) {
+        return;
       }
+
+      // do the actual profile management UI loading
+      const userButtonEl = document.getElementById('user-button');
+      clerk.mountUserButton(userButtonEl);
     }
 
+    // everytime turbolink loads on page transitions, mount our UI again
     document.addEventListener("turbolinks:load", mountUserButton);
 
+    // mount the very first time
     mountUserButton();
   } catch (err) {
     console.error('Clerk: ', err);