diff --git a/package-lock.json b/package-lock.json
index fa621b2..3a3bbe3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@startup-api/cloudflare",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@startup-api/cloudflare",
-      "version": "0.4.4",
+      "version": "0.4.5",
       "license": "Apache-2.0",
       "dependencies": {
         "he": "^1.2.0",
diff --git a/package.json b/package.json
index b7090ac..6b13852 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@startup-api/cloudflare",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public"
diff --git a/public/users/accounts.html b/public/users/accounts.html
index 569bad7..d25aabf 100644
--- a/public/users/accounts.html
+++ b/public/users/accounts.html
@@ -15,7 +15,7 @@
     <power-strip providers="{{ssr:providers}}" style="position: absolute; top: 0; right: 0; z-index: 9999; border-radius: 0 0 0 0.3rem">
       <svg viewBox="0 0 24 24" style="width: 1rem; height: 1rem"><path d="M7 2v11h3v9l7-12h-4l4-8z" fill="#ffcc00" /></svg>
     </power-strip>
-    <script src="/users/power-strip.js" async></script>
+    <script type="module" src="/users/power-strip.js" async></script>
 
     <div class="header-area">
       <a href="/" class="back-link">← Back to Home</a>
diff --git a/public/users/admin/index.html b/public/users/admin/index.html
index 6400032..acf03ba 100644
--- a/public/users/admin/index.html
+++ b/public/users/admin/index.html
@@ -181,7 +181,7 @@
     <power-strip providers="{{ssr:providers}}" style="position: absolute; top: 0; right: 0; z-index: 9999; border-radius: 0 0 0 0.3rem">
       <svg viewBox="0 0 24 24" style="width: 1rem; height: 1rem"><path d="M7 2v11h3v9l7-12h-4l4-8z" fill="#ffcc00" /></svg>
     </power-strip>
-    <script src="/users/power-strip.js" async></script>
+    <script type="module" src="/users/power-strip.js" async></script>
 
     <h1>StartupAPI Admin</h1>
 
diff --git a/public/users/power-strip.js b/public/users/power-strip.js
index e7cdf50..d1a0bec 100644
--- a/public/users/power-strip.js
+++ b/public/users/power-strip.js
@@ -17,22 +17,15 @@ class PowerStrip extends HTMLElement {
   }
 
   detectBasePath() {
-    const script =
-      document.currentScript ||
-      (function () {
-        const scripts = document.getElementsByTagName('script');
-        return scripts[scripts.length - 1];
-      })();
-
-    if (script && script.src) {
-      try {
-        const url = new URL(script.src);
-        return url.pathname.substring(0, url.pathname.lastIndexOf('/'));
-      } catch (e) {
-        console.error('Failed to parse script URL', e);
-      }
+    // This file is loaded as an ES module (`<script type="module">`), so `document.currentScript`
+    // is null. `import.meta.url` is the module's own URL and is the reliable way to locate ourselves.
+    try {
+      const url = new URL(import.meta.url);
+      return url.pathname.substring(0, url.pathname.lastIndexOf('/'));
+    } catch (e) {
+      console.error('Failed to derive base path from import.meta.url', e);
+      return '';
     }
-    return '';
   }
 
   async connectedCallback() {
diff --git a/public/users/profile.html b/public/users/profile.html
index 10832ab..5b5eb8f 100644
--- a/public/users/profile.html
+++ b/public/users/profile.html
@@ -10,7 +10,7 @@
     <power-strip providers="{{ssr:providers}}" style="position: absolute; top: 0; right: 0; z-index: 9999; border-radius: 0 0 0 0.3rem">
       <svg viewBox="0 0 24 24" style="width: 1rem; height: 1rem"><path d="M7 2v11h3v9l7-12h-4l4-8z" fill="#ffcc00" /></svg>
     </power-strip>
-    <script src="/users/power-strip.js" async></script>
+    <script type="module" src="/users/power-strip.js" async></script>
 
     <div class="header-area">
       <a href="/" class="back-link">← Back to Home</a>
diff --git a/src/PowerStrip.ts b/src/PowerStrip.ts
index 560596b..d59074b 100644
--- a/src/PowerStrip.ts
+++ b/src/PowerStrip.ts
@@ -24,7 +24,7 @@ export async function injectPowerStrip(response: Response, usersPath: string, pr
         element(element) {
           // The script is always needed to define the <power-strip> custom element.
           // It is loaded from the USERS_PATH, which is intercepted by this worker.
-          element.prepend(`<script src="${usersPath}power-strip.js" async></script>`, { html: true });
+          element.prepend(`<script type="module" src="${usersPath}power-strip.js" async></script>`, { html: true });
 
           // Defer the component decision until the end of <body>, by which point
           // the streaming parser has seen any author-supplied <power-strip>.
diff --git a/test/manual/power-strip-theme.html b/test/manual/power-strip-theme.html
index 5bc2860..aea3e0e 100644
--- a/test/manual/power-strip-theme.html
+++ b/test/manual/power-strip-theme.html
@@ -113,6 +113,6 @@ <h1>Power Strip — color theme preview</h1>
     </div>
 
     <!-- Loads the real component. Relative path resolves from test/manual/ to public/users/. -->
-    <script src="../../public/users/power-strip.js"></script>
+    <script type="module" src="../../public/users/power-strip.js"></script>
   </body>
 </html>
diff --git a/test/powerstrip.spec.ts b/test/powerstrip.spec.ts
index 2db101c..33bcc94 100644
--- a/test/powerstrip.spec.ts
+++ b/test/powerstrip.spec.ts
@@ -21,7 +21,7 @@ describe('injectPowerStrip', () => {
     const res = await injectPowerStrip(htmlResponse('<html><body><h1>Hi</h1></body></html>'), USERS_PATH, PROVIDERS);
     const html = await res.text();
 
-    expect(html).toContain(`<script src="${USERS_PATH}power-strip.js" async></script>`);
+    expect(html).toContain(`<script type="module" src="${USERS_PATH}power-strip.js" async></script>`);
     expect(html).toContain(DEFAULT_STRIP_STYLE);
     expect(html).toContain('<power-strip providers="google,twitch,patreon"');
     expect(countPowerStrips(html)).toBe(1);
@@ -35,7 +35,7 @@ describe('injectPowerStrip', () => {
     );
     const html = await res.text();
 
-    expect(html).toContain(`<script src="${USERS_PATH}power-strip.js" async></script>`);
+    expect(html).toContain(`<script type="module" src="${USERS_PATH}power-strip.js" async></script>`);
     // No default strip appended, and the author's element is left in place.
     expect(html).not.toContain(DEFAULT_STRIP_STYLE);
     expect(countPowerStrips(html)).toBe(1);
@@ -74,7 +74,7 @@ describe('injectPowerStrip', () => {
     );
     const html = await res.text();
 
-    expect(html).toContain(`<script src="${USERS_PATH}power-strip.js" async></script>`);
+    expect(html).toContain(`<script type="module" src="${USERS_PATH}power-strip.js" async></script>`);
     expect(html).not.toContain(DEFAULT_STRIP_STYLE);
     expect(html).toContain('providers="google,twitch,patreon"');
   });