diff --git a/.changeset/fresh-astro-compiler.md b/.changeset/fresh-astro-compiler.md
new file mode 100644
index 00000000000..ff31a5ed78c
--- /dev/null
+++ b/.changeset/fresh-astro-compiler.md
@@ -0,0 +1,5 @@
+---
+'@clerk/astro': patch
+---
+
+Fix custom user button menu item rendering for Astro's stricter compiler.
diff --git a/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro b/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
index f86f5d1d679..47a732781e6 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
@@ -29,54 +29,55 @@ const isDevMode = import.meta.env.DEV;
`Clerk: component can only accept and as its children. Any other provided component will be ignored.`,
);
}
- return;
- }
+ } else {
+ // Get the user button map from window that we set in the ``.
+ const userButtonComponentMap = window.__astro_clerk_component_props?.get('user-button');
- // Get the user button map from window that we set in the ``.
- const userButtonComponentMap = window.__astro_clerk_component_props.get('user-button');
+ let userButton;
+ if (parent) {
+ userButton = document.querySelector(`[data-clerk-id="clerk-user-button-${parent}"]`);
+ } else {
+ userButton = document.querySelector('[data-clerk-id^="clerk-user-button"]');
+ }
- let userButton;
- if (parent) {
- userButton = document.querySelector(`[data-clerk-id="clerk-user-button-${parent}"]`);
- } else {
- userButton = document.querySelector('[data-clerk-id^="clerk-user-button"]');
- }
+ const safeId = userButton?.getAttribute('data-clerk-id');
+ if (userButtonComponentMap && safeId) {
+ const currentOptions = userButtonComponentMap.get(safeId);
- const safeId = userButton.getAttribute('data-clerk-id');
- const currentOptions = userButtonComponentMap.get(safeId);
+ const reorderItemsLabels = ['manageAccount', 'signOut'];
+ const isReorderItem = reorderItemsLabels.includes(label);
- const reorderItemsLabels = ['manageAccount', 'signOut'];
- const isReorderItem = reorderItemsLabels.includes(label);
+ let newMenuItem = {
+ label,
+ };
- let newMenuItem = {
- label,
- };
+ if (!isReorderItem) {
+ newMenuItem = {
+ ...newMenuItem,
+ mountIcon: el => {
+ el.innerHTML = labelIcon;
+ },
+ unmountIcon: () => {
+ /* What to clean up? */
+ },
+ };
- if (!isReorderItem) {
- newMenuItem = {
- ...newMenuItem,
- mountIcon: el => {
- el.innerHTML = labelIcon;
- },
- unmountIcon: () => {
- /* What to clean up? */
- },
- };
+ if (href) {
+ newMenuItem.href = href;
+ } else if (open) {
+ newMenuItem.open = open.startsWith('/') ? open : `/${open}`;
+ } else if (clickIdentifier) {
+ const clickEvent = new CustomEvent('clerk:menu-item-click', { detail: clickIdentifier });
+ newMenuItem.onClick = () => {
+ document.dispatchEvent(clickEvent);
+ };
+ }
+ }
- if (href) {
- newMenuItem.href = href;
- } else if (open) {
- newMenuItem.open = open.startsWith('/') ? open : `/${open}`;
- } else if (clickIdentifier) {
- const clickEvent = new CustomEvent('clerk:menu-item-click', { detail: clickIdentifier });
- newMenuItem.onClick = () => {
- document.dispatchEvent(clickEvent);
- };
+ userButtonComponentMap.set(safeId, {
+ ...currentOptions,
+ customMenuItems: [...(currentOptions?.customMenuItems ?? []), newMenuItem],
+ });
}
}
-
- userButtonComponentMap.set(safeId, {
- ...currentOptions,
- customMenuItems: [...(currentOptions?.customMenuItems ?? []), newMenuItem],
- });