Merge pull request #20430 from storybookjs/fix-windows-issue

Fix import paths on Windows

code/lib/builder-manager/src/utils/managerEntries.ts

@@ -1,6 +1,7 @@
-import { join, parse, relative } from 'path';
-import fs from 'fs-extra';
 import findCacheDirectory from 'find-cache-dir';
+import fs from 'fs-extra';
+import { join, parse, relative } from 'node:path';
+import slash from 'slash';
 /**
  * Manager entries should be **self-invoking** bits of code.
  * They can of-course import from modules, and ESbuild will bundle all of that into a single file.
@@ -29,7 +30,7 @@ export async function wrapManagerEntries(entrypoints: string[]) {
 
       const location = join(cacheLocation, relative(process.cwd(), dir), `${name}-bundle.mjs`);
       await fs.ensureFile(location);
-      await fs.writeFile(location, `import '${entry}';`);
+      await fs.writeFile(location, `import '${slash(entry)}';`);
 
       return location;
     })

code/lib/builder-webpack5/package.json

@@ -91,6 +91,7 @@
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
     "semver": "^7.3.7",
+    "slash": "^5.0.0",
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.3.1",
     "ts-dedent": "^2.0.0",

code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts

@@ -7,6 +7,7 @@ import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import TerserWebpackPlugin from 'terser-webpack-plugin';
 import VirtualModulePlugin from 'webpack-virtual-modules';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
+import slash from 'slash';
 
 import type { Options, CoreConfig, DocsOptions, PreviewAnnotation } from '@storybook/types';
 import { globals } from '@storybook/preview/globals';
@@ -108,7 +109,7 @@ export default async (
         if (typeof entry === 'object') {
           return entry.absolute;
         }
-        return entry;
+        return slash(entry);
       }
     ),
     loadPreviewOrConfigFile(options),

code/lib/core-server/src/utils/get-builders.ts

@@ -1,4 +1,5 @@
-import type { Options, CoreConfig, Builder } from '@storybook/types';
+import type { Builder, CoreConfig, Options } from '@storybook/types';
+import { pathToFileURL } from 'node:url';
 
 export async function getManagerBuilder(): Promise<Builder<unknown>> {
   return import('@storybook/builder-manager');
@@ -17,7 +18,7 @@ export async function getPreviewBuilder(
   } else {
     throw new Error('no builder configured!');
   }
-  const previewBuilder = await import(builderPackage);
+  const previewBuilder = await import(pathToFileURL(builderPackage).href);
   return previewBuilder;
 }
 

code/yarn.lock

@@ -6114,6 +6114,7 @@ __metadata:
     pretty-hrtime: ^1.0.3
     process: ^0.11.10
     semver: ^7.3.7
+    slash: ^5.0.0
     style-loader: ^3.3.1
     terser-webpack-plugin: ^5.3.1
     ts-dedent: ^2.0.0