@clerk/ui: SignIn/SignUp captcha flow passes inert="" instead of boolean true, triggering React 19 console warning
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 2/5
- Tiempo estimado
- 1-3 horas
- Aptitud para principiantes
- 74/100
- Tipo de issue
- Error
- Claridad
- Bastante claro
- Estado de actividad
- Activo
- Stack tecnológico
- react, typescript
- Área
- authentication, frontend
Línea de trabajo
Comienza con los puntos de entrada afectados de @clerk/ui en dist/components/SignIn/SignInStart.js, dist/components/SignUp/SignUpStart.js y sus variantes no-rhc, y luego localiza los componentes fuente correspondientes. Reproduce la advertencia mediante SignInButton mode="modal" hasta que el captcha se vuelva interactivo; se considera terminado cuando la advertencia haya desaparecido y las cuatro variantes afectadas gestionen inert de forma coherente.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
Hi! 👋
Firstly, thanks for your work on this project! 🙂
Today I used patch-package to patch @clerk/ui@1.25.5 for the project I'm working on.
Identified the issue: Clerk's sign-in/sign-up modals pass inert="" when the captcha loads — invalid in React 19.
When Clerk’s bot-protection captcha becomes interactive, SignInStart and SignUpStart hide the main form with:
inert: captchaIsInteractive ? "" : void 0
React 19 treats inert as a boolean attribute, so inert="" triggers the console warning. That happens on pages using (homepage, pricing, preview wizard, etc.) once the captcha widget loads.
In @clerk/ui (tested on 1.25.5 and 1.31.0), SignInStart and SignUpStart set inert: captchaIsInteractive ? "" : void 0 on the main form container when the captcha becomes interactive. React 19 treats inert as a boolean attribute and warns: "Received an empty string for a boolean attribute inert."
Expected: inert: captchaIsInteractive ? true : void 0 (or use @clerk/shared/inert’s inertProps()).
Affected files: dist/components/SignIn/SignInStart.js, dist/components/SignUp/SignUpStart.js, and the no-rhc variants.
Here is the diff that solved my problem:
diff --git a/node_modules/@clerk/ui/dist/components/SignIn/SignInStart.js b/node_modules/@clerk/ui/dist/components/SignIn/SignInStart.js
index f5c3af2..daaa935 100644
--- a/node_modules/@clerk/ui/dist/components/SignIn/SignInStart.js
+++ b/node_modules/@clerk/ui/dist/components/SignIn/SignInStart.js
@@ -396,7 +396,7 @@ function SignInStartInternal() {
/* @__PURE__ */ jsx(Col, {
elementDescriptor: descriptors.main,
gap: 6,
- inert: captchaIsInteractive ? "" : void 0,
+ inert: captchaIsInteractive ? true : void 0,
sx: captchaIsInteractive ? { display: "none" } : void 0,
children: /* @__PURE__ */ jsxs(SocialButtonsReversibleContainerWithDivider, { children: [hasSocialOrWeb3Buttons && /* @__PURE__ */ jsx(SignInSocialButtons, {
enableWeb3Providers: true,
diff --git a/node_modules/@clerk/ui/dist/components/SignUp/SignUpStart.js b/node_modules/@clerk/ui/dist/components/SignUp/SignUpStart.js
index c333817..4f7ede5 100644
--- a/node_modules/@clerk/ui/dist/components/SignUp/SignUpStart.js
+++ b/node_modules/@clerk/ui/dist/components/SignUp/SignUpStart.js
@@ -343,7 +343,7 @@ function SignUpStartInternal() {
direction: "col",
elementDescriptor: descriptors.main,
gap: 6,
- inert: captchaIsInteractive ? "" : void 0,
+ inert: captchaIsInteractive ? true : void 0,
sx: captchaIsInteractive ? { display: "none" } : void 0,
children: /* @__PURE__ */ jsxs(SocialButtonsReversibleContainerWithDivider, { children: [(showOauthProviders || showWeb3Providers || showAlternativePhoneCodeProviders) && /* @__PURE__ */ jsx(SignUpSocialButtons, {
enableOAuthProviders: showOauthProviders,
diff --git a/node_modules/@clerk/ui/dist/no-rhc/components/SignIn/SignInStart.js b/node_modules/@clerk/ui/dist/no-rhc/components/SignIn/SignInStart.js
index f5c3af2..daaa935 100644
--- a/node_modules/@clerk/ui/dist/no-rhc/components/SignIn/SignInStart.js
+++ b/node_modules/@clerk/ui/dist/no-rhc/components/SignIn/SignInStart.js
@@ -396,7 +396,7 @@ function SignInStartInternal() {
/* @__PURE__ */ jsx(Col, {
elementDescriptor: descriptors.main,
gap: 6,
- inert: captchaIsInteractive ? "" : void 0,
+ inert: captchaIsInteractive ? true : void 0,
sx: captchaIsInteractive ? { display: "none" } : void 0,
children: /* @__PURE__ */ jsxs(SocialButtonsReversibleContainerWithDivider, { children: [hasSocialOrWeb3Buttons && /* @__PURE__ */ jsx(SignInSocialButtons, {
enableWeb3Providers: true,
diff --git a/node_modules/@clerk/ui/dist/no-rhc/components/SignUp/SignUpStart.js b/node_modules/@clerk/ui/dist/no-rhc/components/SignUp/SignUpStart.js
index c333817..4f7ede5 100644
--- a/node_modules/@clerk/ui/dist/no-rhc/components/SignUp/SignUpStart.js
+++ b/node_modules/@clerk/ui/dist/no-rhc/components/SignUp/SignUpStart.js
@@ -343,7 +343,7 @@ function SignUpStartInternal() {
direction: "col",
elementDescriptor: descriptors.main,
gap: 6,
- inert: captchaIsInteractive ? "" : void 0,
+ inert: captchaIsInteractive ? true : void 0,
sx: captchaIsInteractive ? { display: "none" } : void 0,
children: /* @__PURE__ */ jsxs(SocialButtonsReversibleContainerWithDivider, { children: [(showOauthProviders || showWeb3Providers || showAlternativePhoneCodeProviders) && /* @__PURE__ */ jsx(SignUpSocialButtons, {
enableOAuthProviders: showOauthProviders,
This issue body was partially generated by patch-package.
- Lenguaje dominante
- TypeScript
- Estrellas
- 1.8k
- Forks
- 472
- Merge medio
- 2 d 11 h
- PR fusionados (30 d)
- 189
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de clerk/javascript
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 86/100
clerk/javascript#9573 ·
-
Stale
Dificultad 2/5 1-3 horas Aptitud para principiantes 82/100
clerk/javascript#9392 · 1 comentario ·
-
Dificultad 4/5 3-5 días Aptitud para principiantes 64/100
clerk/javascript#9775 · 1 comentario ·
-
Dificultad 4/5 3-5 días Aptitud para principiantes 48/100
clerk/javascript#9770 · 2 comentarios ·
-
Dificultad 3/5 1-2 días Aptitud para principiantes 68/100
clerk/javascript#9667 · 1 comentario ·
Todos los issues de clerk/javascript
Issues similares
-
comp/dashboard P3 type/bug
Dificultad 2/5 1-3 horas Aptitud para principiantes 86/100
NousResearch/hermes-agent#117722 ·
-
clawsweeper:fix-shape-clear clawsweeper:queueable-fix clawsweeper:source-repro impact:ux-friction issue-rating: 🦞 diamond lobster no-stale P3
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Dificultad 1/5 Menos de una hora Aptitud para principiantes 76/100
-
code-quality refactoring
Dificultad 2/5 1-3 horas Aptitud para principiantes 84/100
github/gh-aw-firewall#8816 ·
-
integration:quickjs org:external priority:backlog topic:code-interpreter topic:middleware type:feature
Dificultad 2/5 1-3 horas Aptitud para principiantes 74/100
langchain-ai/deepagents#6450 ·