diff --git a/.storybook/preview.js b/.storybook/preview.js
index a97c22d02..84e521937 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -25,7 +25,7 @@ import {
   withClearSessionStorage,
   withClearSubmissionLocalStorage,
 } from './decorators';
-import {reactIntl} from './reactIntl.js';
+import {reactIntl} from './reactIntl.mjs';
 import ThemeProvider from './theme';
 
 initialize({
diff --git a/.storybook/reactIntl.js b/.storybook/reactIntl.js
deleted file mode 100644
index aeeafb706..000000000
--- a/.storybook/reactIntl.js
+++ /dev/null
@@ -1,15 +0,0 @@
-const locales = ['nl', 'en'];
-
-const messages = locales.reduce((acc, lang) => ({
-  ...acc,
-  [lang]: require(`../src/i18n/compiled/${lang}.json`), 
-}), {});
-
-const formats = {}; // optional, if you have any formats
-
-export const reactIntl = {
-  defaultLocale: 'nl',
-  locales,
-  messages,
-  formats,
-};
\ No newline at end of file
diff --git a/.storybook/reactIntl.mjs b/.storybook/reactIntl.mjs
new file mode 100644
index 000000000..5d46ac33f
--- /dev/null
+++ b/.storybook/reactIntl.mjs
@@ -0,0 +1,18 @@
+const locales = ['nl', 'en'];
+
+const messages = {};
+const importMessages = import.meta.glob('../src/i18n/compiled/*.json', {eager: true});
+
+// Populate the messages object
+locales.forEach(lang => {
+  messages[lang] = importMessages[`../src/i18n/compiled/${lang}.json`];
+});
+
+const formats = {}; // optional, if you have any formats
+
+export const reactIntl = {
+  defaultLocale: 'nl',
+  locales,
+  messages,
+  formats,
+};