Core: Fix builders/renderer PnP support

code/frameworks/angular/src/preset.ts

@@ -1,7 +1,9 @@
-import path from 'path';
+import { dirname, join } from 'path';
 import { PresetProperty } from '@storybook/types';
 import { StorybookConfig } from './types';
 
+const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
+
 export const addons: PresetProperty<'addons', StorybookConfig> = [
   require.resolve('./server/framework-preset-angular-cli'),
   require.resolve('./server/framework-preset-angular-ivy'),
@@ -19,9 +21,7 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
   return {
     ...config,
     builder: {
-      name: path.dirname(
-        require.resolve(path.join('@storybook/builder-webpack5', 'package.json'))
-      ) as '@storybook/builder-webpack5',
+      name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5',
       options: typeof framework === 'string' ? {} : framework.options.builder || {},
     },
   };

code/frameworks/ember/src/preset.ts

@@ -1,7 +1,9 @@
-import path from 'path';
+import { dirname, join } from 'path';
 import type { PresetProperty } from '@storybook/types';
 import type { StorybookConfig } from './types';
 
+const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
+
 export const addons: PresetProperty<'addons', StorybookConfig> = [
   require.resolve('./server/framework-preset-babel-ember'),
   require.resolve('./server/framework-preset-ember-docs'),
@@ -13,9 +15,7 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
   return {
     ...config,
     builder: {
-      name: path.dirname(
-        require.resolve(path.join('@storybook/builder-webpack5', 'package.json'))
-      ) as '@storybook/builder-webpack5',
+      name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5',
       options: typeof framework === 'string' ? {} : framework.options.builder || {},
     },
   };

code/frameworks/html-webpack5/src/preset.ts

@@ -1,9 +1,11 @@
-import path from 'path';
+import { dirname, join } from 'path';
 import type { PresetProperty } from '@storybook/types';
 import type { StorybookConfig } from './types';
 
+const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
+
 export const addons: PresetProperty<'addons', StorybookConfig> = [
-  path.dirname(require.resolve(path.join('@storybook/preset-html-webpack', 'package.json'))),
+  wrapForPnP('@storybook/preset-html-webpack'),
 ];
 
 export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
@@ -12,11 +14,9 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
   return {
     ...config,
     builder: {
-      name: path.dirname(
-        require.resolve(path.join('@storybook/builder-webpack5', 'package.json'))
-      ) as '@storybook/builder-webpack5',
+      name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5',
       options: typeof framework === 'string' ? {} : framework.options.builder || {},
     },
-    renderer: path.dirname(require.resolve(path.join('@storybook/html', 'package.json'))),
+    renderer: wrapForPnP('@storybook/html'),
   };
 };

code/frameworks/preact-webpack5/src/preset.ts

@@ -1,9 +1,11 @@
-import path from 'path';
+import { dirname, join } from 'path';
 import type { PresetProperty } from '@storybook/types';
 import type { StorybookConfig } from './types';
 
+const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
+
 export const addons: PresetProperty<'addons', StorybookConfig> = [
-  path.dirname(require.resolve(path.join('@storybook/preset-preact-webpack', 'package.json'))),
+  wrapForPnP('@storybook/preset-preact-webpack'),
 ];
 
 export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
@@ -12,11 +14,9 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
   return {
     ...config,
     builder: {
-      name: path.dirname(
-        require.resolve(path.join('@storybook/builder-webpack5', 'package.json'))
-      ) as '@storybook/builder-webpack5',
+      name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5',
       options: typeof framework === 'string' ? {} : framework.options.builder || {},
     },
-    renderer: path.dirname(require.resolve(path.join('@storybook/preact', 'package.json'))),
+    renderer: wrapForPnP('@storybook/preact'),
   };
 };

code/frameworks/react-vite/src/preset.ts

@@ -1,11 +1,14 @@
 /* eslint-disable global-require */
 import type { PresetProperty } from '@storybook/types';
 import { hasVitePlugins } from '@storybook/builder-vite';
