From 461c33c8924bbdc31f63da04ab8e7cdcdc155ba0 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 8 Mar 2023 18:04:01 +0100
Subject: [PATCH] add wrapForPnP everywhere it needs to happen

---
 code/frameworks/angular/src/preset.ts          |  8 ++++----
 code/frameworks/ember/src/preset.ts            |  8 ++++----
 code/frameworks/html-webpack5/src/preset.ts    | 12 ++++++------
 code/frameworks/preact-webpack5/src/preset.ts  | 12 ++++++------
 code/frameworks/react-vite/src/preset.ts       |  7 +++++--
 code/frameworks/react-webpack5/src/preset.ts   | 18 ++++++++----------
 code/frameworks/server-webpack5/src/preset.ts  | 12 ++++++------
 code/frameworks/svelte-webpack5/src/preset.ts  | 12 ++++++------
 code/frameworks/vue-webpack5/src/preset.ts     | 12 ++++++------
 code/frameworks/vue3-webpack5/src/preset.ts    | 12 ++++++------
 .../web-components-webpack5/src/preset.ts      | 14 ++++++--------
 code/lib/builder-vite/src/index.ts             |  6 ++++--
 code/lib/builder-webpack5/src/index.ts         |  6 ++++--
 .../src/preview/iframe-webpack.config.ts       |  8 +++++---
 code/presets/preact-webpack/src/index.ts       | 14 ++++++++------
 .../src/framework-preset-react.ts              | 12 ++++++------
 16 files changed, 90 insertions(+), 83 deletions(-)

diff --git a/code/frameworks/angular/src/preset.ts b/code/frameworks/angular/src/preset.ts
index 762685d6ac9f..016e104e5a6f 100644
--- a/code/frameworks/angular/src/preset.ts
+++ b/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 || {},
     },
   };
diff --git a/code/frameworks/ember/src/preset.ts b/code/frameworks/ember/src/preset.ts
index 770fd2e7ab83..bedd1cdb3ebd 100644
--- a/code/frameworks/ember/src/preset.ts
+++ b/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 || {},
     },
   };
diff --git a/code/frameworks/html-webpack5/src/preset.ts b/code/frameworks/html-webpack5/src/preset.ts
index 85fac6740037..57093fdba5d3 100644
--- a/code/frameworks/html-webpack5/src/preset.ts
+++ b/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'),
   };
 };
diff --git a/code/frameworks/preact-webpack5/src/preset.ts b/code/frameworks/preact-webpack5/src/preset.ts
index d822a8b3274f..5808ca929166 100644
--- a/code/frameworks/preact-webpack5/src/preset.ts
+++ b/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'),
   };
 };
diff --git a/code/frameworks/react-vite/src/preset.ts b/code/frameworks/react-vite/src/preset.ts
index f76e97567979..26a577af7900 100644
--- a/code/frameworks/react-vite/src/preset.ts
+++ b/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 }) => {
diff --git a/code/frameworks/react-webpack5/src/preset.ts b/code/frameworks/react-webpack5/src/preset.ts
index b2f73f2089fe..b03832ae272f 100644
--- a/code/frameworks/react-webpack5/src/preset.ts
+++ b/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;
 };
diff --git a/code/frameworks/server-webpack5/src/preset.ts b/code/frameworks/server-webpack5/src/preset.ts
index 61f628ee08f9..852c2a9c9409 100644
--- a/code/frameworks/server-webpack5/src/preset.ts
+++ b/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'),
   };
 };
diff --git a/code/frameworks/svelte-webpack5/src/preset.ts b/code/frameworks/svelte-webpack5/src/preset.ts
index 8b55996d6128..7486869f3b61 100644
--- a/code/frameworks/svelte-webpack5/src/preset.ts
+++ b/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'),
   };
 };
diff --git a/code/frameworks/vue-webpack5/src/preset.ts b/code/frameworks/vue-webpack5/src/preset.ts
index 929f2ffba93b..911ea437f8bd 100644
--- a/code/frameworks/vue-webpack5/src/preset.ts
+++ b/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'),
   };
 };
 
diff --git a/code/frameworks/vue3-webpack5/src/preset.ts b/code/frameworks/vue3-webpack5/src/preset.ts
index 2173330e2705..1ace38e86044 100644
--- a/code/frameworks/vue3-webpack5/src/preset.ts
+++ b/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'),
   };
 };
 
