diff --git a/src/utilities/localize.ts b/src/utilities/localize.ts
index 9f22282e..ccaf4e50 100644
--- a/src/utilities/localize.ts
+++ b/src/utilities/localize.ts
@@ -1,9 +1,17 @@
-import '../translations/en.js';
-import { LocalizeController as DefaultLocalizationController } from '@shoelace-style/localize'; // Register English as the default/fallback language
+import { LocalizeController as DefaultLocalizationController, registerTranslation } from '@shoelace-style/localize';
+import en from '../translations/en.js'; // Register English as the default/fallback language
 import type { Translation as DefaultTranslation } from '@shoelace-style/localize';
 
 // Extend the controller and apply our own translation interface for better typings
-export class LocalizeController extends DefaultLocalizationController<Translation> {}
+export class LocalizeController extends DefaultLocalizationController<Translation> {
+  // Technicallly '../translations/en.js' is supposed to work via side-effects. However, by some mystery sometimes the
+  // translations don't get bundled as expected resulting in `no translation found` errors.
+  // This is basically some extra assurance that our translations get registered prior to our localizer connecting in a component
+  // and we don't rely on implicit import ordering.
+  static {
+    registerTranslation(en);
+  }
+}
 
 // Export functions from the localize lib so we have one central place to import them from
 export { registerTranslation } from '@shoelace-style/localize';