+import { dirname, join } from 'path';
 import type { StorybookConfig } from './types';
 
+const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
+
 export const core: PresetProperty<'core', StorybookConfig> = {
-  builder: '@storybook/builder-vite',
-  renderer: '@storybook/react',
+  builder: wrapForPnP('@storybook/builder-vite') as '@storybook/builder-vite',
+  renderer: wrapForPnP('@storybook/react'),
 };
 
 export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => {

code/frameworks/react-webpack5/src/preset.ts

@@ -1,11 +1,13 @@
 /* eslint-disable no-param-reassign */
 
-import path from 'path';
+import { dirname, join } from 'path';
 import type { PresetProperty, Options } from '@storybook/types';
 import type { FrameworkOptions, StorybookConfig } from './types';
 
+const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
+
 export const addons: PresetProperty<'addons', StorybookConfig> = [
-  path.dirname(require.resolve(path.join('@storybook/preset-react-webpack', 'package.json'))),
+  wrapForPnP('@storybook/preset-react-webpack'),
 ];
 
 const defaultFrameworkOptions: FrameworkOptions = {
@@ -26,7 +28,7 @@ export const frameworkOptions = async (
   }
   if (typeof config === 'undefined') {
     return {
-      name: require.resolve('@storybook/react-webpack5') as '@storybook/react-webpack5',
+      name: wrapForPnP('@storybook/react-webpack5') as '@storybook/react-webpack5',
       options: defaultFrameworkOptions,
     };
   }
@@ -46,12 +48,10 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
   return {
     ...config,
     builder: {
-      name: path.dirname(
-        require.resolve(path.join('@storybook/builder-webpack5', 'package.json'))
-      ) as '@storybook/builder-webpack5',
+      name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5',
       options: typeof framework === 'string' ? {} : framework.options.builder || {},
     },
-    renderer: path.dirname(require.resolve(path.join('@storybook/react', 'package.json'))),
+    renderer: wrapForPnP('@storybook/react'),
   };
 };
 
@@ -60,9 +60,7 @@ export const webpack: StorybookConfig['webpack'] = async (config) => {
 
   config.resolve.alias = {
     ...config.resolve?.alias,
-    '@storybook/react': path.dirname(
-      require.resolve(path.join('@storybook/react', 'package.json'))
-    ),
+    '@storybook/react': wrapForPnP('@storybook/react'),
   };
   return config;
 };

code/frameworks/server-webpack5/src/preset.ts

@@ -1,9 +1,11 @@
-import path from 'path';
+import { dirname, join } from 'path';
 import type { PresetProperty } from '@storybook/types';
 import type { StorybookConfig } from './types';
 
+const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
+
 export const addons: PresetProperty<'addons', StorybookConfig> = [
-  path.dirname(require.resolve(path.join('@storybook/preset-server-webpack', 'package.json'))),
+  wrapForPnP('@storybook/preset-server-webpack'),
 ];
 
 export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
@@ -12,11 +14,9 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
   return {
     ...config,
     builder: {
-      name: path.dirname(
-        require.resolve(path.join('@storybook/builder-webpack5', 'package.json'))
-      ) as '@storybook/builder-webpack5',
+      name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5',
       options: typeof framework === 'string' ? {} : framework.options.builder || {},
     },
-    renderer: path.dirname(require.resolve(path.join('@storybook/server', 'package.json'))),
+    renderer: wrapForPnP('@storybook/server'),
   };
 };

code/frameworks/svelte-webpack5/src/preset.ts

@@ -1,9 +1,11 @@
-import path from 'path';
+import { dirname, join } from 'path';
 import type { PresetProperty } from '@storybook/types';
 import type { StorybookConfig } from './types';
 
+const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
+
 export const addons: PresetProperty<'addons', StorybookConfig> = [
-  path.dirname(require.resolve(path.join('@storybook/preset-svelte-webpack', 'package.json'))),
+  wrapForPnP('@storybook/preset-svelte-webpack'),
 ];
 
 export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
