ESM: Only generate esm dist

code/.storybook/storybook.setup.ts

@@ -3,7 +3,6 @@ import { beforeAll, vi, expect as vitestExpect } from 'vitest';
 import { setProjectAnnotations } from '@storybook/react';
 import { userEvent as storybookEvent, expect as storybookExpect } from '@storybook/test';
 
-// eslint-disable-next-line import/namespace
 import * as testAnnotations from '@storybook/experimental-addon-test/preview';
 
 import * as coreAnnotations from '../addons/toolbars/template/stories/preview';

code/addons/a11y/package.json

@@ -25,23 +25,20 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "default": "./dist/index.js"
     },
     "./preview": {
       "types": "./dist/preview.d.ts",
-      "import": "./dist/preview.mjs",
-      "require": "./dist/preview.js"
+      "default": "./dist/preview.js"
     },
     "./manager": "./dist/manager.js",
     "./register": "./dist/manager.js",
     "./package.json": "./package.json"
   },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",

code/addons/actions/package.json

@@ -21,29 +21,25 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "default": "./dist/index.js"
     },
     "./decorator": {
       "types": "./dist/decorator.d.ts",
-      "import": "./dist/decorator.mjs",
-      "require": "./dist/decorator.js"
+      "default": "./dist/decorator.js"
     },
     "./preview": {
       "types": "./dist/preview.d.ts",
-      "import": "./dist/preview.mjs",
-      "require": "./dist/preview.js"
+      "default": "./dist/preview.js"
     },
     "./manager": "./dist/manager.js",
     "./register.js": "./dist/manager.js",
     "./package.json": "./package.json"
   },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "react-native": "dist/index.mjs",
+  "react-native": "dist/index.js",
   "types": "dist/index.d.ts",
   "typesVersions": {
     "*": {

code/addons/backgrounds/package.json

@@ -25,23 +25,20 @@
   },
   "license": "MIT",
   "author": "jbaxleyiii",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "default": "./dist/index.js"
     },
     "./preview": {
       "types": "./dist/preview.d.ts",
-      "import": "./dist/preview.mjs",
-      "require": "./dist/preview.js"
+      "default": "./dist/preview.js"
     },
     "./manager": "./dist/manager.js",
     "./register": "./dist/manager.js",
     "./package.json": "./package.json"
   },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",

code/addons/controls/package.json

@@ -25,18 +25,16 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "default": "./dist/index.js"
     },
     "./manager": "./dist/manager.js",
     "./register": "./dist/manager.js",
     "./package.json": "./package.json"
   },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",

code/addons/docs/package.json

@@ -24,45 +24,27 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "default": "./dist/index.js"
     },
     "./preview": {
       "types": "./dist/preview.d.ts",
-      "import": "./dist/preview.mjs",
-      "require": "./dist/preview.js"
+      "default": "./dist/preview.js"
     },
     "./preset": {
       "types": "./dist/preset.d.ts",
-      "import": "./dist/preset.js",
-      "require": "./dist/preset.js"
+      "default": "./dist/preset.js"
     },
     "./blocks": {
       "types": "./dist/blocks.d.ts",
-      "import": "./dist/blocks.mjs",
-      "require": "./dist/blocks.js"
-    },
-    "./dist/preview": {
-      "types": "./dist/preview.d.ts",
-      "import": "./dist/preview.mjs",
-      "require": "./dist/preview.js"
-    },
-    "./dist/preset": {
-      "types": "./dist/preset.d.ts",
-      "require": "./dist/preset.js"
-    },
-    "./dist/shims/mdx-react-shim": {
-      "types": "./dist/shims/mdx-react-shim.d.ts",
-      "import": "./dist/shims/mdx-react-shim.mjs",
-      "require": "./dist/shims/mdx-react-shim.js"
+      "default": "./dist/blocks.js"
     },
     "./mdx-react-shim": {
       "types": "./dist/shims/mdx-react-shim.d.ts",
-      "import": "./dist/shims/mdx-react-shim.mjs",
-      "require": "./dist/shims/mdx-react-shim.js"
+      "default": "./dist/shims/mdx-react-shim.js"
     },
     "./mdx-loader": "./dist/mdx-loader.js",
     "./svelte/HOC.svelte": "./svelte/HOC.svelte",
