vite-plugin-storybook-nextjs 0.0.3--canary.253ba44.0 → 0.0.4--canary.fb0538a.0

package/dist/index.js

@@ -1,25 +1,27 @@
 import path, { resolve, join } from 'node:path';
-import { getDefineEnv } from 'next/dist/build/webpack/plugins/define-env-plugin';
-import { loadEnvConfig } from '@next/env';
-import Log from 'next/dist/build/output/log';
-import { transform, loadBindings, lockfilePatchPromise } from 'next/dist/build/swc';
-import loadConfig from 'next/dist/server/config';
-import { PHASE_TEST, CONFIG_FILES } from 'next/dist/shared/lib/constants';
-import fs from 'node:fs/promises';
-import { fetchCSSFromGoogleFonts } from 'next/dist/compiled/@next/font/dist/google/fetch-css-from-google-fonts';
-import { getFontAxes } from 'next/dist/compiled/@next/font/dist/google/get-font-axes';
-import { getGoogleFontsUrl } from 'next/dist/compiled/@next/font/dist/google/get-google-fonts-url';
-import { validateGoogleFontFunctionCall } from 'next/dist/compiled/@next/font/dist/google/validate-google-font-function-call';
-import loaderUtils from 'next/dist/compiled/loader-utils3';
-import { validateLocalFontFunctionCall } from 'next/dist/compiled/@next/font/dist/local/validate-local-font-function-call';
-import dedent3, { dedent } from 'ts-dedent';
-import loadJsConfig from 'next/dist/build/load-jsconfig';
-import { findPagesDir } from 'next/dist/lib/find-pages-dir';
-import { getSupportedBrowsers } from 'next/dist/build/utils';
-import { getParserOptions } from 'next/dist/build/swc/options';
-import fs2 from 'node:fs';
+import { createRequire } from 'node:module';
+import { getDefineEnv } from 'next/dist/build/webpack/plugins/define-env-plugin.js';
+import fs3 from 'node:fs';
+import nextEnv from '@next/env';
+import Log from 'next/dist/build/output/log.js';
+import { transform, loadBindings, lockfilePatchPromise } from 'next/dist/build/swc/index.js';
+import { PHASE_DEVELOPMENT_SERVER, PHASE_TEST, PHASE_PRODUCTION_BUILD } from 'next/dist/shared/lib/constants.js';
+import fs2 from 'node:fs/promises';
+import { fetchCSSFromGoogleFonts } from 'next/dist/compiled/@next/font/dist/google/fetch-css-from-google-fonts.js';
+import { getFontAxes } from 'next/dist/compiled/@next/font/dist/google/get-font-axes.js';
+import { getGoogleFontsUrl } from 'next/dist/compiled/@next/font/dist/google/get-google-fonts-url.js';
+import { validateGoogleFontFunctionCall } from 'next/dist/compiled/@next/font/dist/google/validate-google-font-function-call.js';
+import loaderUtils from 'next/dist/compiled/loader-utils3/index.js';
+import { validateLocalFontFunctionCall } from 'next/dist/compiled/@next/font/dist/local/validate-local-font-function-call.js';
+import { dedent } from 'ts-dedent';
+import loadJsConfig from 'next/dist/build/load-jsconfig.js';
+import { findPagesDir } from 'next/dist/lib/find-pages-dir.js';
+import { getSupportedBrowsers } from 'next/dist/build/utils.js';
+import { getParserOptions } from 'next/dist/build/swc/options.js';
+import loadConfig from 'next/dist/server/config.js';
 import { cpus } from 'node:os';
-import { fileURLToPath, URL } from 'node:url';
+import { decode } from 'node:querystring';
+import { fileURLToPath, URL as URL$1 } from 'node:url';
 import imageSizeOf from 'image-size';
 
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
@@ -28,16 +30,9 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
   if (typeof require !== "undefined") return require.apply(this, arguments);
   throw Error('Dynamic require of "' + x + '" is not supported');
 });
