Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

loadClerkJsScript broken clerk/react

Aperta
#8,569 0 commenti 1 reazione 1 assegnatario Vedi su GitHub

@jacekradko ci sta già lavorando.

Dal 19/5/2026.

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

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
Lingua principale
TypeScript
Stelle
1.8k
Fork
472
Merge medio
2g 12h
PR unite (30g)
222

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di clerk/javascript

Tutte le issue di clerk/javascript

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.