Fix: vite dev and yarn pnp + vite by unreverting and adding lodash files to optimizeDeps.include

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-vite/src/optimizeDeps.ts

@@ -42,17 +42,44 @@ const INCLUDE_CANDIDATES = [
   'isobject',
   'jest-mock',
   'loader-utils',
+  'lodash/camelCase.js',
+  'lodash/camelCase',
+  'lodash/cloneDeep.js',
   'lodash/cloneDeep',
+  'lodash/countBy.js',
+  'lodash/countBy',
+  'lodash/debounce.js',
+  'lodash/debounce',
+  'lodash/isEqual.js',
+  'lodash/isEqual',
+  'lodash/isFunction.js',
   'lodash/isFunction',
+  'lodash/isPlainObject.js',
   'lodash/isPlainObject',
+  'lodash/isString.js',
   'lodash/isString',
+  'lodash/kebabCase.js',
+  'lodash/kebabCase',
+  'lodash/mapKeys.js',
   'lodash/mapKeys',
+  'lodash/mapValues.js',
   'lodash/mapValues',
+  'lodash/merge.js',
+  'lodash/merge',
+  'lodash/mergeWith.js',
+  'lodash/mergeWith',
+  'lodash/pick.js',
   'lodash/pick',
+  'lodash/pickBy.js',
   'lodash/pickBy',
+  'lodash/startCase.js',
   'lodash/startCase',
+  'lodash/throttle.js',
   'lodash/throttle',
+  'lodash/uniq.js',
   'lodash/uniq',
+  'lodash/upperFirst.js',
+  'lodash/upperFirst',
   'markdown-to-jsx',
   'memoizerific',
   'overlayscrollbars',