@@ -12,11 +14,9 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
   return {
     ...config,
     builder: {
-      name: path.dirname(
-        require.resolve(path.join('@storybook/builder-webpack5', 'package.json'))
-      ) as '@storybook/builder-webpack5',
+      name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5',
       options: typeof framework === 'string' ? {} : framework.options.builder || {},
     },
-    renderer: path.dirname(require.resolve(path.join('@storybook/svelte', 'package.json'))),
+    renderer: wrapForPnP('@storybook/svelte'),
   };
 };

code/frameworks/vue-webpack5/src/preset.ts

@@ -1,9 +1,11 @@
-import path from 'path';
+import { dirname, join } from 'path';
 import type { PresetProperty } from '@storybook/types';
 import type { StorybookConfig } from './types';
 
+const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
+
 export const addons: PresetProperty<'addons', StorybookConfig> = [
-  path.dirname(require.resolve(path.join('@storybook/preset-vue-webpack', 'package.json'))),
+  wrapForPnP('@storybook/preset-vue-webpack'),
 ];
 
 export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
@@ -12,12 +14,10 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
   return {
     ...config,
     builder: {
-      name: path.dirname(
-        require.resolve(path.join('@storybook/builder-webpack5', 'package.json'))
-      ) as '@storybook/builder-webpack5',
+      name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5',
       options: typeof framework === 'string' ? {} : framework.options.builder || {},
     },
-    renderer: path.dirname(require.resolve(path.join('@storybook/vue', 'package.json'))),
+    renderer: wrapForPnP('@storybook/vue'),
   };
 };
 

code/frameworks/vue3-webpack5/src/preset.ts

@@ -1,9 +1,11 @@
-import path from 'path';
+import { dirname, join } from 'path';
 import type { PresetProperty } from '@storybook/types';
 import type { StorybookConfig } from './types';
 
+const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
+
 export const addons: PresetProperty<'addons', StorybookConfig> = [
-  path.dirname(require.resolve(path.join('@storybook/preset-vue3-webpack', 'package.json'))),
+  wrapForPnP('@storybook/preset-vue3-webpack'),
 ];
 
 export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
@@ -12,12 +14,10 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
   return {
     ...config,
     builder: {
-      name: path.dirname(
-        require.resolve(path.join('@storybook/builder-webpack5', 'package.json'))
-      ) as '@storybook/builder-webpack5',
+      name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5',
       options: typeof framework === 'string' ? {} : framework.options.builder || {},
     },
-    renderer: path.dirname(require.resolve(path.join('@storybook/vue3', 'package.json'))),
+    renderer: wrapForPnP('@storybook/vue3'),
   };
 };
 

code/frameworks/web-components-webpack5/src/preset.ts

@@ -1,11 +1,11 @@
-import path from 'path';
+import { dirname, join } from 'path';
 import type { PresetProperty } from '@storybook/types';
 import type { StorybookConfig } from './types';
 
+const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
+
 export const addons: PresetProperty<'addons', StorybookConfig> = [
-  path.dirname(
-    require.resolve(path.join('@storybook/preset-web-components-webpack', 'package.json'))
-  ),
+  wrapForPnP('@storybook/preset-web-components-webpack'),
 ];
 
 export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
@@ -14,11 +14,9 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
   return {
     ...config,
     builder: {
-      name: path.dirname(
-        require.resolve(path.join('@storybook/builder-webpack5', 'package.json'))
-      ) as '@storybook/builder-webpack5',
+      name: wrapForPnP('@storybook/builder-webpack5') as '@storybook/builder-webpack5',
       options: typeof framework === 'string' ? {} : framework.options.builder || {},
     },
-    renderer: path.dirname(require.resolve(path.join('@storybook/web-components', 'package.json'))),
+    renderer: wrapForPnP('@storybook/web-components'),
   };
 };

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

