@clerk/ui: SignIn/SignUp captcha flow passes inert="" instead of boolean true, triggering React 19 console warning
まだ誰も着手していません。
評価
- 難易度
- 2/5
- 見積もり時間
- 1〜3時間
- 初心者へのやさしさ
- 74/100
- issue の種類
- バグ
- 明瞭さ
- おおむね明確
- 活発さ
- 活発
- 技術スタック
- react, typescript
調査の方向性
dist/components/SignIn/SignInStart.js、dist/components/SignUp/SignUpStart.js、およびそれらの no-rhc バリアントにある、影響を受ける @clerk/ui のエントリポイントから始め、対応するソースコンポーネントを特定します。captcha が操作可能になるまで SignInButton mode="modal" を通じて警告を再現します。警告がなくなり、影響を受ける 4 つのバリアントすべてで inert が一貫して処理されれば完了です。
索引モデルが issue の本文から書いたものです。
説明
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.
- 主要言語
- TypeScript
- スター
- 1.8k
- フォーク
- 472
- 平均マージ
- 2日 8時間
- マージ済み PR(30日)
- 184
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
clerk/javascript のほかの issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 86/100
clerk/javascript#9573 ·
-
難易度 4/5 3〜5日 初心者へのやさしさ 64/100
clerk/javascript#9775 · コメント 1 件 ·
-
難易度 4/5 3〜5日 初心者へのやさしさ 48/100
clerk/javascript#9770 · コメント 3 件 ·
-
難易度 3/5 1〜2日 初心者へのやさしさ 68/100
clerk/javascript#9667 · コメント 1 件 ·
-
難易度 4/5 3〜5日 初心者へのやさしさ 52/100
clerk/javascript#9659 · コメント 1 件 ·
clerk/javascript の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
copse-dev/agent-pane#2953 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
Eynzof/Hermes-CN-Desktop#610 ·
-
bug clawsweeper:linked-pr-open clawsweeper:needs-live-repro clawsweeper:no-new-fix-pr impact:message-loss issue-rating: 🐚 platinum hermit P2 regression
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
-
enhancement
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
-
calcite-components needs triage refactor
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
Esri/calcite-design-system#15203 ·