Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

loadClerkJsScript broken clerk/react

Abierto
#8,569 0 comentarios 1 reacción 1 asignado Ver en GitHub

@jacekradko ya está trabajando en esto.

Desde el 19/5/2026.

Evaluación

Este issue todavía no se ha evaluado.

Descripción

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
Lenguaje dominante
TypeScript
Estrellas
1.8k
Forks
472
Merge medio
2 d 12 h
PR fusionados (30 d)
222

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de clerk/javascript

Todos los issues de clerk/javascript

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.