Merge pull request #21545 from storybookjs/valentin/fix-vite-sandbox-…

…development-on-windows Vite: Fix react-vite and projects with absolute path preview entries on Windows
storybookjs · Mar 15, 2023 · b5c3281 · b5c3281
2 parents 251e4ce + 267df02
commit b5c3281
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 5 deletions.
diff --git a/code/lib/builder-vite/src/utils/process-preview-annotation.ts b/code/lib/builder-vite/src/utils/process-preview-annotation.ts
@@ -1,7 +1,7 @@
 import type { PreviewAnnotation } from '@storybook/types';
 import { resolve, isAbsolute, relative } from 'path';
 import slash from 'slash';
-import { transformAbsPath } from './transform-abs-path';
+import { stripAbsNodeModulesPath } from '@storybook/core-common';
 
 /**
  * Preview annotations can take several forms, and vite needs them to be
@@ -29,8 +29,9 @@ export function processPreviewAnnotation(path: PreviewAnnotation | undefined, pr
 
   // For addon dependencies that use require.resolve(), we need to convert to a bare path
   // so that vite will process it as a dependency (cjs -> esm, etc).
+  // TODO: Evaluate if searching for node_modules in a yarn pnp environment is correct
   if (path.includes('node_modules')) {
-    return transformAbsPath(path);
+    return stripAbsNodeModulesPath(path);
   }
 
   // resolve absolute paths relative to project root

diff --git a/code/lib/core-common/src/index.ts b/code/lib/core-common/src/index.ts
@@ -31,5 +31,6 @@ export * from './utils/template';
 export * from './utils/validate-config';
 export * from './utils/validate-configuration-files';
 export * from './utils/satisfies';
+export * from './utils/strip-abs-node-modules-path';
 
 export { createFileSystemCache } from './utils/file-cache';
diff --git a/code/lib/core-common/src/presets.ts b/code/lib/core-common/src/presets.ts
@@ -14,6 +14,7 @@ import { join, parse } from 'path';
 import { loadCustomPresets } from './utils/load-custom-presets';
 import { safeResolve, safeResolveFrom } from './utils/safeResolve';
 import { interopRequireDefault } from './utils/interpret-require';
+import { stripAbsNodeModulesPath } from './utils/strip-abs-node-modules-path';
 
 const isObject = (val: unknown): val is Record<string, any> =>
   val != null && typeof val === 'object' && Array.isArray(val) === false;
@@ -149,7 +150,13 @@ export const resolveAddonName = (
         ? {
             previewAnnotations: [
               previewFileAbsolute
-                ? { bare: previewFile, absolute: previewFileAbsolute }
+                ? {
+                    // TODO: Evaluate if searching for node_modules in a yarn pnp environment is correct
+                    bare: previewFile.includes('node_modules')
+                      ? stripAbsNodeModulesPath(previewFile)
+                      : previewFile,
+                    absolute: previewFileAbsolute,
+                  }
                 : previewFile,
             ],
           }

diff --git a/...lder-vite/src/utils/transform-abs-path.ts → .../src/utils/strip-abs-node-modules-path.ts b/...lder-vite/src/utils/transform-abs-path.ts → .../src/utils/strip-abs-node-modules-path.ts
@@ -1,9 +1,14 @@
 import path from 'path';
-import { normalizePath } from 'vite';
+import slash from 'slash';
+
+function normalizePath(id: string) {
+  return path.posix.normalize(slash(id));
+}
 
 // We need to convert from an absolute path, to a traditional node module import path,
 // so that vite can correctly pre-bundle/optimize
-export function transformAbsPath(absPath: string) {
+export function stripAbsNodeModulesPath(absPath: string) {
+  // TODO: Evaluate if searching for node_modules in a yarn pnp environment is correct
   const splits = absPath.split(`node_modules${path.sep}`);
   // Return everything after the final "node_modules/"
   const module = normalizePath(splits[splits.length - 1]);