diff --git a/code/frameworks/web-components-webpack5/src/preset.ts b/code/frameworks/web-components-webpack5/src/preset.ts
index 338405302815..930e7d3f906b 100644
--- a/code/frameworks/web-components-webpack5/src/preset.ts
+++ b/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'),
   };
 };
diff --git a/code/lib/builder-vite/src/index.ts b/code/lib/builder-vite/src/index.ts
index fe440c01fe8a..36393ec3c190 100644
--- a/code/lib/builder-vite/src/index.ts
+++ b/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`);
 
diff --git a/code/lib/builder-webpack5/src/index.ts b/code/lib/builder-webpack5/src/index.ts
index 869129b41a88..64b136972320 100644
--- a/code/lib/builder-webpack5/src/index.ts
+++ b/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`);
 
diff --git a/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
index be5d603d8212..a8065aa51dce 100644
--- a/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/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 (
diff --git a/code/presets/preact-webpack/src/index.ts b/code/presets/preact-webpack/src/index.ts
index 021a1939efb3..76c50e0affb0 100644
--- a/code/presets/preact-webpack/src/index.ts
+++ b/code/presets/preact-webpack/src/index.ts
@@ -1,9 +1,11 @@
-import path from 'path';
+import { dirname, join } from 'path';
 import type { StorybookConfig } from './types';
 
 export * from './types';
 
-export const babel: StorybookConfig['babelDefault'] = (config, options) => {
+const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
+
+export const babel: StorybookConfig['babelDefault'] = (config) => {
   return {
     ...config,
     plugins: [
@@ -36,10 +38,10 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = (config) => {
       ...config.resolve,
       alias: {
         ...(config.resolve?.alias || {}),
-        react: path.dirname(require.resolve('preact/compat/package.json')),
-        'react-dom/test-utils': path.dirname(require.resolve('preact/test-utils/package.json')),
-        'react-dom': path.dirname(require.resolve('preact/compat/package.json')),
-        'react/jsx-runtime': path.dirname(require.resolve('preact/jsx-runtime/package.json')),
+        react: wrapForPnP('preact/compat'),
+        'react-dom/test-utils': wrapForPnP('preact/test-utils'),
+        'react-dom': wrapForPnP('preact/compat'),
+        'react/jsx-runtime': wrapForPnP('preact/jsx-runtime'),
       },
     },
   };
diff --git a/code/presets/react-webpack/src/framework-preset-react.ts b/code/presets/react-webpack/src/framework-preset-react.ts
index 4a7a32aeb85b..9b0aeaad314d 100644
--- a/code/presets/react-webpack/src/framework-preset-react.ts
+++ b/code/presets/react-webpack/src/framework-preset-react.ts
@@ -1,4 +1,4 @@
-import path from 'path';
+import { dirname, join } from 'path';
 import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 
 import { logger } from '@storybook/node-logger';
@@ -6,6 +6,8 @@ import { logger } from '@storybook/node-logger';
 import type { Options, Preset } from '@storybook/core-webpack';
 import type { StorybookConfig, ReactOptions } from './types';
 
+const wrapForPnP = (input: string) => dirname(require.resolve(join(input, 'package.json')));
+
 const applyFastRefresh = async (options: Options) => {
   const isDevelopment = options.configType === 'DEVELOPMENT';
   const framework = await options.presets.apply<Preset>('framework');
@@ -24,13 +26,11 @@ export const babel: StorybookConfig['babel'] = async (config, options) => {
     ],
   };
 };
-const storybookReactDirName = path.dirname(
-  require.resolve('@storybook/preset-react-webpack/package.json')
-);
+const storybookReactDirName = wrapForPnP('@storybook/preset-react-webpack');
 // TODO: improve node_modules detection
 const context = storybookReactDirName.includes('node_modules')
-  ? path.join(storybookReactDirName, '../../') // Real life case, already in node_modules
-  : path.join(storybookReactDirName, '../../node_modules'); // SB Monorepo
+  ? join(storybookReactDirName, '../../') // Real life case, already in node_modules
+  : join(storybookReactDirName, '../../node_modules'); // SB Monorepo
 
 const hasJsxRuntime = () => {
   try {