@@ -25,6 +25,8 @@ export * from './types';
  */
 export type StorybookViteConfig = StorybookBaseConfig & StorybookConfigVite;
 
+const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
+
 function iframeMiddleware(options: Options, server: ViteDevServer): RequestHandler {
   return async (req, res, next) => {
     if (!req.url.match(/^\/iframe\.html($|\?)/)) {
@@ -64,7 +66,7 @@ export const start: ViteBuilder['start'] = async ({
 }) => {
   server = await createViteServer(options as Options, devServer);
 
-  const previewResolvedDir = dirname(require.resolve('@storybook/preview/package.json'));
+  const previewResolvedDir = wrapForPnP('@storybook/preview');
   const previewDirOrigin = join(previewResolvedDir, 'dist');
 
   router.use(`/sb-preview`, express.static(previewDirOrigin, { immutable: true, maxAge: '5m' }));
@@ -82,7 +84,7 @@ export const start: ViteBuilder['start'] = async ({
 export const build: ViteBuilder['build'] = async ({ options }) => {
   const viteCompilation = viteBuild(options as Options);
 
-  const previewResolvedDir = dirname(require.resolve('@storybook/preview/package.json'));
+  const previewResolvedDir = wrapForPnP('@storybook/preview');
   const previewDirOrigin = join(previewResolvedDir, 'dist');
   const previewDirTarget = join(options.outputDir || '', `sb-preview`);
 

code/lib/builder-webpack5/src/index.ts

@@ -20,6 +20,8 @@ export const printDuration = (startTime: [number, number]) =>
     .replace(' s', ' seconds')
     .replace(' m', ' minutes');
 
+const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
+
 let compilation: ReturnType<typeof webpackDevMiddleware> | undefined;
 let reject: (reason?: any) => void;
 
@@ -173,7 +175,7 @@ const starter: StarterFunction = async function* starterGeneratorFn({
 
   compilation = webpackDevMiddleware(compiler, middlewareOptions);
 
-  const previewResolvedDir = dirname(require.resolve('@storybook/preview/package.json'));
+  const previewResolvedDir = wrapForPnP('@storybook/preview');
   const previewDirOrigin = join(previewResolvedDir, 'dist');
 
   router.use(`/sb-preview`, express.static(previewDirOrigin, { immutable: true, maxAge: '5m' }));
@@ -286,7 +288,7 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
     });
   });
 
-  const previewResolvedDir = dirname(require.resolve('@storybook/preview/package.json'));
+  const previewResolvedDir = wrapForPnP('@storybook/preview');
   const previewDirOrigin = join(previewResolvedDir, 'dist');
   const previewDirTarget = join(options.outputDir || '', `sb-preview`);
 

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

@@ -27,8 +27,10 @@ import { dedent } from 'ts-dedent';
 import type { BuilderOptions, TypescriptOptions } from '../types';
 import { createBabelLoader } from './babel-loader-preview';
 
+const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
+
 const storybookPaths: Record<string, string> = {
-  global: dirname(require.resolve('@storybook/global/package.json')),
+  global: wrapForPnP('@storybook/global'),
   ...[
     // these packages are not pre-bundled because of react dependencies
     'api',
@@ -40,12 +42,12 @@ const storybookPaths: Record<string, string> = {
   ].reduce(
     (acc, sbPackage) => ({
       ...acc,
-      [`@storybook/${sbPackage}`]: dirname(require.resolve(`@storybook/${sbPackage}/package.json`)),
+      [`@storybook/${sbPackage}`]: wrapForPnP(`@storybook/${sbPackage}`),
     }),
     {}
   ),
   // deprecated, remove in 8.0
-  [`@storybook/api`]: dirname(require.resolve(`@storybook/manager-api/package.json`)),
+  [`@storybook/api`]: wrapForPnP(`@storybook/manager-api`),
 };
 
 export default async (