+var { loadEnvConfig } = nextEnv;
 var nextDistPath = /(next[\\/]dist[\\/]shared[\\/]lib)|(next[\\/]dist[\\/]client)|(next[\\/]dist[\\/]pages)/;
-async function getConfig(dir) {
-  const conf = await loadConfig(PHASE_TEST, dir);
-  return conf;
-}
-async function getConfigPaths(dir) {
-  return CONFIG_FILES.map((file) => join(dir, file));
-}
-async function loadEnvironmentConfig(dir) {
-  const dev = false;
+async function loadEnvironmentConfig(dir, dev) {
   return loadEnvConfig(dir, dev, Log);
 }
 async function loadSWCBindingsEagerly(nextConfig) {
@@ -49,43 +44,69 @@ async function loadSWCBindingsEagerly(nextConfig) {
 function shouldOutputCommonJs(filename) {
   return filename.endsWith(".cjs") || nextDistPath.test(filename);
 }
+async function loadClosestPackageJson(dir, attempts = 1) {
+  if (attempts > 5) {
+    throw new Error("Can't resolve main package.json file");
+  }
+  const mainPath = attempts === 1 ? ["."] : new Array(attempts).fill("..");
+  try {
+    const file = await fs3.promises.readFile(
+      join(dir, ...mainPath, "package.json"),
+      "utf8"
+    );
+    return JSON.parse(file);
+  } catch (e) {
+    return loadClosestPackageJson(dir, attempts + 1);
+  }
+}
 
 // src/plugins/next-env/plugin.ts
-function vitePluginNextConfig(rootDir) {
-  let nextConfig;
+function vitePluginNextEnv(rootDir, nextConfigResolver) {
   let envConfig;
   let isDev;
   const resolvedDir = resolve(rootDir);
   return {
-    name: "vite-plugin-storybook-nextjs-swc",
+    name: "vite-plugin-storybook-nextjs-env",
+    enforce: "pre",
     async config(config, env) {
-      nextConfig = await getConfig(resolvedDir);
-      envConfig = (await loadEnvironmentConfig(resolvedDir)).combinedEnv;
-      isDev = env.mode === "development";
+      isDev = env.mode !== "production";
+      envConfig = (await loadEnvironmentConfig(resolvedDir, isDev)).combinedEnv;
+      const nextConfig = await nextConfigResolver.promise;
       const publicNextEnvMap = Object.fromEntries(
         Object.entries(envConfig).filter(([key]) => key.startsWith("NEXT_PUBLIC_")).map(([key, value]) => {
           return [`process.env.${key}`, JSON.stringify(value)];
         })
       );
+      const finalConfig = {
+        ...config.define,
+        ...publicNextEnvMap,
+        ...getDefineEnv({
+          isTurbopack: false,
+          config: nextConfig,
+          isClient: true,
+          isEdgeServer: false,
+          isNodeOrEdgeCompilation: false,
+          isNodeServer: false,
+          clientRouterFilters: void 0,
+          dev: isDev,
+          middlewareMatchers: void 0,
+          hasRewrites: false,
+          distDir: nextConfig.distDir,
+          fetchCacheKeyPrefix: nextConfig?.experimental?.fetchCacheKeyPrefix
+        })
+      };
+      delete process.env.__NEXT_IMAGE_OPTS;
+      delete finalConfig["process.env.__NEXT_IMAGE_OPTS"];
       return {
-        ...config,
-        define: {
-          ...config.define,
-          ...publicNextEnvMap,
-          ...getDefineEnv({
-            isTurbopack: false,
-            config: nextConfig,
-            isClient: true,
-            isEdgeServer: false,
-            isNodeOrEdgeCompilation: false,
-            isNodeServer: false,
-            clientRouterFilters: void 0,
-            dev: isDev,
-            middlewareMatchers: void 0,
-            hasRewrites: false,
-            distDir: nextConfig.distDir,
-            fetchCacheKeyPrefix: nextConfig?.experimental?.fetchCacheKeyPrefix
-          })
+        define: finalConfig,
+        test: {
+          deps: {
+            optimizer: {
+              ssr: {
+                include: ["next"]
+              }
+            }
+          }
         }
       };
     }
@@ -159,14 +180,14 @@ async function getFontFaceDeclarations2(options) {
       if ("fontReferenceId" in localFontSrc) {
         return dedent`@font-face {
 					font-family: ${id};
-					src: url(${localFontSrc.fontReferenceId ? getPlaceholderFontUrl(localFontSrc.fontReferenceId) : `.${localFontSrc.fontPath}`})
+					src: url(${localFontSrc.fontReferenceId ? getPlaceholderFontUrl(localFontSrc.fontReferenceId) : `/@fs${localFontSrc.fontPath}`})
 					${fontDeclarations}
 				}`;
       }
       return localFontSrc.map((font) => {
         return dedent`@font-face {
 						font-family: ${id};
-						src: url(${font.path.fontReferenceId ? getPlaceholderFontUrl(font.path.fontReferenceId) : `.${font.path.fontPath}`});
+						src: url(${font.path.fontReferenceId ? getPlaceholderFontUrl(font.path.fontReferenceId) : `/@fs${font.path.fontPath}`});
 						${font.weight ? `font-weight: ${font.weight};` : ""}
 						${font.style ? `font-style: ${font.style};` : ""}
 						${fontDeclarations}
@@ -243,7 +264,7 @@ function setFontDeclarationsInHead({
       });
     }
   }
-  return dedent3`
+  return dedent`
   const fontPaths = [${fontPathsImportUrls.map((fontPath) => `{id: '${fontPath.id}', path: ${fontPath.path}}`).join(", ")}];
   if (!document.getElementById('id-${id}')) {
     let fontDeclarations = \`${fontFaceCSS}\`;
@@ -267,53 +288,17 @@ function setFontDeclarationsInHead({
 // src/plugins/next-font/plugin.ts
 var includePattern = /next(\\|\/|\\\\).*(\\|\/|\\\\)target\.css.*$/;
 var virtualModuleId = "virtual:next-font";
-function configureNextFont() {
+function vitePluginNextFont() {
   let devMode = true;
-  const fontAssetPaths = /* @__PURE__ */ new Map();
   return {
-    name: "configure-next-font",
+    name: "vite-plugin-storybook-nextjs-font",
+    enforce: "pre",
     async config(config, env) {
-      devMode = env.mode === "development";
+      devMode = env.mode !== "production";
       return config;
     },
-    configureServer(server) {
-      server.middlewares.use(async (req, res, next) => {
-        if (req.url && fontAssetPaths.has(req.url)) {
-          const fontAbsoluteAssetPath = fontAssetPaths.get(req.url);
-          const fontFileExtension = path.extname(fontAbsoluteAssetPath);
-          try {
-            const fontData = await fs.readFile(fontAbsoluteAssetPath);
-            switch (fontFileExtension) {
-              case ".woff":
-                res.setHeader("Content-Type", "font/woff");
-                break;
-              case ".woff2":
-                res.setHeader("Content-Type", "font/woff2");
-                break;
-              case ".ttf":
-                res.setHeader("Content-Type", "font/ttf");
-                break;
-              case ".otf":
-                res.setHeader("Content-Type", "font/otf");
-                break;
-              default:
-                res.setHeader("Content-Type", "font");
-            }
-            res.end(fontData);
-          } catch (e) {
-            console.error(
-              `Could not read font file ${fontAbsoluteAssetPath}:`,
-              e
-            );
-            res.statusCode = 404;
-            res.end();
-          }
-        } else {
-          next();
-        }
-      });
-    },
     async resolveId(source, importer) {
+      const cwd = process.cwd();
       if (!includePattern.test(source) || !importer) {
         return null;
       }
@@ -347,14 +332,13 @@ function configureNextFont() {
           );
           const fontPath = path.join(importerDirPath, importerRelativeFontPath);
           if (devMode) {
-            fontAssetPaths.set(importerRelativeFontPath, fontPath);
             return {
-              fontPath: importerRelativeFontPath,
+              fontPath: path.join(cwd, fontPath),
               fontReferenceId: void 0
             };
           }
           try {
-            const fontData = await fs.readFile(fontPath);
+            const fontData = await fs2.readFile(fontPath);
             const fontReferenceId = this.emitFile({
               name: `${fontBaseName}${fontExtension}`,
               type: "asset",
@@ -466,7 +450,8 @@ function getEmotionOptions(emotionConfig, development) {
 }
 
 // src/utils/swc/options.ts
-var regeneratorRuntimePath = __require.resolve(
+var require2 = createRequire(import.meta.url);
+var regeneratorRuntimePath = require2.resolve(
   "next/dist/compiled/regenerator-runtime"
 );
 function getBaseSWCOptions({
@@ -493,7 +478,7 @@ function getBaseSWCOptions({
   const useDefineForClassFields = Boolean(
     jsConfig?.compilerOptions?.useDefineForClassFields
   );
-  const plugins = (swcPlugins ?? []).filter(Array.isArray).map(([name, options]) => [__require.resolve(name), options]);
+  const plugins = (swcPlugins ?? []).filter(Array.isArray).map(([name, options]) => [require2.resolve(name), options]);
   return {
     jsc: {
       ...resolvedBaseUrl && paths ? {
@@ -538,7 +523,7 @@ function getBaseSWCOptions({
         }
       }
     },
-    sourceMaps: "inline",
+    sourceMaps: true,
     removeConsole: compilerOptions?.removeConsole,
     reactRemoveProperties: false,
     // Map the k-v map to an array of pairs.
@@ -581,12 +566,12 @@ var getVitestSWCTransformConfig = ({
   nextDirectories,
   nextConfig,
   rootDir,
-  isDev
+  isDev,
+  isEsmProject
 }) => {
-  const esm = true;
   const baseOptions = getBaseSWCOptions({
     filename,
-    development: false,
+    development: isDev,
     hasReactRefresh: false,
     globalWindow: !isServerEnvironment,
     modularizeImports: nextConfig.modularizeImports,
@@ -594,7 +579,7 @@ var getVitestSWCTransformConfig = ({
     resolvedBaseUrl: loadedJSConfig.resolvedBaseUrl,
     swcPlugins: nextConfig.experimental.swcPlugins,
     compilerOptions: nextConfig?.compilerOptions,
-    esm,
+    esm: isEsmProject,
     swcCacheDir: path.join(
       rootDir,
       nextConfig.distDir ?? ".next",
@@ -603,6 +588,7 @@ var getVitestSWCTransformConfig = ({
     )
   });
   const useCjsModules = shouldOutputCommonJs(filename);
+  const isPageFile = nextDirectories.pagesDir ? filename.startsWith(nextDirectories.pagesDir) : false;
   return {
     ...baseOptions,
     fontLoaders: {
@@ -635,12 +621,15 @@ var getVitestSWCTransformConfig = ({
       }
     },
     module: {
-      type: esm && !useCjsModules ? "es6" : "commonjs"
+      type: isEsmProject && !useCjsModules ? "es6" : "commonjs"
     },
-    disableNextSsg: true,
+    disableNextSsg: !isPageFile,
     disablePageConfig: true,
+    isPageFile,
     pagesDir: nextDirectories.pagesDir,
     appDir: nextDirectories.appDir,
+    isDevelopment: isDev,
+    isServerCompiler: isServerEnvironment,
     inputSourceMap: inputSourceMap && typeof inputSourceMap === "object" ? JSON.stringify(inputSourceMap) : void 0,
     sourceFileName: filename,
     filename
@@ -658,15 +647,18 @@ function vitePluginNextSwc(rootDir, nextConfigResolver) {
   let nextDirectories;
   let isServerEnvironment;
   let isDev;
+  let isEsmProject;
   const resolvedDir = resolve(rootDir);
   return {
     name: "vite-plugin-storybook-nextjs-swc",
+    enforce: "pre",
     async config(config, env) {
       const nextConfig = await nextConfigResolver.promise;
       nextDirectories = findPagesDir(resolvedDir);
-      loadedJSConfig = await loadJsConfig(resolvedDir, nextConfig);
-      (await loadEnvironmentConfig(resolvedDir)).combinedEnv;
-      isDev = env.mode === "development";
+      loadedJSConfig = await loadJsConfig.default(resolvedDir, nextConfig);
+      isDev = env.mode !== "production";
+      await loadClosestPackageJson(resolvedDir);
+      isEsmProject = true;
       await loadSWCBindingsEagerly(nextConfig);
       const serverWatchIgnored = config.server?.watch?.ignored;
       const isServerWatchIgnoredArray = Array.isArray(serverWatchIgnored);
@@ -679,10 +671,10 @@ function vitePluginNextSwc(rootDir, nextConfigResolver) {
             "@opentelemetry/api": "next/dist/compiled/@opentelemetry/api"
           }
         },
-        esbuild: {
-          // We will use Next.js custom SWC transpiler instead of Vite's build-in esbuild
-          exclude: [/node_modules/, /.m?(t|j)sx?/]
-        },
+        // esbuild: {
+        //   // We will use Next.js custom SWC transpiler instead of Vite's build-in esbuild
+        //   exclude: [/node_modules/, /.m?(t|j)sx?/],
+        // },
         server: {
           watch: {
             ignored: [
@@ -706,7 +698,8 @@ function vitePluginNextSwc(rootDir, nextConfigResolver) {
             nextConfig: await nextConfigResolver.promise,
             nextDirectories,
             rootDir,
-            isDev
+            isDev,
+            isEsmProject
           })
         );
         return output;
@@ -749,28 +742,19 @@ try {
 function vitePluginNextImage(nextConfigResolver) {
   return {
     name: "vite-plugin-storybook-nextjs-image",
-    config(config, env) {
-      env.mode === "development";
-      return {
-        ...config,
-        resolve: {
-          ...config.resolve,
-          alias: {
-            react: "next/dist/compiled/react",
-            "react-dom": "next/dist/compiled/react-dom"
-          }
-        }
-      };
+    enforce: "pre",
+    async config(config, env) {
+      return config;
     },
     async resolveId(id, importer) {
-      if (includePattern2.test(id) && !excludeImporterPattern.test(importer ?? "") && !importer?.startsWith(virtualImage)) {
-        return {
-          id: `${virtualImage}?${id}`,
-          meta: {
-            id,
-            importer: importer ?? ""
-          }
-        };
+      const [source, queryA] = id.split("?");
+      if (queryA === "ignore") {
+        return null;
+      }
+      if (includePattern2.test(source) && !excludeImporterPattern.test(importer ?? "") && !importer?.startsWith(virtualImage)) {
+        const isAbsolute = path.isAbsolute(id);
+        const imagePath = importer ? isAbsolute ? source : path.join(path.dirname(importer), source) : source;
+        return `${virtualImage}?imagePath=${imagePath}`;
       }
       if (id === "next/image" && importer !== virtualNextImage) {
         return virtualNextImage;
@@ -788,9 +772,9 @@ function vitePluginNextImage(nextConfigResolver) {
     },
     async load(id) {
       if (virtualNextImage === id) {
-        return (await fs2.promises.readFile(
+        return (await fs3.promises.readFile(
           fileURLToPath(
-            new URL(
+            new URL$1(
               "./plugins/next-image/alias/next-image.js",
               import.meta.url
             )
@@ -798,9 +782,9 @@ function vitePluginNextImage(nextConfigResolver) {
         )).toString("utf-8");
       }
       if (virtualNextLegacyImage === id) {
-        return (await fs2.promises.readFile(
+        return (await fs3.promises.readFile(
           fileURLToPath(
-            new URL(
+            new URL$1(
               "./plugins/next-image/alias/next-legacy-image.js",
               import.meta.url
             )
@@ -808,9 +792,9 @@ function vitePluginNextImage(nextConfigResolver) {
         )).toString("utf-8");
       }
       if (virtualNextImageDefaultLoader === id) {
-        return (await fs2.promises.readFile(
+        return (await fs3.promises.readFile(
           fileURLToPath(
-            new URL(
+            new URL$1(
               "./plugins/next-image/alias/image-default-loader.js",
               import.meta.url
             )
@@ -818,34 +802,31 @@ function vitePluginNextImage(nextConfigResolver) {
         )).toString("utf-8");
       }
       if (virtualNextImageContext === id) {
-        return (await fs2.promises.readFile(
+        return (await fs3.promises.readFile(
           fileURLToPath(
-            new URL(
+            new URL$1(
               "./plugins/next-image/alias/image-context.js",
               import.meta.url
             )
           )
         )).toString("utf-8");
       }
-      const [source] = id.split("?");
+      const [source, query] = id.split("?");
       if (virtualImage === source) {
-        const moduleInfo = this.getModuleInfo(id);
-        const meta = moduleInfo?.meta;
-        path.basename(id);
+        const imagePath = decode(query).imagePath;
         const nextConfig = await nextConfigResolver.promise;
-        const extension = meta.id.split(".").pop();
-        const imagePath = path.join(path.dirname(meta.importer), meta.id);
+        const extension = path.extname(imagePath);
         try {
           if (nextConfig.images?.disableStaticImages) {
-            return dedent3`
-						import image from "${imagePath}";
+            return dedent`
+						import image from "${imagePath}?ignore";
 						export default image;
 					`;
           }
-          const imageData = await fs2.promises.readFile(imagePath);
+          const imageData = await fs3.promises.readFile(imagePath);
           let width;
           let height;
-          if (extension === "avif" && sharp) {
+          if (extension === ".avif" && sharp) {
             const transformer = sharp(Buffer.from(imageData));
             const result = await transformer.metadata();
             width = result.width;
@@ -855,8 +836,8 @@ function vitePluginNextImage(nextConfigResolver) {
             width = result.width;
             height = result.height;
           }
-          return dedent3`
-						import src from "${imagePath}";
+          return dedent`
+						import src from "${imagePath}?ignore";
 						export default {
 							src,
 							height: ${height},
@@ -873,72 +854,93 @@ function vitePluginNextImage(nextConfigResolver) {
     }
   };
 }
+var dirname = path.dirname(new URL(import.meta.url).pathname);
+var joinDir = (...subPath) => path.join(dirname, "plugins", "next-mocks", "alias", ...subPath);
+var vitePluginNextMocks = () => ({
+  name: "vite-plugin-next-mocks",
+  config: () => ({
+    resolve: {
+      alias: {
+        "next/headers": joinDir("headers", "index.js"),
+        "@storybook/nextjs/headers.mock": joinDir("headers", "index.js"),
+        "next/navigation": joinDir("navigation", "index.js"),
+        "@storybook/nextjs/navigation.mock": joinDir(
+          "navigation",
+          "index.js"
+        ),
+        "next/router": joinDir("router", "index.js"),
+        "@storybook/nextjs/router.mock": joinDir("router", "index.js"),
+        "next/cache": joinDir("cache", "index.js"),
+        "@storybook/nextjs/cache.mock": joinDir("cache", "index.js"),
+        "server-only$": joinDir("rsc", "server-only.js")
+      }
+    }
+  })
+});
 
 // src/index.ts
+var require3 = createRequire(import.meta.url);
 function VitePlugin({ dir = process.cwd() } = {}) {
   const resolvedDir = resolve(dir);
   const nextConfigResolver = Promise.withResolvers();
-  const nextFontPlugin = configureNextFont();
-  const nextSwcPlugin = vitePluginNextSwc(dir, nextConfigResolver);
-  const nextEnvPlugin = vitePluginNextConfig(dir);
-  const nextImagePlugin = vitePluginNextImage(nextConfigResolver);
-  return {
-    name: "vite-plugin-storybook-nextjs",
-    async buildStart() {
-      for (const configPath of await getConfigPaths(resolvedDir)) {
-        this.addWatchFile(configPath);
-      }
-    },
-    enforce: "pre",
-    configureServer(server) {
-      nextFontPlugin.configureServer.call(this, server);
-    },
-    async config(config, env) {
-      nextConfigResolver.resolve(await getConfig(resolvedDir));
-      const mergedNextSwcConfig = await nextSwcPlugin.config.call(
-        this,
-        config,
-        env
-      );
-      const mergedNextEnvConfig = await nextEnvPlugin.config.call(
-        this,
-        mergedNextSwcConfig,
-        env
-      );
-      const mergedNextFontConfig = await nextFontPlugin.config.call(
-        this,
-        mergedNextEnvConfig,
-        env
-      );
-      const mergedNextImageConfig = await nextImagePlugin.config.call(
-        this,
-        mergedNextFontConfig,
-        env
-      );
-      return mergedNextImageConfig;
-    },
-    async resolveId(source, importer, options) {
-      const nextFontResolver = await nextFontPlugin.resolveId.call(
-        this,
-        source,
-        importer
-      );
-      if (nextFontResolver) {
-        return nextFontResolver;
-      }
-      return nextImagePlugin.resolveId.call(this, source, importer);
-    },
-    load(id) {
-      const nextFontLoaderResult = nextFontPlugin.load.call(this, id);
-      if (nextFontLoaderResult) {
-        return nextFontLoaderResult;
+  const isVitestEnv = process.env.VITEST === "true";
+  return [
+    {
+      name: "vite-plugin-storybook-nextjs",
+      enforce: "pre",
+      async config(config, env) {
+        const phase = env.mode === "development" ? PHASE_DEVELOPMENT_SERVER : env.mode === "test" ? PHASE_TEST : PHASE_PRODUCTION_BUILD;
+        nextConfigResolver.resolve(
+          // @ts-ignore TODO figure out why TypeScript is complaining about this
+          await loadConfig.default(phase, resolvedDir)
+        );
+        return {
+          ...!isVitestEnv && {
+            resolve: {
+              alias: {
+                react: "next/dist/compiled/react",
+                "react-dom": "next/dist/compiled/react-dom"
+              }
+            }
+          },
+          test: {
+            alias: {
+              "react/jsx-dev-runtime": require3.resolve(
+                "next/dist/compiled/react/jsx-dev-runtime.js"
+              ),
+              "react/jsx-runtime": require3.resolve(
+                "next/dist/compiled/react/jsx-runtime.js"
+              ),
+              react: require3.resolve("next/dist/compiled/react"),
+              "react-dom/test-utils": require3.resolve(
+                "next/dist/compiled/react-dom/cjs/react-dom-test-utils.production.js"
+              ),
+              "react-dom/cjs/react-dom.development.js": require3.resolve(
+                "next/dist/compiled/react-dom/cjs/react-dom.development.js"
+              ),
+              "react-dom/client": require3.resolve(
+                "next/dist/compiled/react-dom/client.js"
+              ),
+              "react-dom": require3.resolve("next/dist/compiled/react-dom")
+            }
+          }
+        };
+      },
+      configResolved(config) {
+        if (!config.test?.browser?.enabled) {
+          config.test.setupFiles = [
+            require3.resolve("./mocks/storybook.global.js"),
+            ...config.test?.setupFiles ?? []
+          ];
+        }
       }
-      return nextImagePlugin.load.call(this, id);
     },
-    transform(code, id) {
-      return nextSwcPlugin.transform.call(this, code, id);
-    }
-  };
+    vitePluginNextFont(),
+    vitePluginNextSwc(dir, nextConfigResolver),
+    vitePluginNextEnv(dir, nextConfigResolver),
+    vitePluginNextImage(nextConfigResolver),
+    vitePluginNextMocks()
+  ];
 }
 var src_default = VitePlugin;
 

package/dist/mocks/storybook.global.d.ts

@@ -0,0 +1,2 @@
+
+export {  }