diff --git a/code/lib/cli/src/automigrate/fixes/bare-mdx-stories-glob.test.ts b/code/lib/cli/src/automigrate/fixes/bare-mdx-stories-glob.test.ts
index 04f6b770f380..7354fca3c4a9 100644
--- a/code/lib/cli/src/automigrate/fixes/bare-mdx-stories-glob.test.ts
+++ b/code/lib/cli/src/automigrate/fixes/bare-mdx-stories-glob.test.ts
@@ -59,8 +59,8 @@ describe('bare-mdx fix', () => {
         };
         const main = {
           stories: [
-            '../src/**/*.stories.@(js|jsx|ts|tsx)',
-            { directory: '../**', files: '*.stories.@(js|jsx|ts|tsx)' },
+            '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+            { directory: '../**', files: '*.stories.@(js|jsx|mjs|ts|tsx)' },
             { directory: '../**' },
           ],
         };
diff --git a/code/lib/cli/src/generators/configure.test.ts b/code/lib/cli/src/generators/configure.test.ts
index 0c9823bae9ff..78a2ebb6eb3f 100644
--- a/code/lib/cli/src/generators/configure.test.ts
+++ b/code/lib/cli/src/generators/configure.test.ts
@@ -27,7 +27,7 @@ describe('configureMain', () => {
     expect(mainConfigContent).toMatchInlineSnapshot(`
       "/** @type { import('@storybook/react-vite').StorybookConfig } */
       const config = {
-        stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+        stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
         addons: [],
         framework: {
           name: '@storybook/react-vite',
@@ -55,7 +55,7 @@ describe('configureMain', () => {
     expect(mainConfigContent).toMatchInlineSnapshot(`
       "import type { StorybookConfig } from '@storybook/react-vite';
       const config: StorybookConfig = {
-        stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+        stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
         addons: [],
         framework: {
           name: '@storybook/react-vite',
@@ -90,7 +90,7 @@ describe('configureMain', () => {
 
       /** @type { import('@storybook/react-webpack5').StorybookConfig } */
       const config = {
-        stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+        stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
         addons: [
           path.dirname(require.resolve(path.join('@storybook/addon-links', 'package.json'))),
           path.dirname(require.resolve(path.join('@storybook/addon-essentials', 'package.json'))),
diff --git a/code/lib/cli/src/generators/configure.ts b/code/lib/cli/src/generators/configure.ts
index 946637592b03..569c8cbc52f3 100644
--- a/code/lib/cli/src/generators/configure.ts
+++ b/code/lib/cli/src/generators/configure.ts
@@ -51,7 +51,7 @@ const sanitizeFramework = (framework: string) => {
 
 export async function configureMain({
   addons,
-  extensions = ['js', 'jsx', 'ts', 'tsx'],
+  extensions = ['js', 'jsx', 'mjs', 'ts', 'tsx'],
   storybookConfigFolder,
   language,
   ...custom
diff --git a/code/lib/core-common/src/utils/__tests__/normalize-stories.test.ts b/code/lib/core-common/src/utils/__tests__/normalize-stories.test.ts
index f6583496b1b6..ac42d9da5818 100644
--- a/code/lib/core-common/src/utils/__tests__/normalize-stories.test.ts
+++ b/code/lib/core-common/src/utils/__tests__/normalize-stories.test.ts
@@ -230,7 +230,7 @@ describe('normalizeStoriesEntry', () => {
       {
         "titlePrefix": "",
         "directory": ".",
-        "files": "**/*.@(mdx|stories.@(tsx|ts|jsx|js))",
+        "files": "**/*.@(mdx|stories.@(js|jsx|mjs|ts|tsx))",
         "importPathMatcher": {}
       }
     `);
@@ -241,7 +241,7 @@ describe('normalizeStoriesEntry', () => {
     expect(specifier).toMatchInlineSnapshot(`
       {
         "titlePrefix": "",
-        "files": "**/*.@(mdx|stories.@(tsx|ts|jsx|js))",
+        "files": "**/*.@(mdx|stories.@(js|jsx|mjs|ts|tsx))",
         "directory": ".",
         "importPathMatcher": {}
       }
@@ -265,7 +265,7 @@ describe('normalizeStoriesEntry', () => {
     expect(specifier).toMatchInlineSnapshot(`
       {
         "titlePrefix": "atoms",
-        "files": "**/*.@(mdx|stories.@(tsx|ts|jsx|js))",
+        "files": "**/*.@(mdx|stories.@(js|jsx|mjs|ts|tsx))",
         "directory": ".",
         "importPathMatcher": {}
       }
diff --git a/code/lib/core-common/src/utils/normalize-stories.ts b/code/lib/core-common/src/utils/normalize-stories.ts
index 7bdfd0bfa1cd..fb0e1c782e27 100644
--- a/code/lib/core-common/src/utils/normalize-stories.ts
+++ b/code/lib/core-common/src/utils/normalize-stories.ts
@@ -8,7 +8,7 @@ import { normalizeStoryPath } from './paths';
 import { globToRegexp } from './glob-to-regexp';
 
 const DEFAULT_TITLE_PREFIX = '';
-const DEFAULT_FILES = '**/*.@(mdx|stories.@(tsx|ts|jsx|js))';
+const DEFAULT_FILES = '**/*.@(mdx|stories.@(js|jsx|mjs|ts|tsx))';
 
 const isDirectory = (configDir: string, entry: string) => {
   try {
diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts
index ec821213808a..225512e09cd4 100644
--- a/code/lib/core-server/src/presets/common-preset.ts
+++ b/code/lib/core-server/src/presets/common-preset.ts
@@ -189,7 +189,7 @@ export const storyIndexers = async (indexers?: StoryIndexer[]) => {
   };
   return [
     {
-      test: /(stories|story)\.[tj]sx?$/,
+      test: /(stories|story)\.(m?js|ts)x?$/,
       indexer: csfIndexer,
     },
     ...(indexers || []),
diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts
index dda39482fa5d..10e6b7f5cb03 100644
--- a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts
+++ b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts
@@ -49,7 +49,7 @@ const options = {
   workingDir: path.join(__dirname, '__mockdata__'),
   storyIndexers: [
     { test: /\.stories\.mdx$/, indexer: storiesMdxIndexer },
-    { test: /\.stories\.(js|ts)x?$/, indexer: csfIndexer },
+    { test: /\.stories\.(m?js|ts)x?$/, indexer: csfIndexer },
   ] as StoryIndexer[],
   storiesV2Compatibility: false,
   storyStoreV7: true,
@@ -65,7 +65,7 @@ describe('StoryIndexGenerator', () => {
   });
   describe('extraction', () => {
     const storiesSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
-      './src/A.stories.(ts|js|jsx)',
+      './src/A.stories.(ts|js|mjs|jsx)',
       options
     );
     const docsSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
@@ -106,7 +106,7 @@ describe('StoryIndexGenerator', () => {
     describe('non-recursive specifier', () => {
       it('extracts stories from the right files', async () => {
         const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
-          './src/*/*.stories.(ts|js|jsx)',
+          './src/*/*.stories.(ts|js|mjs|jsx)',
           options
         );
 
@@ -147,7 +147,7 @@ describe('StoryIndexGenerator', () => {
     describe('recursive specifier', () => {
       it('extracts stories from the right files', async () => {
         const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
-          './src/**/*.stories.(ts|js|jsx)',
+          './src/**/*.stories.(ts|js|mjs|jsx)',
           options
         );
 
@@ -200,6 +200,17 @@ describe('StoryIndexGenerator', () => {
                 "title": "first-nested/deeply/F",
                 "type": "story",
               },
+              "h--story-one": Object {
+                "id": "h--story-one",
+                "importPath": "./src/H.stories.mjs",
+                "name": "Story One",
+                "tags": Array [
+                  "autodocs",
+                  "story",
+                ],
+                "title": "H",
+                "type": "story",
+              },
               "nested-button--story-one": Object {
                 "id": "nested-button--story-one",
                 "importPath": "./src/nested/Button.stories.ts",
@@ -280,7 +291,7 @@ describe('StoryIndexGenerator', () => {
       };
       it('generates an entry per CSF file with the autodocs tag', async () => {
         const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
-          './src/**/*.stories.(ts|js|jsx)',
+          './src/**/*.stories.(ts|js|mjs|jsx)',
           options
         );
 
@@ -357,6 +368,29 @@ describe('StoryIndexGenerator', () => {
                 "title": "first-nested/deeply/F",
                 "type": "story",
               },
+              "h--docs": Object {
+                "id": "h--docs",
+                "importPath": "./src/H.stories.mjs",
+                "name": "docs",
+                "storiesImports": Array [],
+                "tags": Array [
+                  "autodocs",
+                  "docs",
+                ],
+                "title": "H",
+                "type": "docs",
+              },
+              "h--story-one": Object {
+                "id": "h--story-one",
+                "importPath": "./src/H.stories.mjs",
+                "name": "Story One",
+                "tags": Array [
+                  "autodocs",
+                  "story",
+                ],
+                "title": "H",
+                "type": "story",
+              },
               "nested-button--story-one": Object {
                 "id": "nested-button--story-one",
                 "importPath": "./src/nested/Button.stories.ts",
@@ -393,7 +427,7 @@ describe('StoryIndexGenerator', () => {
       };
       it('generates an entry for every CSF file when docsOptions.autodocs = true', async () => {
         const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
-          './src/**/*.stories.(ts|js|jsx)',
+          './src/**/*.stories.(ts|js|mjs|jsx)',
           options
         );
 
@@ -408,6 +442,8 @@ describe('StoryIndexGenerator', () => {
             "b--story-one",
             "d--docs",
             "d--story-one",
+            "h--docs",
+            "h--story-one",
             "first-nested-deeply-f--docs",
             "first-nested-deeply-f--story-one",
             "nested-button--docs",
@@ -420,7 +456,7 @@ describe('StoryIndexGenerator', () => {
 
       it('adds the autodocs tag to the autogenerated docs entries', async () => {
         const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
-          './src/**/*.stories.(ts|js|jsx)',
+          './src/**/*.stories.(ts|js|mjs|jsx)',
           options
         );
 
@@ -643,7 +679,7 @@ describe('StoryIndexGenerator', () => {
 
       it('generates a combined entry if there are two stories files for the same title', async () => {
         const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
-          './duplicate/*.stories.(ts|js|jsx)',
+          './duplicate/*.stories.(ts|js|mjs|jsx)',
           options
         );
 
@@ -1121,7 +1157,7 @@ describe('StoryIndexGenerator', () => {
   describe('sorting', () => {
     it('runs a user-defined sort function', async () => {
       const storiesSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
-        './src/**/*.stories.(ts|js|jsx)',
+        './src/**/*.stories.(ts|js|mjs|jsx)',
         options
       );
       const docsSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
@@ -1148,6 +1184,7 @@ describe('StoryIndexGenerator', () => {
           "second-nested-g--story-one",
           "componentreference--docs",
           "notitle--docs",
+          "h--story-one",
           "first-nested-deeply-f--story-one",
         ]
       `);
@@ -1158,7 +1195,7 @@ describe('StoryIndexGenerator', () => {
     describe('no invalidation', () => {
       it('does not extract csf files a second time', async () => {
         const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
-          './src/**/*.stories.(ts|js|jsx)',
+          './src/**/*.stories.(ts|js|mjs|jsx)',
           options
         );
 
@@ -1166,7 +1203,7 @@ describe('StoryIndexGenerator', () => {
         const generator = new StoryIndexGenerator([specifier], options);
         await generator.initialize();
         await generator.getIndex();
-        expect(loadCsfMock).toHaveBeenCalledTimes(6);
+        expect(loadCsfMock).toHaveBeenCalledTimes(7);
 
         loadCsfMock.mockClear();
         await generator.getIndex();
@@ -1175,7 +1212,7 @@ describe('StoryIndexGenerator', () => {
 
       it('does not extract docs files a second time', async () => {
         const storiesSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
-          './src/A.stories.(ts|js|jsx)',
+          './src/A.stories.(ts|js|mjs|jsx)',
           options
         );
         const docsSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
@@ -1195,7 +1232,7 @@ describe('StoryIndexGenerator', () => {
 
       it('does not call the sort function a second time', async () => {
         const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
-          './src/**/*.stories.(ts|js|jsx)',
+          './src/**/*.stories.(ts|js|mjs|jsx)',
           options
         );
 
@@ -1215,7 +1252,7 @@ describe('StoryIndexGenerator', () => {
     describe('file changed', () => {
       it('calls extract csf file for just the one file', async () => {
         const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
-          './src/**/*.stories.(ts|js|jsx)',
+          './src/**/*.stories.(ts|js|mjs|jsx)',
           options
         );
 
@@ -1223,7 +1260,7 @@ describe('StoryIndexGenerator', () => {
         const generator = new StoryIndexGenerator([specifier], options);
         await generator.initialize();
         await generator.getIndex();
-        expect(loadCsfMock).toHaveBeenCalledTimes(6);
+        expect(loadCsfMock).toHaveBeenCalledTimes(7);
 
         generator.invalidate(specifier, './src/B.stories.ts', false);
 
@@ -1234,7 +1271,7 @@ describe('StoryIndexGenerator', () => {
 
       it('calls extract docs file for just the one file', async () => {
         const storiesSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
-          './src/A.stories.(ts|js|jsx)',
+          './src/A.stories.(ts|js|mjs|jsx)',
           options
         );
         const docsSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
@@ -1256,7 +1293,7 @@ describe('StoryIndexGenerator', () => {
 
       it('calls extract for a csf file and any of its docs dependents', async () => {
         const storiesSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
-          './src/A.stories.(ts|js|jsx)',
+          './src/A.stories.(ts|js|mjs|jsx)',
           options
         );
         const docsSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
@@ -1278,7 +1315,7 @@ describe('StoryIndexGenerator', () => {
 
       it('does call the sort function a second time', async () => {
         const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
-          './src/**/*.stories.(ts|js|jsx)',
+          './src/**/*.stories.(ts|js|mjs|jsx)',
           options
         );
 
@@ -1300,7 +1337,7 @@ describe('StoryIndexGenerator', () => {
     describe('file removed', () => {
       it('does not extract csf files a second time', async () => {
         const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
-          './src/**/*.stories.(ts|js|jsx)',
+          './src/**/*.stories.(ts|js|mjs|jsx)',
           options
         );
 
@@ -1308,7 +1345,7 @@ describe('StoryIndexGenerator', () => {
         const generator = new StoryIndexGenerator([specifier], options);
         await generator.initialize();
         await generator.getIndex();
-        expect(loadCsfMock).toHaveBeenCalledTimes(6);
+        expect(loadCsfMock).toHaveBeenCalledTimes(7);
 
         generator.invalidate(specifier, './src/B.stories.ts', true);
 
@@ -1319,7 +1356,7 @@ describe('StoryIndexGenerator', () => {
 
       it('does call the sort function a second time', async () => {
         const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
-          './src/**/*.stories.(ts|js|jsx)',
+          './src/**/*.stories.(ts|js|mjs|jsx)',
           options
         );
 
@@ -1339,7 +1376,7 @@ describe('StoryIndexGenerator', () => {
 
       it('does not include the deleted stories in results', async () => {
         const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
-          './src/**/*.stories.(ts|js|jsx)',
+          './src/**/*.stories.(ts|js|mjs|jsx)',
           options
         );
 
@@ -1347,7 +1384,7 @@ describe('StoryIndexGenerator', () => {
         const generator = new StoryIndexGenerator([specifier], options);
         await generator.initialize();
         await generator.getIndex();
-        expect(loadCsfMock).toHaveBeenCalledTimes(6);
+        expect(loadCsfMock).toHaveBeenCalledTimes(7);
 
         generator.invalidate(specifier, './src/B.stories.ts', true);
 
@@ -1356,7 +1393,7 @@ describe('StoryIndexGenerator', () => {
 
       it('does not include the deleted docs in results', async () => {
         const storiesSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
-          './src/A.stories.(ts|js|jsx)',
+          './src/A.stories.(ts|js|mjs|jsx)',
           options
         );
         const docsSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
@@ -1378,7 +1415,7 @@ describe('StoryIndexGenerator', () => {
 
       it('cleans up properly on dependent docs deletion', async () => {
         const storiesSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
-          './src/A.stories.(ts|js|jsx)',
+          './src/A.stories.(ts|js|mjs|jsx)',
           options
         );
         const docsSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
diff --git a/code/lib/core-server/src/utils/__mockdata__/src/H.stories.mjs b/code/lib/core-server/src/utils/__mockdata__/src/H.stories.mjs
new file mode 100644
index 000000000000..2afb74b5e47c
--- /dev/null
+++ b/code/lib/core-server/src/utils/__mockdata__/src/H.stories.mjs
@@ -0,0 +1,8 @@
+const component = {};
+
+export default {
+  component,
+  tags: ['autodocs'],
+};
+
+export const StoryOne = {};
diff --git a/code/lib/core-server/src/utils/stories-json.test.ts b/code/lib/core-server/src/utils/stories-json.test.ts
index a36c0bc5c46d..16712c882f76 100644
--- a/code/lib/core-server/src/utils/stories-json.test.ts
+++ b/code/lib/core-server/src/utils/stories-json.test.ts
@@ -24,7 +24,7 @@ const normalizedStories = [
     {
       titlePrefix: '',
       directory: './src',
-      files: '**/*.stories.@(ts|js|jsx)',
+      files: '**/*.stories.@(ts|js|mjs|jsx)',
     },
     { workingDir, configDir: workingDir }
   ),
@@ -57,7 +57,7 @@ const getInitializedStoryIndexGenerator = async (
   const generator = new StoryIndexGenerator(inputNormalizedStories, {
     storyIndexers: [
       { test: /\.stories\.mdx$/, indexer: storiesMdxIndexer },
-      { test: /\.stories\.(js|ts)x?$/, indexer: csfIndexer },
+      { test: /\.stories\.(m?js|ts)x?$/, indexer: csfIndexer },
     ] as StoryIndexer[],
     configDir: workingDir,
     workingDir,
@@ -225,6 +225,17 @@ describe('useStoriesJson', () => {
               "title": "first-nested/deeply/F",
               "type": "story",
             },
+            "h--story-one": Object {
+              "id": "h--story-one",
+              "importPath": "./src/H.stories.mjs",
+              "name": "Story One",
+              "tags": Array [
+                "autodocs",
+                "story",
+              ],
+              "title": "H",
+              "type": "story",
+            },
             "nested-button--story-one": Object {
               "id": "nested-button--story-one",
               "importPath": "./src/nested/Button.stories.ts",
@@ -455,6 +466,23 @@ describe('useStoriesJson', () => {
               ],
               "title": "first-nested/deeply/F",
             },
+            "h--story-one": Object {
+              "id": "h--story-one",
+              "importPath": "./src/H.stories.mjs",
+              "kind": "H",
+              "name": "Story One",
+              "parameters": Object {
+                "__id": "h--story-one",
+                "docsOnly": false,
+                "fileName": "./src/H.stories.mjs",
+              },
+              "story": "Story One",
+              "tags": Array [
+                "autodocs",
+                "story",
+              ],
+              "title": "H",
+            },
             "nested-button--story-one": Object {
               "id": "nested-button--story-one",
               "importPath": "./src/nested/Button.stories.ts",
@@ -617,6 +645,23 @@ describe('useStoriesJson', () => {
               ],
               "title": "first-nested/deeply/F",
             },
+            "h--story-one": Object {
+              "id": "h--story-one",
+              "importPath": "./src/H.stories.mjs",
+              "kind": "H",
+              "name": "Story One",
+              "parameters": Object {
+                "__id": "h--story-one",
+                "docsOnly": false,
+                "fileName": "./src/H.stories.mjs",
+              },
+              "story": "Story One",
+              "tags": Array [
+                "autodocs",
+                "story",
+              ],
+              "title": "H",
+            },
             "nested-button--story-one": Object {
               "id": "nested-button--story-one",
               "importPath": "./src/nested/Button.stories.ts",
@@ -791,6 +836,23 @@ describe('useStoriesJson', () => {
               ],
               "title": "first-nested/deeply/F",
             },
+            "h--story-one": Object {
+              "id": "h--story-one",
+              "importPath": "./src/H.stories.mjs",
+              "kind": "H",
+              "name": "Story One",
+              "parameters": Object {
+                "__id": "h--story-one",
+                "docsOnly": false,
+                "fileName": "./src/H.stories.mjs",
+              },
+              "story": "Story One",
+              "tags": Array [
+                "autodocs",
+                "story",
+              ],
+              "title": "H",
+            },
             "nested-button--story-one": Object {
               "id": "nested-button--story-one",
               "importPath": "./src/nested/Button.stories.ts",
diff --git a/code/lib/types/src/modules/storyIndex.ts b/code/lib/types/src/modules/storyIndex.ts
index 2bb774b0eb6b..7181d8188f74 100644
--- a/code/lib/types/src/modules/storyIndex.ts
+++ b/code/lib/types/src/modules/storyIndex.ts
@@ -12,7 +12,7 @@ interface StoriesSpecifier {
   /**
    * What does the filename of a story file look like?
    * (a glob, relative to directory, no leading `./`)
-   * If unset, we use `** / *.@(mdx|stories.@(mdx|tsx|ts|jsx|js))` (no spaces)
+   * If unset, we use `** / *.@(mdx|stories.@(mdx|js|jsx|mjs|ts|tsx))` (no spaces)
    */
   files?: string;
 }
diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts
index 645c6ae39afd..fecc66652067 100644
--- a/code/ui/.storybook/main.ts
+++ b/code/ui/.storybook/main.ts
@@ -40,8 +40,8 @@ const allStories = [
  * src/components/ColorPalette.tsx - IGNORED, not story
  */
 const blocksOnlyStories = [
-  '../blocks/src/@(blocks|controls|examples)/!(internal)/**/*.@(mdx|stories.@(tsx|ts|jsx|js))',
-  '../blocks/src/@(blocks|controls|examples)/*.@(mdx|stories.@(tsx|ts|jsx|js))',
+  '../blocks/src/@(blocks|controls|examples)/!(internal)/**/*.@(mdx|stories.@(js|jsx|mjs|ts|tsx))',
+  '../blocks/src/@(blocks|controls|examples)/*.@(mdx|stories.@(js|jsx|mjs|ts|tsx))',
 ];
 
 const config: StorybookConfig = {
diff --git a/docs/api/main-config-stories.md b/docs/api/main-config-stories.md
index 38b239a97eea..aac62a1b3d98 100644
--- a/docs/api/main-config-stories.md
+++ b/docs/api/main-config-stories.md
@@ -101,7 +101,7 @@ Where to start looking for story files, relative to the root of your project.
 
 Type: `string`
 
-Default: `'**/*.@(mdx|stories.@(mdx|tsx|ts|jsx|js))'`
+Default: `'**/*.@(mdx|stories.@(mdx|js|jsx|mjs|ts|tsx))'`
 
 A glob, relative to `StoriesSpecifier.directory` (with no leading `./`), that matches the filenames to load.
 
diff --git a/docs/configure/sidebar-and-urls.md b/docs/configure/sidebar-and-urls.md
index 75ca906bb4e0..094add432b1d 100644
--- a/docs/configure/sidebar-and-urls.md
+++ b/docs/configure/sidebar-and-urls.md
@@ -149,7 +149,7 @@ When Storybook generates the titles for all matching stories, they'll retain the
 
 ### Story Indexers
 
-Story Indexers are a set of heuristics used by Storybook to crawl your filesystem based on a given glob pattern searching for matching stories, which is then used to generate an index.json (formerly stories.json) file responsible for populating the sidebar with the necessary information. By default, this heuristic will look for files that contain the following scheme \*.stories.@(js|jsx|ts|tsx). However, if you need, you can create your custom story indexer that you can use to include stories that have a different naming convention. For example:
+Story Indexers are a set of heuristics used by Storybook to crawl your filesystem based on a given glob pattern searching for matching stories, which is then used to generate an index.json (formerly stories.json) file responsible for populating the sidebar with the necessary information. By default, this heuristic will look for files that contain the following scheme \*.stories.@(js|jsx|mjs|ts|tsx). However, if you need, you can create your custom story indexer that you can use to include stories that have a different naming convention. For example:
 
 <!-- prettier-ignore-start -->
 
diff --git a/docs/essentials/auto-generated-controls/react.mdx b/docs/essentials/auto-generated-controls/react.mdx
index 4839960f02ed..29bb07ede5c1 100644
--- a/docs/essentials/auto-generated-controls/react.mdx
+++ b/docs/essentials/auto-generated-controls/react.mdx
@@ -1,7 +1,7 @@
 To use auto-detected controls with React, you must fill in the `component` field in your story metadata:
 
 ```js
-// Button.stories.js|jsx|ts|tsx
+// Button.stories.js|jsx|mjs|ts|tsx
 
 import { Button } from './Button';
 
diff --git a/docs/migration-guide.md b/docs/migration-guide.md
index a66b94b7ac67..ddd2d8faeab0 100644
--- a/docs/migration-guide.md
+++ b/docs/migration-guide.md
@@ -225,7 +225,7 @@ export default {
 // .storybook/main.js
 
 module.exports = {
-  stories: ['../src/**.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**.stories.@(js|jsx|mjs|ts|tsx)'],
 };
 ```
 
@@ -265,6 +265,6 @@ Finally, you’ll need to add the MDX files to `.storybook/main.js` so that they
 // .storybook/main.js
 
 module.exports = {
-  stories: ['../src/**.mdx', '../src/**.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**.mdx', '../src/**.stories.@(js|jsx|mjs|ts|tsx)'],
 };
 ```
diff --git a/docs/snippets/common/button-story-with-parameters.js.mdx b/docs/snippets/common/button-story-with-parameters.js.mdx
index 8008f38381e2..21ca61edc70f 100644
--- a/docs/snippets/common/button-story-with-parameters.js.mdx
+++ b/docs/snippets/common/button-story-with-parameters.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js|jsx|ts|tsx
+// Button.stories.js|jsx|mjs|ts|tsx
 
 import { Button } from './Button';
 
diff --git a/docs/snippets/common/main-config-addons.js.mdx b/docs/snippets/common/main-config-addons.js.mdx
index 9c5c83661e5f..9658ffd13d43 100644
--- a/docs/snippets/common/main-config-addons.js.mdx
+++ b/docs/snippets/common/main-config-addons.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     '@storybook/addon-essentials',
     {
diff --git a/docs/snippets/common/main-config-addons.ts.mdx b/docs/snippets/common/main-config-addons.ts.mdx
index 4e1ddf800a8a..1038c4a4b41f 100644
--- a/docs/snippets/common/main-config-addons.ts.mdx
+++ b/docs/snippets/common/main-config-addons.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     '@storybook/addon-essentials',
     {
diff --git a/docs/snippets/common/main-config-babel.js.mdx b/docs/snippets/common/main-config-babel.js.mdx
index ea00b641b400..c944fe1bed2e 100644
--- a/docs/snippets/common/main-config-babel.js.mdx
+++ b/docs/snippets/common/main-config-babel.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   async babel(config, { configType }) {
     if (configType === 'DEVELOPMENT') {
       // Your development configuration goes here
diff --git a/docs/snippets/common/main-config-babel.ts.mdx b/docs/snippets/common/main-config-babel.ts.mdx
index 98114b0218dc..b0d7220db898 100644
--- a/docs/snippets/common/main-config-babel.ts.mdx
+++ b/docs/snippets/common/main-config-babel.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   async babel(config, { configType }) {
     if (configType === 'DEVELOPMENT') {
       // Your development configuration goes here
diff --git a/docs/snippets/common/main-config-core-builder.js.mdx b/docs/snippets/common/main-config-core-builder.js.mdx
index b45ab226b24f..53078cebde63 100644
--- a/docs/snippets/common/main-config-core-builder.js.mdx
+++ b/docs/snippets/common/main-config-core-builder.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
     builder: {
       name: '@storybook/builder-vite',
diff --git a/docs/snippets/common/main-config-core-builder.ts.mdx b/docs/snippets/common/main-config-core-builder.ts.mdx
index 093c710f42b3..95bd7c6b8203 100644
--- a/docs/snippets/common/main-config-core-builder.ts.mdx
+++ b/docs/snippets/common/main-config-core-builder.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
     builder: {
       name: '@storybook/builder-vite',
diff --git a/docs/snippets/common/main-config-core-cross-origin-isolated.js.mdx b/docs/snippets/common/main-config-core-cross-origin-isolated.js.mdx
index 209e6ee1c49b..524466e3a765 100644
--- a/docs/snippets/common/main-config-core-cross-origin-isolated.js.mdx
+++ b/docs/snippets/common/main-config-core-cross-origin-isolated.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
     crossOriginIsolated: true,
   },
diff --git a/docs/snippets/common/main-config-core-cross-origin-isolated.ts.mdx b/docs/snippets/common/main-config-core-cross-origin-isolated.ts.mdx
index 7032a83d0c8a..cf7dfe367b03 100644
--- a/docs/snippets/common/main-config-core-cross-origin-isolated.ts.mdx
+++ b/docs/snippets/common/main-config-core-cross-origin-isolated.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
     crossOriginIsolated: true,
   },
diff --git a/docs/snippets/common/main-config-core-disable-project-json.js.mdx b/docs/snippets/common/main-config-core-disable-project-json.js.mdx
index 7a5fcc79c1ea..a964cbbc5ddf 100644
--- a/docs/snippets/common/main-config-core-disable-project-json.js.mdx
+++ b/docs/snippets/common/main-config-core-disable-project-json.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
     disableProjectJson: true,
   },
diff --git a/docs/snippets/common/main-config-core-disable-project-json.ts.mdx b/docs/snippets/common/main-config-core-disable-project-json.ts.mdx
index 6f460458d027..abb711c51a49 100644
--- a/docs/snippets/common/main-config-core-disable-project-json.ts.mdx
+++ b/docs/snippets/common/main-config-core-disable-project-json.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
     disableProjectJson: true,
   },
diff --git a/docs/snippets/common/main-config-core-disable-telemetry.js.mdx b/docs/snippets/common/main-config-core-disable-telemetry.js.mdx
index db96b39316ca..d4aa4620e534 100644
--- a/docs/snippets/common/main-config-core-disable-telemetry.js.mdx
+++ b/docs/snippets/common/main-config-core-disable-telemetry.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
     disableTelemetry: true,
   },
diff --git a/docs/snippets/common/main-config-core-disable-telemetry.ts.mdx b/docs/snippets/common/main-config-core-disable-telemetry.ts.mdx
index 3f1b9f1d4d76..930ee3605668 100644
--- a/docs/snippets/common/main-config-core-disable-telemetry.ts.mdx
+++ b/docs/snippets/common/main-config-core-disable-telemetry.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
     disableTelemetry: true,
   },
diff --git a/docs/snippets/common/main-config-core-disable-webpack-defaults.js.mdx b/docs/snippets/common/main-config-core-disable-webpack-defaults.js.mdx
index 2b8cfd6bb30f..da1f8c93d360 100644
--- a/docs/snippets/common/main-config-core-disable-webpack-defaults.js.mdx
+++ b/docs/snippets/common/main-config-core-disable-webpack-defaults.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
     disableWebpackDefaults: true,
   },
diff --git a/docs/snippets/common/main-config-core-disable-webpack-defaults.ts.mdx b/docs/snippets/common/main-config-core-disable-webpack-defaults.ts.mdx
index c065ee16444f..4f6bf8b4f81b 100644
--- a/docs/snippets/common/main-config-core-disable-webpack-defaults.ts.mdx
+++ b/docs/snippets/common/main-config-core-disable-webpack-defaults.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
     disableWebpackDefaults: true,
   },
diff --git a/docs/snippets/common/main-config-core-enable-crash-reports.js.mdx b/docs/snippets/common/main-config-core-enable-crash-reports.js.mdx
index f6c7b4411121..b79e8f384cfe 100644
--- a/docs/snippets/common/main-config-core-enable-crash-reports.js.mdx
+++ b/docs/snippets/common/main-config-core-enable-crash-reports.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
     enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
   },
diff --git a/docs/snippets/common/main-config-core-enable-crash-reports.ts.mdx b/docs/snippets/common/main-config-core-enable-crash-reports.ts.mdx
index 0fee6560fd3b..ceabd58ad8b9 100644
--- a/docs/snippets/common/main-config-core-enable-crash-reports.ts.mdx
+++ b/docs/snippets/common/main-config-core-enable-crash-reports.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
     enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
   },
diff --git a/docs/snippets/common/main-config-docs-autodocs.js.mdx b/docs/snippets/common/main-config-docs-autodocs.js.mdx
index 240f4461b032..e16db3a8d9a5 100644
--- a/docs/snippets/common/main-config-docs-autodocs.js.mdx
+++ b/docs/snippets/common/main-config-docs-autodocs.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   docs: {
     autodocs: 'tag',
   },
diff --git a/docs/snippets/common/main-config-docs-autodocs.ts.mdx b/docs/snippets/common/main-config-docs-autodocs.ts.mdx
index 7b60bbba50c2..927eb78c0837 100644
--- a/docs/snippets/common/main-config-docs-autodocs.ts.mdx
+++ b/docs/snippets/common/main-config-docs-autodocs.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   docs: {
     autodocs: 'tag',
   },
diff --git a/docs/snippets/common/main-config-docs-default-name.js.mdx b/docs/snippets/common/main-config-docs-default-name.js.mdx
index a0587882bceb..de5608c116e2 100644
--- a/docs/snippets/common/main-config-docs-default-name.js.mdx
+++ b/docs/snippets/common/main-config-docs-default-name.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   docs: {
     defaultName: 'Documentation',
   },
diff --git a/docs/snippets/common/main-config-docs-default-name.ts.mdx b/docs/snippets/common/main-config-docs-default-name.ts.mdx
index 95453ebd19c5..3ebe947b8a09 100644
--- a/docs/snippets/common/main-config-docs-default-name.ts.mdx
+++ b/docs/snippets/common/main-config-docs-default-name.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   docs: {
     defaultName: 'Documentation',
   },
diff --git a/docs/snippets/common/main-config-docs-docs-mode.js.mdx b/docs/snippets/common/main-config-docs-docs-mode.js.mdx
index e33b087401e5..3eba728db211 100644
--- a/docs/snippets/common/main-config-docs-docs-mode.js.mdx
+++ b/docs/snippets/common/main-config-docs-docs-mode.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   docs: {
     docsMode: true,
   },
diff --git a/docs/snippets/common/main-config-docs-docs-mode.ts.mdx b/docs/snippets/common/main-config-docs-docs-mode.ts.mdx
index c030c9bd5418..a632dd4fc506 100644
--- a/docs/snippets/common/main-config-docs-docs-mode.ts.mdx
+++ b/docs/snippets/common/main-config-docs-docs-mode.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   docs: {
     docsMode: true,
   },
diff --git a/docs/snippets/common/main-config-env.js.mdx b/docs/snippets/common/main-config-env.js.mdx
index 6606373e9684..6d37069cdb4d 100644
--- a/docs/snippets/common/main-config-env.js.mdx
+++ b/docs/snippets/common/main-config-env.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   /*
    * 👇 The `config` argument contains all the other existing environment variables.
    * Either configured in an `.env` file or configured on the command line.
diff --git a/docs/snippets/common/main-config-env.ts.mdx b/docs/snippets/common/main-config-env.ts.mdx
index a8e00327122c..d5c0acc1ee2a 100644
--- a/docs/snippets/common/main-config-env.ts.mdx
+++ b/docs/snippets/common/main-config-env.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   /*
    * 👇 The `config` argument contains all the other existing environment variables.
    * Either configured in an `.env` file or configured on the command line.
diff --git a/docs/snippets/common/main-config-features-arg-type-targets-v7.js.mdx b/docs/snippets/common/main-config-features-arg-type-targets-v7.js.mdx
index 4c2c51d21805..676bbf628fe8 100644
--- a/docs/snippets/common/main-config-features-arg-type-targets-v7.js.mdx
+++ b/docs/snippets/common/main-config-features-arg-type-targets-v7.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   features: {
     argTypeTargetsV7: true,
   },
diff --git a/docs/snippets/common/main-config-features-arg-type-targets-v7.ts.mdx b/docs/snippets/common/main-config-features-arg-type-targets-v7.ts.mdx
index 8d50c307e167..907f5ce59ab3 100644
--- a/docs/snippets/common/main-config-features-arg-type-targets-v7.ts.mdx
+++ b/docs/snippets/common/main-config-features-arg-type-targets-v7.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   features: {
     argTypeTargetsV7: true,
   },
diff --git a/docs/snippets/common/main-config-features-build-stories-json.js.mdx b/docs/snippets/common/main-config-features-build-stories-json.js.mdx
index c5ff8c930cc2..cad496dd3d4e 100644
--- a/docs/snippets/common/main-config-features-build-stories-json.js.mdx
+++ b/docs/snippets/common/main-config-features-build-stories-json.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   features: {
     buildStoriesJson: true,
   },
diff --git a/docs/snippets/common/main-config-features-build-stories-json.ts.mdx b/docs/snippets/common/main-config-features-build-stories-json.ts.mdx
index c45025aaf698..4a4966a7a371 100644
--- a/docs/snippets/common/main-config-features-build-stories-json.ts.mdx
+++ b/docs/snippets/common/main-config-features-build-stories-json.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   features: {
     buildStoriesJson: true,
   },
diff --git a/docs/snippets/common/main-config-features-legacy-decorator-file-order.js.mdx b/docs/snippets/common/main-config-features-legacy-decorator-file-order.js.mdx
index 27177c827752..e7a1177f9620 100644
--- a/docs/snippets/common/main-config-features-legacy-decorator-file-order.js.mdx
+++ b/docs/snippets/common/main-config-features-legacy-decorator-file-order.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   features: {
     legacyDecoratorFileOrder: true,
   },
diff --git a/docs/snippets/common/main-config-features-legacy-decorator-file-order.ts.mdx b/docs/snippets/common/main-config-features-legacy-decorator-file-order.ts.mdx
index e3d7ee7da2cb..46f83c552a79 100644
--- a/docs/snippets/common/main-config-features-legacy-decorator-file-order.ts.mdx
+++ b/docs/snippets/common/main-config-features-legacy-decorator-file-order.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   features: {
     legacyDecoratorFileOrder: true,
   },
diff --git a/docs/snippets/common/main-config-features-legacy-mdx-1.js.mdx b/docs/snippets/common/main-config-features-legacy-mdx-1.js.mdx
index 98abf71e4e39..e961bf074cb3 100644
--- a/docs/snippets/common/main-config-features-legacy-mdx-1.js.mdx
+++ b/docs/snippets/common/main-config-features-legacy-mdx-1.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   features: {
     legacyMdx1: true, // 👈 Enables MDX v1 support
   },
diff --git a/docs/snippets/common/main-config-features-legacy-mdx-1.ts.mdx b/docs/snippets/common/main-config-features-legacy-mdx-1.ts.mdx
index a72e4d462139..c983311700f4 100644
--- a/docs/snippets/common/main-config-features-legacy-mdx-1.ts.mdx
+++ b/docs/snippets/common/main-config-features-legacy-mdx-1.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   features: {
     legacyMdx1: true, // 👈 Enables MDX v1 support
   },
diff --git a/docs/snippets/common/main-config-features-story-store-v7.js.mdx b/docs/snippets/common/main-config-features-story-store-v7.js.mdx
index 3fb7615c5a23..532af975ead3 100644
--- a/docs/snippets/common/main-config-features-story-store-v7.js.mdx
+++ b/docs/snippets/common/main-config-features-story-store-v7.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   features: {
     storyStoreV7: false, // 👈 Opt out of on-demand story loading
   },
diff --git a/docs/snippets/common/main-config-features-story-store-v7.ts.mdx b/docs/snippets/common/main-config-features-story-store-v7.ts.mdx
index 0a20bb9b1e21..55f3c4858dc0 100644
--- a/docs/snippets/common/main-config-features-story-store-v7.ts.mdx
+++ b/docs/snippets/common/main-config-features-story-store-v7.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   features: {
     storyStoreV7: false, // 👈 Opt out of on-demand story loading
   },
diff --git a/docs/snippets/common/main-config-framework-options-builder-use-swc.js.mdx b/docs/snippets/common/main-config-framework-options-builder-use-swc.js.mdx
index 482fcc579176..12b5629fd8d7 100644
--- a/docs/snippets/common/main-config-framework-options-builder-use-swc.js.mdx
+++ b/docs/snippets/common/main-config-framework-options-builder-use-swc.js.mdx
@@ -11,6 +11,6 @@ export default {
       },
     },
   },
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
 };
 ```
diff --git a/docs/snippets/common/main-config-framework-options-builder-use-swc.ts.mdx b/docs/snippets/common/main-config-framework-options-builder-use-swc.ts.mdx
index c1d670f0f3a9..8f70a9e1b166 100644
--- a/docs/snippets/common/main-config-framework-options-builder-use-swc.ts.mdx
+++ b/docs/snippets/common/main-config-framework-options-builder-use-swc.ts.mdx
@@ -13,7 +13,7 @@ const config: StorybookConfig = {
       },
     },
   },
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
 };
 
 export default config;
diff --git a/docs/snippets/common/main-config-framework.js.mdx b/docs/snippets/common/main-config-framework.js.mdx
index a46d4d000bde..dfe7c04aaf23 100644
--- a/docs/snippets/common/main-config-framework.js.mdx
+++ b/docs/snippets/common/main-config-framework.js.mdx
@@ -9,6 +9,6 @@ export default {
       legacyRootApi: true,
     },
   },
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
 };
 ```
diff --git a/docs/snippets/common/main-config-framework.ts.mdx b/docs/snippets/common/main-config-framework.ts.mdx
index a7d6f257941d..644c9d6c2f0c 100644
--- a/docs/snippets/common/main-config-framework.ts.mdx
+++ b/docs/snippets/common/main-config-framework.ts.mdx
@@ -11,7 +11,7 @@ const config: StorybookConfig = {
       legacyRootApi: true,
     },
   },
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
 };
 
 export default config;
diff --git a/docs/snippets/common/main-config-log-level.js.mdx b/docs/snippets/common/main-config-log-level.js.mdx
index 53acd9df7248..92f8ed3629b8 100644
--- a/docs/snippets/common/main-config-log-level.js.mdx
+++ b/docs/snippets/common/main-config-log-level.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   logLevel: 'debug',
 };
 ```
diff --git a/docs/snippets/common/main-config-log-level.ts.mdx b/docs/snippets/common/main-config-log-level.ts.mdx
index 18994271b7d5..88ffbee8fa0a 100644
--- a/docs/snippets/common/main-config-log-level.ts.mdx
+++ b/docs/snippets/common/main-config-log-level.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   logLevel: 'debug',
 };
 
diff --git a/docs/snippets/common/main-config-manager-head.js.mdx b/docs/snippets/common/main-config-manager-head.js.mdx
index bd8bfb41eda8..0459c15a7c84 100644
--- a/docs/snippets/common/main-config-manager-head.js.mdx
+++ b/docs/snippets/common/main-config-manager-head.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   managerHead: (head) => `
     ${head}
     <link rel="preload" href="/fonts/my-custom-manager-font.woff2" />
diff --git a/docs/snippets/common/main-config-manager-head.ts.mdx b/docs/snippets/common/main-config-manager-head.ts.mdx
index 347b8aaf9f6a..6392d59d2cba 100644
--- a/docs/snippets/common/main-config-manager-head.ts.mdx
+++ b/docs/snippets/common/main-config-manager-head.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   managerHead: (head) => `
     ${head}
     <link rel="preload" href="/fonts/my-custom-manager-font.woff2" />
diff --git a/docs/snippets/common/main-config-preview-body.js.mdx b/docs/snippets/common/main-config-preview-body.js.mdx
index cd0315cf9bd1..53b0638f735e 100644
--- a/docs/snippets/common/main-config-preview-body.js.mdx
+++ b/docs/snippets/common/main-config-preview-body.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   previewBody: (body) => `
     ${body}
     ${
diff --git a/docs/snippets/common/main-config-preview-body.ts.mdx b/docs/snippets/common/main-config-preview-body.ts.mdx
index cc1e87e37a13..11429924ac03 100644
--- a/docs/snippets/common/main-config-preview-body.ts.mdx
+++ b/docs/snippets/common/main-config-preview-body.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   previewBody: (body) => `
     ${body}
     ${
diff --git a/docs/snippets/common/main-config-preview-head.js.mdx b/docs/snippets/common/main-config-preview-head.js.mdx
index 2ccf030eee8b..f0453e9069c4 100644
--- a/docs/snippets/common/main-config-preview-head.js.mdx
+++ b/docs/snippets/common/main-config-preview-head.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   previewHead: (head) => `
     ${head}
     ${
diff --git a/docs/snippets/common/main-config-preview-head.ts.mdx b/docs/snippets/common/main-config-preview-head.ts.mdx
index 0a07db3f1f8c..bde2b5816cc6 100644
--- a/docs/snippets/common/main-config-preview-head.ts.mdx
+++ b/docs/snippets/common/main-config-preview-head.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   previewHead: (head) => `
     ${head}
     ${
diff --git a/docs/snippets/common/main-config-refs-disable.js.mdx b/docs/snippets/common/main-config-refs-disable.js.mdx
index b64a6a41bb07..b1bf75e08d9c 100644
--- a/docs/snippets/common/main-config-refs-disable.js.mdx
+++ b/docs/snippets/common/main-config-refs-disable.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   refs: {
     'package-name': { disable: true },
   },
diff --git a/docs/snippets/common/main-config-refs-disable.ts.mdx b/docs/snippets/common/main-config-refs-disable.ts.mdx
index 926639de3f93..586096d20ff5 100644
--- a/docs/snippets/common/main-config-refs-disable.ts.mdx
+++ b/docs/snippets/common/main-config-refs-disable.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   refs: {
     'package-name': { disable: true },
   },
diff --git a/docs/snippets/common/main-config-refs-with-function.js.mdx b/docs/snippets/common/main-config-refs-with-function.js.mdx
index b81995527f83..5fc96d6cc28a 100644
--- a/docs/snippets/common/main-config-refs-with-function.js.mdx
+++ b/docs/snippets/common/main-config-refs-with-function.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
 
   // 👇 Retrieve the current environment from the configType argument
   refs: (config, { configType }) => {
diff --git a/docs/snippets/common/main-config-refs-with-function.ts.mdx b/docs/snippets/common/main-config-refs-with-function.ts.mdx
index f30a85b35710..e66643eddc5e 100644
--- a/docs/snippets/common/main-config-refs-with-function.ts.mdx
+++ b/docs/snippets/common/main-config-refs-with-function.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
 
   // 👇 Retrieve the current environment from the configType argument
   refs: (config, { configType }) => {
diff --git a/docs/snippets/common/main-config-refs.js.mdx b/docs/snippets/common/main-config-refs.js.mdx
index 01dd04cc7c5e..403c205db4cc 100644
--- a/docs/snippets/common/main-config-refs.js.mdx
+++ b/docs/snippets/common/main-config-refs.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   refs: {
     'design-system': {
       title: 'Storybook Design System',
diff --git a/docs/snippets/common/main-config-refs.ts.mdx b/docs/snippets/common/main-config-refs.ts.mdx
index dfad5487b654..ecccd8cbaa0a 100644
--- a/docs/snippets/common/main-config-refs.ts.mdx
+++ b/docs/snippets/common/main-config-refs.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   refs: {
     'design-system': {
       title: 'Storybook Design System',
diff --git a/docs/snippets/common/main-config-static-dirs-with-object.js.mdx b/docs/snippets/common/main-config-static-dirs-with-object.js.mdx
index 6a664f5e0ed9..250d5ae5f319 100644
--- a/docs/snippets/common/main-config-static-dirs-with-object.js.mdx
+++ b/docs/snippets/common/main-config-static-dirs-with-object.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   staticDirs: [{ from: '../my-custom-assets/images', to: '/assets' }],
 };
 ```
diff --git a/docs/snippets/common/main-config-static-dirs-with-object.ts.mdx b/docs/snippets/common/main-config-static-dirs-with-object.ts.mdx
index fa223951d7d8..59d261a4a460 100644
--- a/docs/snippets/common/main-config-static-dirs-with-object.ts.mdx
+++ b/docs/snippets/common/main-config-static-dirs-with-object.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   staticDirs: [{ from: '../my-custom-assets/images', to: '/assets' }],
 };
 
diff --git a/docs/snippets/common/main-config-static-dirs.js.mdx b/docs/snippets/common/main-config-static-dirs.js.mdx
index 95d7fed47766..3ef837411079 100644
--- a/docs/snippets/common/main-config-static-dirs.js.mdx
+++ b/docs/snippets/common/main-config-static-dirs.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   staticDirs: ['../public', '../static'],
 };
 ```
diff --git a/docs/snippets/common/main-config-static-dirs.ts.mdx b/docs/snippets/common/main-config-static-dirs.ts.mdx
index 24e48f0e852a..63a9345742d7 100644
--- a/docs/snippets/common/main-config-static-dirs.ts.mdx
+++ b/docs/snippets/common/main-config-static-dirs.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   staticDirs: ['../public', '../static'],
 };
 
diff --git a/docs/snippets/common/main-config-stories-ordered.js.mdx b/docs/snippets/common/main-config-stories-ordered.js.mdx
index 3b723bca4479..6c07a42b86e0 100644
--- a/docs/snippets/common/main-config-stories-ordered.js.mdx
+++ b/docs/snippets/common/main-config-stories-ordered.js.mdx
@@ -6,7 +6,7 @@ export default {
   framework: '@storybook/your-framework',
   stories: [
     '../src/**/*.mdx', // 👈 These will display first in the sidebar
-    '../src/**/*.stories.@(js|jsx|ts|tsx)', // 👈 Followed by these
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)', // 👈 Followed by these
   ],
 };
 ```
diff --git a/docs/snippets/common/main-config-stories-ordered.ts.mdx b/docs/snippets/common/main-config-stories-ordered.ts.mdx
index 479af8c82a4a..b4909c9f625f 100644
--- a/docs/snippets/common/main-config-stories-ordered.ts.mdx
+++ b/docs/snippets/common/main-config-stories-ordered.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
 };
 
 export default config;
diff --git a/docs/snippets/common/main-config-stories.js.mdx b/docs/snippets/common/main-config-stories.js.mdx
index 23f6a239b0da..d59db1bcbaf8 100644
--- a/docs/snippets/common/main-config-stories.js.mdx
+++ b/docs/snippets/common/main-config-stories.js.mdx
@@ -4,6 +4,6 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
 };
 ```
diff --git a/docs/snippets/common/main-config-stories.ts.mdx b/docs/snippets/common/main-config-stories.ts.mdx
index 479af8c82a4a..b4909c9f625f 100644
--- a/docs/snippets/common/main-config-stories.ts.mdx
+++ b/docs/snippets/common/main-config-stories.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
 };
 
 export default config;
diff --git a/docs/snippets/common/main-config-typescript-check-options.ts.mdx b/docs/snippets/common/main-config-typescript-check-options.ts.mdx
index 8c11fdf51c45..0581f7ee5ebf 100644
--- a/docs/snippets/common/main-config-typescript-check-options.ts.mdx
+++ b/docs/snippets/common/main-config-typescript-check-options.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   typescript: {
     check: true,
     checkOptions: {
diff --git a/docs/snippets/common/main-config-typescript-check.ts.mdx b/docs/snippets/common/main-config-typescript-check.ts.mdx
index 55cee34269a9..5f0149dfcb5e 100644
--- a/docs/snippets/common/main-config-typescript-check.ts.mdx
+++ b/docs/snippets/common/main-config-typescript-check.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   typescript: {
     check: true,
   },
diff --git a/docs/snippets/common/main-config-typescript-react-docgen-typescript-options.ts.mdx b/docs/snippets/common/main-config-typescript-react-docgen-typescript-options.ts.mdx
index 2dae2c64ad8f..fc36649054e1 100644
--- a/docs/snippets/common/main-config-typescript-react-docgen-typescript-options.ts.mdx
+++ b/docs/snippets/common/main-config-typescript-react-docgen-typescript-options.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   typescript: {
     reactDocgen: 'react-docgen-typescript',
     reactDocgenTypescriptOptions: {
diff --git a/docs/snippets/common/main-config-typescript-react-docgen.ts.mdx b/docs/snippets/common/main-config-typescript-react-docgen.ts.mdx
index 9786b0e949ff..6b908ac4000f 100644
--- a/docs/snippets/common/main-config-typescript-react-docgen.ts.mdx
+++ b/docs/snippets/common/main-config-typescript-react-docgen.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   typescript: {
     reactDocgen: 'react-docgen-typescript',
   },
diff --git a/docs/snippets/common/main-config-typescript-skip-babel.ts.mdx b/docs/snippets/common/main-config-typescript-skip-babel.ts.mdx
index b27a3cab853f..c0c39d39a12d 100644
--- a/docs/snippets/common/main-config-typescript-skip-babel.ts.mdx
+++ b/docs/snippets/common/main-config-typescript-skip-babel.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   typescript: {
     skipBabel: true,
   },
diff --git a/docs/snippets/common/main-config-typical.js.mdx b/docs/snippets/common/main-config-typical.js.mdx
index 595819e98e12..4f31198b4088 100644
--- a/docs/snippets/common/main-config-typical.js.mdx
+++ b/docs/snippets/common/main-config-typical.js.mdx
@@ -5,7 +5,7 @@ const config = {
   // Required
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   // Optional
   addons: ['@storybook/addon-essentials'],
   docs: {
diff --git a/docs/snippets/common/main-config-typical.ts.mdx b/docs/snippets/common/main-config-typical.ts.mdx
index 4c7f865093ac..d71cf4994cb5 100644
--- a/docs/snippets/common/main-config-typical.ts.mdx
+++ b/docs/snippets/common/main-config-typical.ts.mdx
@@ -7,7 +7,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 const config: StorybookConfig = {
   // Required
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   // Optional
   addons: ['@storybook/addon-essentials'],
   docs: {
diff --git a/docs/snippets/common/main-config-vite-final.js.mdx b/docs/snippets/common/main-config-vite-final.js.mdx
index 5e2c51be5db9..b2987dcd412c 100644
--- a/docs/snippets/common/main-config-vite-final.js.mdx
+++ b/docs/snippets/common/main-config-vite-final.js.mdx
@@ -6,7 +6,7 @@ import { mergeConfig } from 'vite';
 export default {
   // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   async viteFinal(config, { configType }) {
     if (configType === 'DEVELOPMENT') {
       // Your development configuration goes here
diff --git a/docs/snippets/common/main-config-vite-final.ts.mdx b/docs/snippets/common/main-config-vite-final.ts.mdx
index 9250d2f3721a..a82973f98afc 100644
--- a/docs/snippets/common/main-config-vite-final.ts.mdx
+++ b/docs/snippets/common/main-config-vite-final.ts.mdx
@@ -7,7 +7,7 @@ import { mergeConfig } from 'vite';
 
 const config = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   async viteFinal(config, { configType }) {
     if (configType === 'DEVELOPMENT') {
       // Your development configuration goes here
diff --git a/docs/snippets/common/main-config-webpack-final.js.mdx b/docs/snippets/common/main-config-webpack-final.js.mdx
index 5af7206cd23f..65d346eb38db 100644
--- a/docs/snippets/common/main-config-webpack-final.js.mdx
+++ b/docs/snippets/common/main-config-webpack-final.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   async webpackFinal(config, { configType }) {
     if (configType === 'DEVELOPMENT') {
       // Modify config for development
diff --git a/docs/snippets/common/main-config-webpack-final.ts.mdx b/docs/snippets/common/main-config-webpack-final.ts.mdx
index 292b12d72632..c3d1e9aa2185 100644
--- a/docs/snippets/common/main-config-webpack-final.ts.mdx
+++ b/docs/snippets/common/main-config-webpack-final.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   async webpackFinal(config, { configType }) {
     if (configType === 'DEVELOPMENT') {
       // Modify config for development
diff --git a/docs/snippets/common/my-component-story-import-json.js.mdx b/docs/snippets/common/my-component-story-import-json.js.mdx
index 61e6135a819a..b3c7087c79c6 100644
--- a/docs/snippets/common/my-component-story-import-json.js.mdx
+++ b/docs/snippets/common/my-component-story-import-json.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js|jsx|ts|tsx
+// MyComponent.stories.js|jsx|mjs|ts|tsx
 
 // This will automatically be parsed to the contents of `data.json`
 import data from './data.json';
diff --git a/docs/snippets/common/my-component-story-import-static-asset.js.mdx b/docs/snippets/common/my-component-story-import-static-asset.js.mdx
index b62d06a85e80..b0a0b84a3a75 100644
--- a/docs/snippets/common/my-component-story-import-static-asset.js.mdx
+++ b/docs/snippets/common/my-component-story-import-static-asset.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js|jsx|ts|tsx
+// MyComponent.stories.js|jsx|mjs|ts|tsx
 
 // This will include './static/image.png' in the bundle.
 // And return a path to be included in a src attribute
diff --git a/docs/snippets/common/my-component-story.js.mdx b/docs/snippets/common/my-component-story.js.mdx
index b8843b66f251..a4bc0493fbb0 100644
--- a/docs/snippets/common/my-component-story.js.mdx
+++ b/docs/snippets/common/my-component-story.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js|jsx|ts|tsx
+// MyComponent.stories.js|jsx|mjs|ts|tsx
 
 import { MyComponent } from './MyComponent';
 
diff --git a/docs/snippets/common/storybook-a11y-register.js.mdx b/docs/snippets/common/storybook-a11y-register.js.mdx
index 35beddf786a6..8d962d452579 100644
--- a/docs/snippets/common/storybook-a11y-register.js.mdx
+++ b/docs/snippets/common/storybook-a11y-register.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     // Other Storybook addons
     '@storybook/addon-a11y', //👈 The a11y addon goes here
diff --git a/docs/snippets/common/storybook-a11y-register.ts.mdx b/docs/snippets/common/storybook-a11y-register.ts.mdx
index 49737a09b31f..06d1e9dd10ec 100644
--- a/docs/snippets/common/storybook-a11y-register.ts.mdx
+++ b/docs/snippets/common/storybook-a11y-register.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     // Other Storybook addons
     '@storybook/addon-a11y', //👈 The a11y addon goes here
diff --git a/docs/snippets/common/storybook-auto-docs-full-config.js.mdx b/docs/snippets/common/storybook-auto-docs-full-config.js.mdx
index 3dcc5ecf4fe1..3ff19b4d7b83 100644
--- a/docs/snippets/common/storybook-auto-docs-full-config.js.mdx
+++ b/docs/snippets/common/storybook-auto-docs-full-config.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['@storybook/addon-essentials'],
   docs: {
     //👇 See the table below for the list of supported options
diff --git a/docs/snippets/common/storybook-auto-docs-full-config.ts.mdx b/docs/snippets/common/storybook-auto-docs-full-config.ts.mdx
index e5486ab197db..2c1eb1bac113 100644
--- a/docs/snippets/common/storybook-auto-docs-full-config.ts.mdx
+++ b/docs/snippets/common/storybook-auto-docs-full-config.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['@storybook/addon-essentials'],
   docs: {
     //👇 See the table below for the list of supported options
diff --git a/docs/snippets/common/storybook-auto-docs-main-mdx-config.js.mdx b/docs/snippets/common/storybook-auto-docs-main-mdx-config.js.mdx
index 42b205357d42..d4a801158196 100644
--- a/docs/snippets/common/storybook-auto-docs-main-mdx-config.js.mdx
+++ b/docs/snippets/common/storybook-auto-docs-main-mdx-config.js.mdx
@@ -7,7 +7,7 @@ export default {
   stories: [
     //👇 Your documentation written in MDX along with your stories goes here
     '../src/**/*.mdx',
-    '../src/**/*.stories.@(js|jsx|ts|tsx)',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
   addons: ['@storybook/addon-essentials'],
 };
diff --git a/docs/snippets/common/storybook-auto-docs-main-mdx-config.ts.mdx b/docs/snippets/common/storybook-auto-docs-main-mdx-config.ts.mdx
index 3e69a302250c..37014b66e0ff 100644
--- a/docs/snippets/common/storybook-auto-docs-main-mdx-config.ts.mdx
+++ b/docs/snippets/common/storybook-auto-docs-main-mdx-config.ts.mdx
@@ -10,7 +10,7 @@ const config: StorybookConfig = {
   stories: [
     //👇 Your documentation written in MDX along with your stories goes here
     '../src/**/*.mdx',
-    '../src/**/*.stories.@(js|jsx|ts|tsx)',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
   addons: ['@storybook/addon-essentials'],
 };
diff --git a/docs/snippets/common/storybook-interactions-addon-registration.js.mdx b/docs/snippets/common/storybook-interactions-addon-registration.js.mdx
index a9525c6fc91b..cec3e7796484 100644
--- a/docs/snippets/common/storybook-interactions-addon-registration.js.mdx
+++ b/docs/snippets/common/storybook-interactions-addon-registration.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     // Other Storybook addons
     '@storybook/addon-interactions', // 👈 Register the addon
diff --git a/docs/snippets/common/storybook-interactions-addon-registration.ts.mdx b/docs/snippets/common/storybook-interactions-addon-registration.ts.mdx
index 8943ae6b7e9f..25a5d322873e 100644
--- a/docs/snippets/common/storybook-interactions-addon-registration.ts.mdx
+++ b/docs/snippets/common/storybook-interactions-addon-registration.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     // Other Storybook addons
     '@storybook/addon-interactions', // 👈 Register the addon
diff --git a/docs/snippets/common/storybook-main-config-remark-options.js.mdx b/docs/snippets/common/storybook-main-config-remark-options.js.mdx
index 8fe8c9b8914d..f8cf30c06a14 100644
--- a/docs/snippets/common/storybook-main-config-remark-options.js.mdx
+++ b/docs/snippets/common/storybook-main-config-remark-options.js.mdx
@@ -6,7 +6,7 @@ import remarkGfm from 'remark-gfm';
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     // Other addons go here
     {
diff --git a/docs/snippets/common/storybook-main-config-remark-options.ts.mdx b/docs/snippets/common/storybook-main-config-remark-options.ts.mdx
index 358f8117d519..00dba480a139 100644
--- a/docs/snippets/common/storybook-main-config-remark-options.ts.mdx
+++ b/docs/snippets/common/storybook-main-config-remark-options.ts.mdx
@@ -8,7 +8,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     // Other addons go here
     {
diff --git a/docs/snippets/common/storybook-main-disable-addon.js.mdx b/docs/snippets/common/storybook-main-disable-addon.js.mdx
index 3d835da12d44..4940a5b604da 100644
--- a/docs/snippets/common/storybook-main-disable-addon.js.mdx
+++ b/docs/snippets/common/storybook-main-disable-addon.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     {
       name: '@storybook/addon-essentials',
diff --git a/docs/snippets/common/storybook-main-disable-addon.ts.mdx b/docs/snippets/common/storybook-main-disable-addon.ts.mdx
index bc3e66606d0f..16b51553b473 100644
--- a/docs/snippets/common/storybook-main-disable-addon.ts.mdx
+++ b/docs/snippets/common/storybook-main-disable-addon.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     {
       name: '@storybook/addon-essentials',
diff --git a/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx b/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx
index 5302439d5ece..88304ed3dbbc 100644
--- a/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx
+++ b/docs/snippets/common/storybook-main-disable-telemetry.main-js.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
     disableTelemetry: true, // 👈 Disables telemetry
   },
diff --git a/docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx b/docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx
index 610e5205a671..c155d3a0142d 100644
--- a/docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx
+++ b/docs/snippets/common/storybook-main-disable-telemetry.main-ts.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
     disableTelemetry: true, // 👈 Disables telemetry
   },
diff --git a/docs/snippets/common/storybook-main-enable-transcludemarkdown.js.mdx b/docs/snippets/common/storybook-main-enable-transcludemarkdown.js.mdx
index 0e7e090c8ddf..afb2522e6dbe 100644
--- a/docs/snippets/common/storybook-main-enable-transcludemarkdown.js.mdx
+++ b/docs/snippets/common/storybook-main-enable-transcludemarkdown.js.mdx
@@ -5,7 +5,7 @@ export default {
   stories: [
     //👇 Changes the load order of our stories. First loads the Changelog page
     '../src/Changelog.mdx',
-    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
+    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
   addons: [
     '@storybook/addon-links',
diff --git a/docs/snippets/common/storybook-main-extend-ts-config.ts.mdx b/docs/snippets/common/storybook-main-extend-ts-config.ts.mdx
index 8f8cce570d10..a7fa7fd28444 100644
--- a/docs/snippets/common/storybook-main-extend-ts-config.ts.mdx
+++ b/docs/snippets/common/storybook-main-extend-ts-config.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   typescript: {
     reactDocgen: 'react-docgen-typescript',
     reactDocgenTypescriptOptions: {
diff --git a/docs/snippets/common/storybook-main-figma-addon-register.js.mdx b/docs/snippets/common/storybook-main-figma-addon-register.js.mdx
index 751be2a42985..4f71c0578217 100644
--- a/docs/snippets/common/storybook-main-figma-addon-register.js.mdx
+++ b/docs/snippets/common/storybook-main-figma-addon-register.js.mdx
@@ -2,7 +2,7 @@
 // .storybook/main.js|ts
 
 export default {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     // Other Storybook addons
     'storybook-addon-designs', // 👈 Addon is registered here
diff --git a/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.js.mdx b/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.js.mdx
index 4ff0402696d2..0011fc2f7377 100644
--- a/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.js.mdx
+++ b/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   typescript: {
     // Overrides the default Typescript configuration to allow multi-package components to be documented via Autodocs.
     reactDocgen: 'react-docgen',
diff --git a/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.ts.mdx b/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.ts.mdx
index 6722e7b6d85d..45ed76c75eb9 100644
--- a/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.ts.mdx
+++ b/docs/snippets/common/storybook-main-fix-imports-autodocs-monorepo.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   typescript: {
     // Overrides the default Typescript configuration to allow multi-package components to be documented via Autodocs.
     reactDocgen: 'react-docgen',
diff --git a/docs/snippets/common/storybook-main-full-individual-essentials-config.js.mdx b/docs/snippets/common/storybook-main-full-individual-essentials-config.js.mdx
index 00348df39af8..07391e43ad0b 100644
--- a/docs/snippets/common/storybook-main-full-individual-essentials-config.js.mdx
+++ b/docs/snippets/common/storybook-main-full-individual-essentials-config.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-actions',
diff --git a/docs/snippets/common/storybook-main-full-individual-essentials-config.ts.mdx b/docs/snippets/common/storybook-main-full-individual-essentials-config.ts.mdx
index 4416b8315aee..b2407522632b 100644
--- a/docs/snippets/common/storybook-main-full-individual-essentials-config.ts.mdx
+++ b/docs/snippets/common/storybook-main-full-individual-essentials-config.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-actions',
diff --git a/docs/snippets/common/storybook-main-pnpm-with-module-resolution.js.mdx b/docs/snippets/common/storybook-main-pnpm-with-module-resolution.js.mdx
index 6453a5c96664..7b70439e066a 100644
--- a/docs/snippets/common/storybook-main-pnpm-with-module-resolution.js.mdx
+++ b/docs/snippets/common/storybook-main-pnpm-with-module-resolution.js.mdx
@@ -12,7 +12,7 @@ export default {
     name: wrapForPnp('@storybook/your-framework'),
     options: {},
   },
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     //👇 Use wrapForPnp when referencing Storybook's addons and frameworks
     wrapForPnp('@storybook/addon-essentials'),
diff --git a/docs/snippets/common/storybook-main-pnpm-with-module-resolution.ts.mdx b/docs/snippets/common/storybook-main-pnpm-with-module-resolution.ts.mdx
index f34059e53b6b..9dfedba3d0c1 100644
--- a/docs/snippets/common/storybook-main-pnpm-with-module-resolution.ts.mdx
+++ b/docs/snippets/common/storybook-main-pnpm-with-module-resolution.ts.mdx
@@ -15,7 +15,7 @@ const config: StorybookConfig = {
     name: wrapForPnp('@storybook/your-framework'),
     options: {},
   },
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     //👇 Use wrapForPnp when referencing Storybook's addons and frameworks
     wrapForPnp('@storybook/addon-essentials'),
diff --git a/docs/snippets/common/storybook-main-preset-config.js.mdx b/docs/snippets/common/storybook-main-preset-config.js.mdx
index 94e8fe9d9801..20aedeebf98f 100644
--- a/docs/snippets/common/storybook-main-preset-config.js.mdx
+++ b/docs/snippets/common/storybook-main-preset-config.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['@storybook/preset-scss'],
 };
 ```
diff --git a/docs/snippets/common/storybook-main-preset-config.ts.mdx b/docs/snippets/common/storybook-main-preset-config.ts.mdx
index aa36ac99264a..ff07205c2bdd 100644
--- a/docs/snippets/common/storybook-main-preset-config.ts.mdx
+++ b/docs/snippets/common/storybook-main-preset-config.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['@storybook/preset-scss'],
 };
 
diff --git a/docs/snippets/common/storybook-main-ref-local.js.mdx b/docs/snippets/common/storybook-main-ref-local.js.mdx
index 88dac6d3385d..6cb230e0d9fe 100644
--- a/docs/snippets/common/storybook-main-ref-local.js.mdx
+++ b/docs/snippets/common/storybook-main-ref-local.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   refs: {
     react: {
       title: 'React',
diff --git a/docs/snippets/common/storybook-main-ref-local.ts.mdx b/docs/snippets/common/storybook-main-ref-local.ts.mdx
index f4087d5d9bff..561050b14aa5 100644
--- a/docs/snippets/common/storybook-main-ref-local.ts.mdx
+++ b/docs/snippets/common/storybook-main-ref-local.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   refs: {
     react: {
       title: 'React',
diff --git a/docs/snippets/common/storybook-main-register-essentials-addon.js.mdx b/docs/snippets/common/storybook-main-register-essentials-addon.js.mdx
index 9d0ce1ace976..6e7e2fca09fe 100644
--- a/docs/snippets/common/storybook-main-register-essentials-addon.js.mdx
+++ b/docs/snippets/common/storybook-main-register-essentials-addon.js.mdx
@@ -3,7 +3,7 @@
 
 export default {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['@storybook/addon-essentials'], // 👈 Register addon-essentials
 };
 ```
diff --git a/docs/snippets/common/storybook-main-register-essentials-addon.ts.mdx b/docs/snippets/common/storybook-main-register-essentials-addon.ts.mdx
index 2b6edc3f56c1..d4e42fd31129 100644
--- a/docs/snippets/common/storybook-main-register-essentials-addon.ts.mdx
+++ b/docs/snippets/common/storybook-main-register-essentials-addon.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['@storybook/addon-essentials'], // 👈 Register addon-essentials
 };
 
diff --git a/docs/snippets/common/storybook-main-register-individual-actions-addon.js.mdx b/docs/snippets/common/storybook-main-register-individual-actions-addon.js.mdx
index 7cf9493971a2..7a84d97d9606 100644
--- a/docs/snippets/common/storybook-main-register-individual-actions-addon.js.mdx
+++ b/docs/snippets/common/storybook-main-register-individual-actions-addon.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-actions'],
 };
 ```
diff --git a/docs/snippets/common/storybook-main-register-individual-actions-addon.ts.mdx b/docs/snippets/common/storybook-main-register-individual-actions-addon.ts.mdx
index 43ddbb8edaef..f2ca23b47431 100644
--- a/docs/snippets/common/storybook-main-register-individual-actions-addon.ts.mdx
+++ b/docs/snippets/common/storybook-main-register-individual-actions-addon.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-actions'],
 };
 
diff --git a/docs/snippets/common/storybook-main-simplified-config.js.mdx b/docs/snippets/common/storybook-main-simplified-config.js.mdx
index 17652759c45f..4e10ee8faaf3 100644
--- a/docs/snippets/common/storybook-main-simplified-config.js.mdx
+++ b/docs/snippets/common/storybook-main-simplified-config.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   webpackFinal: async (config) => {
     config.plugins.push(...);
     return config;
diff --git a/docs/snippets/common/storybook-main-simplified-config.ts.mdx b/docs/snippets/common/storybook-main-simplified-config.ts.mdx
index 9e374d2c46b2..8fe2fee95565 100644
--- a/docs/snippets/common/storybook-main-simplified-config.ts.mdx
+++ b/docs/snippets/common/storybook-main-simplified-config.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
    webpackFinal: async (config) => {
     config.plugins.push(...);
     return config;
diff --git a/docs/snippets/common/storybook-main-ts-module-resolution.js.mdx b/docs/snippets/common/storybook-main-ts-module-resolution.js.mdx
index 9b02a41692a9..05b9426a09b4 100644
--- a/docs/snippets/common/storybook-main-ts-module-resolution.js.mdx
+++ b/docs/snippets/common/storybook-main-ts-module-resolution.js.mdx
@@ -6,7 +6,7 @@ import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   webpackFinal: async (config) => {
     config.resolve.plugins = [
       ...(config.resolve.plugins || []),
diff --git a/docs/snippets/common/storybook-main-ts-module-resolution.ts.mdx b/docs/snippets/common/storybook-main-ts-module-resolution.ts.mdx
index 8ec6bda19a50..0a0b220e7db7 100644
--- a/docs/snippets/common/storybook-main-ts-module-resolution.ts.mdx
+++ b/docs/snippets/common/storybook-main-ts-module-resolution.ts.mdx
@@ -8,7 +8,7 @@ import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   webpackFinal: async (config) => {
     config.resolve.plugins = [
       ...(config.resolve.plugins || []),
diff --git a/docs/snippets/common/storybook-main-using-existing-config.js.mdx b/docs/snippets/common/storybook-main-using-existing-config.js.mdx
index db988e9875ea..f2b5b4a659ea 100644
--- a/docs/snippets/common/storybook-main-using-existing-config.js.mdx
+++ b/docs/snippets/common/storybook-main-using-existing-config.js.mdx
@@ -6,7 +6,7 @@ import custom from '../webpack.config.js'; // 👈 Custom Webpack configuration
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   webpackFinal: async (config) => {
     return {
       ...config,
diff --git a/docs/snippets/common/storybook-main-using-existing-config.ts.mdx b/docs/snippets/common/storybook-main-using-existing-config.ts.mdx
index ff79312b588d..fcd34d2ab296 100644
--- a/docs/snippets/common/storybook-main-using-existing-config.ts.mdx
+++ b/docs/snippets/common/storybook-main-using-existing-config.ts.mdx
@@ -8,7 +8,7 @@ import custom from '../webpack.config.js'; // 👈 Custom Webpack configuration
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   webpackFinal: async (config) => {
     return {
       ...config,
diff --git a/docs/snippets/common/storybook-main-webpack-options.js.mdx b/docs/snippets/common/storybook-main-webpack-options.js.mdx
index 2839e6ce2a25..4642087270c0 100644
--- a/docs/snippets/common/storybook-main-webpack-options.js.mdx
+++ b/docs/snippets/common/storybook-main-webpack-options.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   features: {
     storyStoreV7: false,
   },
diff --git a/docs/snippets/common/storybook-main-webpack-options.ts.mdx b/docs/snippets/common/storybook-main-webpack-options.ts.mdx
index 8040430962f1..5a8295602d6c 100644
--- a/docs/snippets/common/storybook-main-webpack-options.ts.mdx
+++ b/docs/snippets/common/storybook-main-webpack-options.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   features: {
     storyStoreV7: false,
   },
diff --git a/docs/snippets/common/storybook-main-with-single-static-dir.js.mdx b/docs/snippets/common/storybook-main-with-single-static-dir.js.mdx
index 71ef4917be76..50898439ff1c 100644
--- a/docs/snippets/common/storybook-main-with-single-static-dir.js.mdx
+++ b/docs/snippets/common/storybook-main-with-single-static-dir.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   staticDirs: ['../public'], //👈 Configures the static asset folder in Storybook
 };
 ```
diff --git a/docs/snippets/common/storybook-main-with-single-static-dir.ts.mdx b/docs/snippets/common/storybook-main-with-single-static-dir.ts.mdx
index fa6cd1cde5f5..779ebee771f3 100644
--- a/docs/snippets/common/storybook-main-with-single-static-dir.ts.mdx
+++ b/docs/snippets/common/storybook-main-with-single-static-dir.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   staticDirs: ['../public'], //👈 Configures the static asset folder in Storybook
 };
 
diff --git a/docs/snippets/common/storybook-preset-configuration.js.mdx b/docs/snippets/common/storybook-preset-configuration.js.mdx
index 0687c5f86bb6..d13ec2b360bf 100644
--- a/docs/snippets/common/storybook-preset-configuration.js.mdx
+++ b/docs/snippets/common/storybook-preset-configuration.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     {
       name: '@storybook/preset-scss',
diff --git a/docs/snippets/common/storybook-preset-configuration.ts.mdx b/docs/snippets/common/storybook-preset-configuration.ts.mdx
index fa3a3d083a7b..86cc4e9877a3 100644
--- a/docs/snippets/common/storybook-preset-configuration.ts.mdx
+++ b/docs/snippets/common/storybook-preset-configuration.ts.mdx
@@ -7,7 +7,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 const config: StorybookConfig = {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     {
       name: '@storybook/preset-scss',
diff --git a/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx
index f6c7b4411121..b79e8f384cfe 100644
--- a/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx
+++ b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-js.js.mdx
@@ -4,7 +4,7 @@
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
     enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
   },
diff --git a/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx
index 0fee6560fd3b..ceabd58ad8b9 100644
--- a/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx
+++ b/docs/snippets/common/storybook-telemetry-main-enable-crash-reports.main-ts.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   core: {
     enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
   },
diff --git a/docs/snippets/common/storybook-vite-builder-aliasing.js.mdx b/docs/snippets/common/storybook-vite-builder-aliasing.js.mdx
index 086effb9eb80..ea5f2e7550de 100644
--- a/docs/snippets/common/storybook-vite-builder-aliasing.js.mdx
+++ b/docs/snippets/common/storybook-vite-builder-aliasing.js.mdx
@@ -4,7 +4,7 @@
 import { mergeConfig } from 'vite';
 
 export default {
-  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
   core: {
     builder: '@storybook/builder-vite',
diff --git a/docs/snippets/common/storybook-vite-builder-react-docgen.js.mdx b/docs/snippets/common/storybook-vite-builder-react-docgen.js.mdx
index 9c78fae2f166..63dcbfaea126 100644
--- a/docs/snippets/common/storybook-vite-builder-react-docgen.js.mdx
+++ b/docs/snippets/common/storybook-vite-builder-react-docgen.js.mdx
@@ -2,7 +2,7 @@
 // .storybook/main.js
 
 export default {
-  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
   core: {
     builder: '@storybook/builder-vite',
diff --git a/docs/snippets/common/storybook-vite-builder-register.js.mdx b/docs/snippets/common/storybook-vite-builder-register.js.mdx
index b950549bb84c..ecd1a215c3dc 100644
--- a/docs/snippets/common/storybook-vite-builder-register.js.mdx
+++ b/docs/snippets/common/storybook-vite-builder-register.js.mdx
@@ -2,7 +2,7 @@
 // .storybook/main.js|ts
 
 export default {
-  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
   core: {
     builder: '@storybook/builder-vite', // 👈 The builder enabled here.
diff --git a/docs/snippets/common/storybook-vite-builder-ts-configure.ts.mdx b/docs/snippets/common/storybook-vite-builder-ts-configure.ts.mdx
index eb239739083b..397e526c0b0a 100644
--- a/docs/snippets/common/storybook-vite-builder-ts-configure.ts.mdx
+++ b/docs/snippets/common/storybook-vite-builder-ts-configure.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   async viteFinal(config, options) {
     // Add your configuration here
     return config;
diff --git a/docs/snippets/react/document-screen-fetch.js.mdx b/docs/snippets/react/document-screen-fetch.js.mdx
index c92db05537d6..ca98cd83e4ae 100644
--- a/docs/snippets/react/document-screen-fetch.js.mdx
+++ b/docs/snippets/react/document-screen-fetch.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// YourPage.js|jsx|ts|tsx
+// YourPage.js|jsx|mjs|ts|tsx
 
 import React, { useState, useEffect } from 'react';
 
diff --git a/docs/snippets/react/my-component-story-use-globaltype-backwards-compat.js.mdx b/docs/snippets/react/my-component-story-use-globaltype-backwards-compat.js.mdx
index e53c6cd9f9c3..a7def3291707 100644
--- a/docs/snippets/react/my-component-story-use-globaltype-backwards-compat.js.mdx
+++ b/docs/snippets/react/my-component-story-use-globaltype-backwards-compat.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// MyComponent.stories.js|jsx|ts|tsx
+// MyComponent.stories.js|jsx|mjs|ts|tsx
 
 export const StoryWithLocale = ({ globals: { locale } }) => {
   const caption = getCaptionForLocale(locale);
diff --git a/docs/snippets/solid/document-screen-fetch.js.mdx b/docs/snippets/solid/document-screen-fetch.js.mdx
index 17c028587220..a7f5e5b0f3b9 100644
--- a/docs/snippets/solid/document-screen-fetch.js.mdx
+++ b/docs/snippets/solid/document-screen-fetch.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// YourPage.js|jsx|ts|tsx
+// YourPage.js|jsx|mjs|ts|tsx
 
 import { createSignal, Match, Switch } from 'solid-js';
 
diff --git a/docs/writing-docs/mdx.md b/docs/writing-docs/mdx.md
index 093a6c78cbc1..95170975e4e0 100644
--- a/docs/writing-docs/mdx.md
+++ b/docs/writing-docs/mdx.md
@@ -382,7 +382,7 @@ As Storybook relies on MDX 2 to render documentation, some technical limitations
 
 #### Storybook doesn't create documentation for my component stories
 
-If you run into a situation where Storybook is not able to able to detect and render the documentation for your component stories, it may be due to a misconfiguration in your Storybook. Check your configuration file (i.e., `.storybook/main.js|ts`) and ensure the `stories` configuration element provides the correct path to your stories location(e.g., `../src/**/*.stories.@(js|jsx|ts|tsx)`).
+If you run into a situation where Storybook is not able to able to detect and render the documentation for your component stories, it may be due to a misconfiguration in your Storybook. Check your configuration file (i.e., `.storybook/main.js|ts`) and ensure the `stories` configuration element provides the correct path to your stories location(e.g., `../src/**/*.stories.@(js|jsx|mjs|ts|tsx)`).
 
 #### The documentation doesn't render using `stories.mdx`