Use dynamic import of slash

Author: IanVS

code/builders/builder-vite/src/codegen-entries.ts

@@ -1,6 +1,5 @@
 import { loadPreviewOrConfigFile } from '@storybook/core-common';
 import type { Options } from '@storybook/types';
-import slash from 'slash';
 import { listStories } from './list-stories';
 
 const absoluteFilesToImport = async (
@@ -14,6 +13,7 @@ const absoluteFilesToImport = async (
 
 export async function generateVirtualStoryEntryCode(options: Options) {
   const { normalizePath } = await import('vite');
+  const slash = await import('slash');
   const storyEntries = await listStories(options);
   const resolveMap = storyEntries.reduce<Record<string, string>>(
     (prev, entry) => ({ ...prev, [entry]: entry.replace(slash(process.cwd()), '.') }),

code/builders/builder-vite/src/codegen-iframe-script.ts

@@ -12,9 +12,11 @@ export async function generateIframeScriptCode(options: Options, projectRoot: st
     [],
     options
   );
-  const configEntries = [...previewAnnotations]
-    .filter(Boolean)
-    .map((path) => processPreviewAnnotation(path, projectRoot));
+  const configEntries = await Promise.all(
+    [...previewAnnotations]
+      .filter(Boolean)
+      .map((path) => processPreviewAnnotation(path, projectRoot))
+  );
 
   const filesToImport = (files: string[], name: string) =>
     files.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'${el}'`).join('\n');

code/builders/builder-vite/src/codegen-modern-iframe-script.ts

@@ -13,9 +13,11 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
     [],
     options
   );
-  const previewAnnotationURLs = [...previewAnnotations, previewOrConfigFile]
-    .filter(Boolean)
-    .map((path) => processPreviewAnnotation(path, projectRoot));
+  const previewAnnotationURLs = await Promise.all(
+    [...previewAnnotations, previewOrConfigFile]
+      .filter(Boolean)
+      .map((path) => processPreviewAnnotation(path, projectRoot))
+  );
 
   // This is pulled out to a variable because it is reused in both the initial page load
   // and the HMR handler.  We don't use the hot.accept callback params because only the changed

code/builders/builder-vite/src/list-stories.ts

@@ -1,12 +1,12 @@
 import * as path from 'path';
-import slash from 'slash';
 import { glob } from 'glob';
 import { normalizeStories, commonGlobOptions } from '@storybook/core-common';
 
 import type { Options } from '@storybook/types';
 
 export async function listStories(options: Options) {
   const { normalizePath } = await import('vite');
+  const slash = await import('slash');
 
   return (
     await Promise.all(

code/builders/builder-vite/src/utils/process-preview-annotation.ts

@@ -1,6 +1,5 @@
 import type { PreviewAnnotation } from '@storybook/types';
 import { resolve, isAbsolute, relative } from 'path';
-import slash from 'slash';
 import { stripAbsNodeModulesPath } from '@storybook/core-common';
 
 /**
@@ -10,7 +9,12 @@ import { stripAbsNodeModulesPath } from '@storybook/core-common';
  * For node_modules, we want bare imports (so vite can process them),
  * and for files in the user's source, we want URLs absolute relative to project root.
  */
-export function processPreviewAnnotation(path: PreviewAnnotation | undefined, projectRoot: string) {
+export async function processPreviewAnnotation(
+  path: PreviewAnnotation | undefined,
+  projectRoot: string
+) {
+  const slash = await import('slash');
+
   // If entry is an object, take the first, which is the
   // bare (non-absolute) specifier.
   // This is so that webpack can use an absolute path, and