') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); fix(astro): accept single array child in unstyled buttons by manovotny · Pull Request #8561 · clerk/javascript · GitHub
Skip to content

fix(astro): accept single array child in unstyled buttons - #8561

Merged
wobsoriano merged 1 commit into
mainfrom
manovotny/goldenrod-bolt
May 16, 2026
Merged

fix(astro): accept single array child in unstyled buttons#8561
wobsoriano merged 1 commit into
mainfrom
manovotny/goldenrod-bolt

Conversation

@manovotny

@manovotnymanovotny commented May 15, 2026

Copy link
Copy Markdown
Contributor

Description

Ports the @clerk/react fix from #8556 to @clerk/astro. Astro carries its own duplicate copy of assertSingleChild (marked // TODO-SHARED) that was not updated when the React-side fix landed.

Same root cause as #8556: when a custom button child crosses a Next-style server/client boundary, React can deliver it as a one-item array. React.Children.only() rejects that shape, which the SDK catches and surfaces as a misleading "multiple children" error to the user. The fix falls back to React.Children.toArray() and accepts a length-1 array of a valid element, preserving the genuine multi-child error path.

This benefits all seven astro unstyled buttons via the shared util: SignInButton, SignUpButton, SignOutButton, SignInWithMetamaskButton, CheckoutButton, SubscriptionDetailsButton, PlanDetailsButton.

Also adds the first React component tests to the astro package, mirroring the regression test from #8556 plus baseline coverage (default child, custom child, array-wrapped single child).

Checklist

  • pnpm test runs as expected. (21/21 in @clerk/astro, including 3 new tests.)
  • pnpm build runs as expected. (Full repo build not verified end-to-end — pre-existing failures in unrelated workspace packages, unrelated to this change.)
  • (If applicable) JSDoc comments have been added or updated for any package exports — N/A, no public API surface change.
  • (If applicable) Documentation has been updated — N/A, clerk-docs PR Add example for multiple children on <SignUpButton>/<SignInButton> components clerk-docs#3358 already covers the multi-child guidance.

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

References

@manovotny@claude
fix(astro): accept single array child in unstyled buttons
0ff14fc
Port the @clerk/react fix from #8556 to @clerk/astro so the same
RSC server/client boundary case (custom child arriving as a one-item
array) no longer trips the misleading "multiple children" error.
Adds the first React component tests to the astro package covering
the default child, a normal single custom child, and the array-
wrapped single child regression case.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@vercel

vercelBot commented May 15, 2026•
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentMay 15, 2026 5:59pm

Request Review

@changeset-bot

changeset-botBot commented May 15, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 0ff14fc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
NameType
@clerk/astroPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@manovotny
manovotny marked this pull request as ready for review May 15, 2026 18:06
@coderabbitai

coderabbitaiBot commented May 15, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: cb2bf55d-b78a-42cb-a19f-89d7a4058c4d

📥 Commits

Reviewing files that changed from the base of the PR and between b45777c and 0ff14fc.

📒 Files selected for processing (3)
  • .changeset/astro-buttons-accept-one.md
  • packages/astro/src/react/__tests__/SignInButton.test.tsx
  • packages/astro/src/react/utils.tsx
📝 Walkthrough

Walkthrough

This PR fixes the Astro package's unstyled button components to accept a single React element passed as a one-item array. The assertSingleChild utility in utils.tsx now catches the error from React.Children.only() and checks if the converted array contains exactly one valid React element, returning it instead of treating it as a multiple-children error. A new test suite for SignInButton verifies the default button behavior, custom button children with their own click handlers, and the new one-item array scenario. A changeset entry documents this patch release.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

  • clerk/javascript#8556: Both PRs update the same assertSingleChild logic for unstyled button children to accept a one-item array as a valid single React element (and add corresponding SignInButton regression tests).
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check nameStatusExplanationResolution
Linked Issues check⚠️ WarningThe linked issue #39 concerns fixing Content-Type and User-Agent in @clerk/edge, which is completely unrelated to this PR about fixing array-wrapped children in @clerk/astro buttons.The PR appears to address #8556 and other references, but the linked issue #39 is unrelated to these changes. Verify the correct linked issue is attached or remove the incorrect link.
✅ Passed checks (4 passed)
Check nameStatusExplanation
Title check✅ PassedThe title 'fix(astro): accept single array child in unstyled buttons' clearly and specifically describes the main change: fixing unstyled Astro buttons to accept a single element passed as an array.
Description check✅ PassedThe description provides detailed context about porting the React fix to Astro, explains the root cause and solution, lists affected components, and documents test coverage additions.
Out of Scope Changes check✅ PassedAll changes align with the stated objective of porting the @clerk/react fix to @clerk/astro: updating assertSingleChild utility, adding regression tests, and adding baseline test coverage for unstyled buttons.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@pkg-pr-new

pkg-pr-newBot commented May 15, 2026

Copy link
Copy Markdown

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@8561

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@8561

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@8561

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@8561

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@8561

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@8561

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@8561

@clerk/express

npm i https://pkg.pr.new/@clerk/express@8561

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@8561

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@8561

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@8561

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@8561

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@8561

@clerk/react

npm i https://pkg.pr.new/@clerk/react@8561

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@8561

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@8561

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@8561

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@8561

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@8561

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@8561

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@8561

commit: 0ff14fc

@wobsoriano
wobsoriano merged commit 097ad4a into mainMay 16, 2026
50 checks passed
@wobsoriano
wobsoriano deleted the manovotny/goldenrod-bolt branch May 16, 2026 01:53
@clerk-cookieclerk-cookie mentioned this pull request May 16, 2026
Merged
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@wobsorianowobsorianowobsoriano approved these changes

Assignees

No one assigned

Labels

astro

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@manovotny@wobsoriano