@clerk/ui: SignIn/SignUp captcha flow passes inert="" instead of boolean true, triggering React 19 console warning

Abierto Apto para principiantes
#9,611 0 comentarios 0 reacciones 0 asignados Ver en GitHub

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

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

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.