Use esbuild plugin to externalize preview imports

code/lib/builder-vite/input/iframe.html

@@ -26,9 +26,9 @@
     <div id="storybook-root"></div>
     <div id="storybook-docs"></div>
     <script type="module">
-      /* eslint-disable import/no-absolute-path, import/extensions */
+      /* eslint-disable import/no-absolute-path, import/extensions, import/no-unresolved */
       
-      // import 'sb-preview/index.mjs';
+      import '/sb-preview/index.mjs';
       import '/virtual:/@storybook/builder-vite/vite-app.js';
     </script>
   </body>

code/lib/builder-vite/package.json

@@ -41,6 +41,7 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
+    "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
     "@joshwooding/vite-plugin-react-docgen-typescript": "0.0.5",
     "@storybook/client-api": "7.0.0-alpha.52",
     "@storybook/client-logger": "7.0.0-alpha.52",

code/lib/builder-vite/src/optimizeDeps.ts

@@ -1,6 +1,8 @@
 import * as path from 'path';
 import { normalizePath, resolveConfig } from 'vite';
-import type { InlineConfig as ViteInlineConfig } from 'vite';
+import type { InlineConfig as ViteInlineConfig, UserConfig } from 'vite';
+import { globalExternals } from '@fal-works/esbuild-plugin-global-externals';
+import { definitions } from '@storybook/preview/definitions';
 import { listStories } from './list-stories';
 
 import type { ExtendedOptions } from './types';
@@ -113,14 +115,16 @@ export async function getOptimizeDeps(config: ViteInlineConfig, options: Extende
   const resolve = resolvedConfig.createResolver({ asSrc: false });
   const include = await asyncFilter(INCLUDE_CANDIDATES, async (id) => Boolean(await resolve(id)));
 
-  return {
+  const optimizeDeps: UserConfig['optimizeDeps'] = {
     // We don't need to resolve the glob since vite supports globs for entries.
     entries: stories,
-
-    // exclude: ['sb-preview/index.mjs'],
-
     // We need Vite to precompile these dependencies, because they contain non-ESM code that would break
     // if we served it directly to the browser.
     include,
+    esbuildOptions: {
+      plugins: [globalExternals(definitions)],
+    },
   };
+
+  return optimizeDeps;
 }

code/lib/builder-vite/src/plugins/code-generator-plugin.ts

@@ -101,6 +101,9 @@ export function codeGeneratorPlugin(options: ExtendedOptions): Plugin {
       if (source === virtualAddonSetupFile) {
         return virtualAddonSetupFile;
       }
+      if (source === '/sb-preview/index.mjs') {
+        return '/sb-preview/index.mjs';
+      }
 
       return undefined;
     },
@@ -128,6 +131,11 @@ export function codeGeneratorPlugin(options: ExtendedOptions): Plugin {
         return generateIframeScriptCode(options);
       }
 
+      // This is handled by the express router, not vite
+      if (id === '/sb-preview/index.mjs') {
+        return '';
+      }
+
       if (id === iframeId) {
         return fs.readFileSync(
           require.resolve('@storybook/builder-vite/input/iframe.html'),

code/lib/builder-vite/src/vite-config.ts

@@ -56,28 +56,6 @@ export async function commonConfig(
       preserveSymlinks: isPreservingSymlinks(),
       alias: {
         assert: require.resolve('browser-assert'),
-        ...[
-          // these packages are pre-bundled, so they are mapped to global shims
-          'channels',
-          'channel-postmessage',
-          'channel-websocket',
-          'core-events',
-          'client-logger',
-          'addons',
-          'store',
-          'preview-web',
-          'client-api',
-          'core-client',
-        ].reduce(
-          (acc, sbPackage) => ({
-            ...acc,
-            [`@storybook/${sbPackage}`]: join(
-              dirname(require.resolve(`@storybook/preview/package.json`)),
-              `dist/global/${sbPackage}.mjs`
-            ),
-          }),
-          {}
-        ),
       },
     },
     // If an envPrefix is specified in the vite config, add STORYBOOK_ to it,

code/yarn.lock

@@ -5888,6 +5888,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/builder-vite@workspace:lib/builder-vite"
   dependencies:
+    "@fal-works/esbuild-plugin-global-externals": ^2.1.2
     "@joshwooding/vite-plugin-react-docgen-typescript": 0.0.5
     "@storybook/client-api": 7.0.0-alpha.52
     "@storybook/client-logger": 7.0.0-alpha.52
@@ -7149,7 +7150,7 @@ __metadata:
     "@types/webpack-env": ^1.16.4
     ansi-to-html: ^0.6.11
     dequal: ^2.0.2
-    fs-extra: ^10.1.0
+    fs-extra: ^9.0.1
     global: ^4.4.0
     lodash: ^4.17.21
     memoizerific: ^1.11.3