From 4020ead30bf55154f8bbb5b93d058cd9f8a6ed23 Mon Sep 17 00:00:00 2001
From: Robert Soriano <sorianorobertc@gmail.com>
Date: Tue, 10 Sep 2024 06:43:33 -0700
Subject: [PATCH] fix(astro): Pre-bundle client dependency for exported control
 components (#4131)

---
 .changeset/thirty-hotels-buy.md                            | 5 +++++
 packages/astro/src/integration/vite-plugin-astro-config.ts | 7 +++++++
 2 files changed, 12 insertions(+)
 create mode 100644 .changeset/thirty-hotels-buy.md

diff --git a/.changeset/thirty-hotels-buy.md b/.changeset/thirty-hotels-buy.md
new file mode 100644
index 0000000000..a8627d38f5
--- /dev/null
+++ b/.changeset/thirty-hotels-buy.md
@@ -0,0 +1,5 @@
+---
+"@clerk/astro": patch
+---
+
+Fixes an issue where control components in client-side rendered apps are always hidden.
diff --git a/packages/astro/src/integration/vite-plugin-astro-config.ts b/packages/astro/src/integration/vite-plugin-astro-config.ts
index f9505aeb58..26fef01ac0 100644
--- a/packages/astro/src/integration/vite-plugin-astro-config.ts
+++ b/packages/astro/src/integration/vite-plugin-astro-config.ts
@@ -20,6 +20,13 @@ export function vitePluginAstroConfig(astroConfig: AstroConfig): VitePlugin {
         return resolvedVirtualModuleId;
       }
     },
+    config(config) {
+      // While Astro processes <script> tags by default, our control components
+      // which uses <script> tags and imports nanostores will not be processed by Astro.
+      // This ensures @clerk/astro/client is properly processed and bundled,
+      // resolving runtime import issues in these components.
+      config.optimizeDeps?.include?.push('@clerk/astro/client');
+    },
     load(id) {
       if (id === resolvedVirtualModuleId) {
         return `