@@ -73,8 +55,6 @@
     "./web-components/index.js": "./web-components/index.js",
     "./package.json": "./package.json"
   },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
@@ -94,7 +74,7 @@
   ],
   "scripts": {
     "check": "jiti ../../../scripts/prepare/check.ts",
-    "prep": "jiti ../../../scripts/prepare/bundle.ts"
+    "prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
     "@mdx-js/react": "^3.0.0",
@@ -123,12 +103,16 @@
     "access": "public"
   },
   "bundler": {
-    "entries": [
+    "previewEntries": [
+      "./src/preview.ts"
+    ],
+    "exportEntries": [
       "./src/index.ts",
-      "./src/preset.ts",
-      "./src/preview.ts",
       "./src/blocks.ts",
-      "./src/shims/mdx-react-shim.ts",
+      "./src/shims/mdx-react-shim.ts"
+    ],
+    "nodeEntries": [
+      "./src/preset.ts",
       "./src/mdx-loader.ts"
     ]
   },

code/addons/docs/src/plugins/mdx-plugin.ts

@@ -1,4 +1,5 @@
 import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
 
 import type { Options } from 'storybook/internal/types';
 
@@ -35,9 +36,8 @@ export async function mdxPlugin(options: Options): Promise<Plugin> {
       const mdxLoaderOptions: CompileOptions = await presets.apply('mdxLoaderOptions', {
         ...mdxPluginOptions,
         mdxCompileOptions: {
-          providerImportSource: join(
-            dirname(require.resolve('@storybook/addon-docs/package.json')),
-            '/dist/shims/mdx-react-shim.mjs'
+          providerImportSource: fileURLToPath(
+            import.meta.resolve('@storybook/addon-docs/mdx-react-shim')
           ),
           ...mdxPluginOptions?.mdxCompileOptions,
           rehypePlugins: [

code/addons/docs/src/preset.ts

@@ -1,4 +1,5 @@
 import { dirname, isAbsolute, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
 
 import { logger } from 'storybook/internal/node-logger';
 import type { DocsOptions, Options, PresetProperty } from 'storybook/internal/types';
@@ -18,14 +19,16 @@ const getResolvedReact = async (options: Options) => {
   const resolvedReact = (await options.presets.apply('resolvedReact', {})) as any;
   // resolvedReact should always be set by the time we get here, but just in case, we'll default to addon-docs's react dependencies
   return {
-    react: resolvedReact.react ?? dirname(require.resolve('react/package.json')),
-    reactDom: resolvedReact.reactDom ?? dirname(require.resolve('react-dom/package.json')),
+    react: resolvedReact.react ?? dirname(fileURLToPath(import.meta.resolve('react/package.json'))),
+    reactDom:
+      resolvedReact.reactDom ??
+      dirname(fileURLToPath(import.meta.resolve('react-dom/package.json'))),
     // In Webpack, symlinked MDX files will cause @mdx-js/react to not be resolvable if it is not hoisted
     // This happens for the SB monorepo's template stories when a sandbox has a different react version than
     // addon-docs, causing addon-docs's dependencies not to be hoisted.
     // This might also affect regular users who have a similar setup.
     // Explicitly alias @mdx-js/react to avoid this issue.
-    mdx: resolvedReact.mdx ?? dirname(require.resolve('@mdx-js/react')),
+    mdx: resolvedReact.mdx ?? fileURLToPath(import.meta.resolve('@mdx-js/react')),
   };
 };
 
@@ -45,9 +48,8 @@ async function webpack(
   const mdxLoaderOptions: CompileOptions = await options.presets.apply('mdxLoaderOptions', {
     ...mdxPluginOptions,
     mdxCompileOptions: {
-      providerImportSource: join(
-        dirname(require.resolve('@storybook/addon-docs/package.json')),
-        '/dist/shims/mdx-react-shim.mjs'
+      providerImportSource: fileURLToPath(
+        import.meta.resolve('@storybook/addon-docs/mdx-react-shim')
       ),
       ...mdxPluginOptions.mdxCompileOptions,
       rehypePlugins: [
@@ -73,12 +75,12 @@ async function webpack(
    * In the future the `@storybook/theming` and `@storybook/components` can be removed, as they
    * should be singletons in the future due to the peerDependency on `storybook` package.
    */
-  const cliPath = dirname(require.resolve('storybook/package.json'));
+  const cliPath = dirname(fileURLToPath(import.meta.resolve('storybook/package.json')));
   const themingPath = join(cliPath, 'core', 'theming', 'index.js');
   const themingCreatePath = join(cliPath, 'core', 'theming', 'create.js');
 
   const componentsPath = join(cliPath, 'core', 'components', 'index.js');
-  const blocksPath = dirname(require.resolve('@storybook/blocks/package.json'));
+  const blocksPath = fileURLToPath(import.meta.resolve('@storybook/blocks'));
   if (Array.isArray(webpackConfig.resolve?.alias)) {
     alias = [...webpackConfig.resolve?.alias];
     alias.push(
@@ -147,7 +149,7 @@ async function webpack(
           exclude: /(stories|story)\.mdx$/,
           use: [
             {
-              loader: require.resolve('./mdx-loader'),
+              loader: fileURLToPath(import.meta.resolve('@storybook/addon-docs/mdx-loader')),
               options: mdxLoaderOptions,
             },
           ],
@@ -168,7 +170,7 @@ const docs = (docsOptions: DocsOptions) => {
 };
 
 export const addons: PresetProperty<'addons'> = [
-  require.resolve('@storybook/react-dom-shim/dist/preset'),
+  fileURLToPath(import.meta.resolve('@storybook/react-dom-shim/preset')),
 ];
 
 export const viteFinal = async (config: any, options: Options) => {
@@ -178,11 +180,11 @@ export const viteFinal = async (config: any, options: Options) => {
   // Use the resolvedReact preset to alias react and react-dom to either the users version or the version shipped with addon-docs
   const { react, reactDom, mdx } = await getResolvedReact(options);
 
-  const cliPath = dirname(require.resolve('storybook/package.json'));
+  const cliPath = dirname(fileURLToPath(import.meta.resolve('storybook/package.json')));
   const themingPath = join(cliPath, 'core', 'theming', 'index.js');
   const themingCreatePath = join(cliPath, 'core', 'theming', 'create.js');
   const componentsPath = join(cliPath, 'core', 'components', 'index.js');
-  const blocksPath = dirname(require.resolve('@storybook/blocks/package.json'));
+  const blocksPath = dirname(fileURLToPath(import.meta.resolve('@storybook/blocks/package.json')));
 
   const packageDeduplicationPlugin = {
     name: 'storybook:package-deduplication',
@@ -236,16 +238,17 @@ const docsX = docs as any;
  * is always a resolved react.
  */
 export const resolvedReact = async (existing: any) => ({
-  react: existing?.react ?? dirname(require.resolve('react/package.json')),
-  reactDom: existing?.reactDom ?? dirname(require.resolve('react-dom/package.json')),
-  mdx: existing?.mdx ?? dirname(require.resolve('@mdx-js/react')),
+  react: existing?.react ?? dirname(fileURLToPath(import.meta.resolve('react/package.json'))),
+  reactDom:
+    existing?.reactDom ?? dirname(fileURLToPath(import.meta.resolve('react-dom/package.json'))),
+  mdx: existing?.mdx ?? fileURLToPath(import.meta.resolve('@mdx-js/react')),
 });
 
 const optimizeViteDeps = [
   '@mdx-js/react',
   '@storybook/addon-docs > acorn-jsx',
   '@storybook/addon-docs',
-  '@storybook/addon-essentials/docs/mdx-react-shim',
+  '@storybook/addon-docs/mdx-react-shim',
   'markdown-to-jsx',
 ];