diff --git a/packages/redux-devtools-ui/.storybook/main.ts b/packages/redux-devtools-ui/.storybook/main.mjs
similarity index 75%
rename from packages/redux-devtools-ui/.storybook/main.ts
rename to packages/redux-devtools-ui/.storybook/main.mjs
index 88609200d9..cde68e2203 100644
--- a/packages/redux-devtools-ui/.storybook/main.ts
+++ b/packages/redux-devtools-ui/.storybook/main.mjs
@@ -1,15 +1,17 @@
-import type { StorybookConfig } from '@storybook/react-webpack5';
+import { createRequire } from 'node:module';
+import path from 'node:path';
 
-import { join, dirname } from 'path';
+const require = createRequire(import.meta.url);
 
 /**
  * This function is used to resolve the absolute path of a package.
  * It is needed in projects that use Yarn PnP or are set up within a monorepo.
  */
-function getAbsolutePath(value: string): any {
-  return dirname(require.resolve(join(value, 'package.json')));
+function getAbsolutePath(packageName) {
+  return path.dirname(require.resolve(path.join(packageName, 'package.json')));
 }
-const config: StorybookConfig = {
+
+const config = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
@@ -33,4 +35,5 @@ const config: StorybookConfig = {
   },
   staticDirs: ['../fonts'],
 };
+
 export default config;