Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

loadClerkJsScript broken clerk/react

Offen
#8,569 0 Kommentare 1 Reaktion 1 zugewiesene Person Auf GitHub ansehen

@jacekradko arbeitet bereits daran.

Seit 19.5.2026.

Bewertung

Dieses Issue wurde noch nicht bewertet.

Beschreibung

clerk-js ui
Preliminary Checks
Reproduction

https://github.com/iloveitaly/python-starter-template/blob/7f5b650dd9c305d1aa12058bfde456d4390689d2/web/app/configuration/clerk.tsx

Publishable key

pk_test_bWVycnktamF3ZmlzaC00LmNsZXJrLmFjY291bnRzLmRldiQ

Description

This situation:

  • Latest React Router SPA
  • clientLoader that wants to use clerk authentication to hit a API endpoint
  • React page which uses clerk UI components

Causes Clerk was not loaded with Ui components to be thrown.

This occurs because:

  1. clientLoader calls getClient()
  2. getClient loads clerk JS if window.Clerk is not available
  3. something changed recently where loadClerkJsScript, clerk.load(), or the JS that is dynamically loaded causes the UI stuff to not get loaded.

Here's the getClient implementation:

export async function getClient() {
  const windowWithClerk = window as Window & { Clerk?: LoadedClerk }

  if (!windowWithClerk.Clerk) {
    // recommended officially here:
    // https://clerk.com/docs/references/sdk/frontend-only#call-window-clerk-load
    await loadClerkJsScript({
      publishableKey: CLERK_PUBLIC_KEY,
    })
  }

  invariant(windowWithClerk.Clerk, "Clerk should be defined")

  const clerk = windowWithClerk.Clerk

  if (!clerk.loaded) {
    await clerk.load()
  }

  // protect users from hitting the internal API if they aren't authenticated
  if (!clerk.user) {
    await clerk.redirectToSignIn()
    return
  }

  return clerk
}

I think a recent change in the dynamically loaded clerk javascript has caused UI components to not be loaded when you load the clerk javascript outside of the React provider. I believe the culprit is the dynamically loaded clerk code because dropping package versions did not fix the issue and I've have tests from ~2w ago where this worked just fine.

Attempted discord but got no useful response.

Steps to reproduce:

https://github.com/iloveitaly/python-starter-template/blob/7f5b650dd9c305d1aa12058bfde456d4390689d2/web/app/configuration/clerk.tsx

this file and the surrounding repository replicates the failure.

Expected behavior:

UI components loaded & the ability for me to access a clerk client (a) without calling the clerk endpoints twice and using clerk-js (b) before the react render cycle has run (i.e. within clientLoader).

Actual behavior:

The following exception is thrown when a page is loaded that contains Clerk React UI components.

Error: Clerk was not loaded with Ui components
    at nG.assertComponentsReady (https://notable-rhino-51.clerk.accounts.dev/npm/@clerk/clerk-js@6/dist/clerk.browser.js:18:214256)
    at nG.mountUserButton (https://notable-rhino-51.clerk.accounts.dev/npm/@clerk/clerk-js@6/dist/clerk.browser.js:18:180854)
    at Object.mountUserButton [as mount] (https://python-starter-template.localhost/node_modules/.vite/deps/@clerk_react.js?v=a49ee953:6045:50)
    at ClerkHostRenderer.componentDidMount (https://python-starter-template.localhost/node_modules/.vite/deps/@clerk_react.js?v=a49ee953:3897:45)
    at Object.react_stack_bottom_frame (https://python-starter-template.localhost/node_modules/.vite/deps/client-CS_gmzuS.js?v=a49ee953:12882:14)
    at runWithFiberInDEV (https://python-starter-template.localhost/node_modules/.vite/deps/client-CS_gmzuS.js?v=a49ee953:851:66)
    at reappearLayoutEffects (https://python-starter-template.localhost/node_modules/.vite/deps/client-CS_gmzuS.js?v=a49ee953:7532:57)
    at recursivelyTraverseReappearLayoutEffects (https://python-starter-template.localhost/node_modules/.vite/deps/client-CS_gmzuS.js?v=a49ee953:7588:65)
    at reappearLayoutEffects (https://python-starter-template.localhost/node_modules/.vite/deps/client-CS_gmzuS.js?v=a49ee953:7578:14)
    at recursivelyTraverseReappearLayoutEffects (https://python-starter-template.localhost/node_modules/.vite/deps/client-CS_gmzuS.js?v=a49ee953:7588:65)
Environment
System:
    OS: macOS 26.4.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 186.81 MB / 96.00 GB
    Shell: 5.9 - /opt/homebrew/bin/zsh
  Binaries:
    Node: 24.15.0 - /Users/mike/.local/share/mise/installs/node/24.15.0/bin/node
    npm: 11.12.1 - /Users/mike/.local/share/mise/installs/node/24.15.0/bin/npm
    pnpm: 11.1.2 - /Users/mike/.local/share/mise/installs/pnpm/11.1.2/pnpm
    bun: 1.3.14 - /Users/mike/.local/share/mise/installs/bun/1.3.14/bin/bun
    Deno: 2.7.11 - /opt/homebrew/bin/deno
  Browsers:
    Chrome: 148.0.7778.168
    Chrome Canary: 150.0.7835.0
    Firefox: 139.0.1
    Safari: 26.4
    Safari Technology Preview: 26.0
Vorherrschende Sprache
TypeScript
Sterne
1.8k
Forks
472
Ø Merge
2 T. 12 Std.
Gemergte PRs (30 T.)
222

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus clerk/javascript

Alle Issues in clerk/javascript

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.