Merge pull request #30206 from storybookjs/jeppe/fix-projectroot

Vite: Fix wrong import paths when configDir is not in project root

code/builders/builder-vite/src/codegen-importfn-script.test.ts

@@ -1,13 +1,14 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 
 import { toImportFn } from './codegen-importfn-script';
 
 describe('toImportFn', () => {
   it('should correctly map story paths to import functions for absolute paths on Linux', async () => {
-    const root = '/absolute/path';
+    vi.spyOn(process, 'cwd').mockReturnValue('/absolute/path');
+
     const stories = ['/absolute/path/to/story1.js', '/absolute/path/to/story2.js'];
 
-    const result = await toImportFn(root, stories);
+    const result = await toImportFn(stories);
 
     expect(result).toMatchInlineSnapshot(`
       "const importers = {
@@ -22,10 +23,10 @@ describe('toImportFn', () => {
   });
 
   it('should correctly map story paths to import functions for absolute paths on Windows', async () => {
-    const root = 'C:\\absolute\\path';
+    vi.spyOn(process, 'cwd').mockReturnValue('C:\\absolute\\path');
     const stories = ['C:\\absolute\\path\\to\\story1.js', 'C:\\absolute\\path\\to\\story2.js'];
 
-    const result = await toImportFn(root, stories);
+    const result = await toImportFn(stories);
 
     expect(result).toMatchInlineSnapshot(`
       "const importers = {
@@ -43,7 +44,7 @@ describe('toImportFn', () => {
     const root = '/absolute/path';
     const stories: string[] = [];
 
-    const result = await toImportFn(root, stories);
+    const result = await toImportFn(stories);
 
     expect(result).toMatchInlineSnapshot(`
       "const importers = {};

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

@@ -29,9 +29,9 @@ function toImportPath(relativePath: string) {
  *
  * @param stories An array of absolute story paths.
  */
-export async function toImportFn(root: string, stories: string[]) {
+export async function toImportFn(stories: string[]) {
   const objectEntries = stories.map((file) => {
-    const relativePath = relative(root, file);
+    const relativePath = relative(process.cwd(), file);
 
     return [toImportPath(relativePath), genDynamicImport(normalize(file))] as [string, string];
   });
@@ -51,5 +51,5 @@ export async function generateImportFnScriptCode(options: Options): Promise<stri
 
   // We can then call toImportFn to create a function that can be used to load each story dynamically.
   // eslint-disable-next-line @typescript-eslint/return-await
-  return await toImportFn(options.projectRoot || process.cwd(), stories);
+  return await toImportFn(stories);
 }

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

@@ -53,18 +53,18 @@ export async function commonConfig(
 
   const { viteConfigPath } = await getBuilderOptions<BuilderOptions>(options);
 
-  options.projectRoot = options.projectRoot || resolve(options.configDir, '..');
+  const projectRoot = resolve(options.configDir, '..');
 
   // I destructure away the `build` property from the user's config object
   // I do this because I can contain config that breaks storybook, such as we had in a lit project.
   // If the user needs to configure the `build` they need to do so in the viteFinal function in main.js.
   const { config: { build: buildProperty = undefined, ...userConfig } = {} } =
-    (await loadConfigFromFile(configEnv, viteConfigPath, options.projectRoot)) ?? {};
+    (await loadConfigFromFile(configEnv, viteConfigPath, projectRoot)) ?? {};
 
   const sbConfig: InlineConfig = {
     configFile: false,
     cacheDir: resolvePathInStorybookCache('sb-vite', options.cacheKey),
-    root: options.projectRoot,
+    root: projectRoot,
     // Allow storybook deployed as subfolder.  See https://github.com/storybookjs/builder-vite/issues/238
     base: './',
     plugins: await pluginConfig(options),

code/core/src/types/modules/core-common.ts

@@ -195,7 +195,6 @@ export interface BuilderOptions {
   ignorePreview?: boolean;
   cache?: FileSystemCache;
   configDir: string;
-  projectRoot?: string;
   docsMode?: boolean;
   features?: StorybookConfigRaw['features'];
   versionCheck?: VersionCheck;