vite-plugin-storybook-nextjs 0.0.13 → 0.0.15

package/dist/index.cjs

@@ -7,7 +7,6 @@ var fs3 = require('fs');
 var env = require('@next/env');
 var Log = require('next/dist/build/output/log.js');
 var index_js = require('next/dist/build/swc/index.js');
-var constants_js = require('next/dist/shared/lib/constants.js');
 var fs2 = require('fs/promises');
 var fetchCssFromGoogleFonts_js = require('next/dist/compiled/@next/font/dist/google/fetch-css-from-google-fonts.js');
 var getFontAxes_js = require('next/dist/compiled/@next/font/dist/google/get-font-axes.js');
@@ -21,6 +20,8 @@ var findPagesDir_js = require('next/dist/lib/find-pages-dir.js');
 var utils_js = require('next/dist/build/utils.js');
 var options_js = require('next/dist/build/swc/options.js');
 var loadConfig = require('next/dist/server/config.js');
+var constants_js = require('next/dist/shared/lib/constants.js');
+var MagicString = require('magic-string');
 var os = require('os');
 var querystring = require('querystring');
 var imageSizeOf = require('image-size');
@@ -35,9 +36,15 @@ var fs2__default = /*#__PURE__*/_interopDefault(fs2);
 var loaderUtils__default = /*#__PURE__*/_interopDefault(loaderUtils);
 var loadJsConfig__default = /*#__PURE__*/_interopDefault(loadJsConfig);
 var loadConfig__default = /*#__PURE__*/_interopDefault(loadConfig);
+var MagicString__default = /*#__PURE__*/_interopDefault(MagicString);
 var imageSizeOf__default = /*#__PURE__*/_interopDefault(imageSizeOf);
 
-// src/index.ts
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 var nextDistPath = /(next[\\/]dist[\\/]shared[\\/]lib)|(next[\\/]dist[\\/]client)|(next[\\/]dist[\\/]pages)/;
 async function loadEnvironmentConfig(dir, dev) {
   return env.loadEnvConfig(dir, dev, Log__default.default);
@@ -722,11 +729,40 @@ if (typeof Promise.withResolvers === "undefined") {
     return { promise, resolve: resolve4, reject };
   };
 }
+var vitePluginNextDynamic = () => ({
+  name: "vite-plugin-storybook-nextjs-dynamic",
+  transform(code, id) {
+    const dynamicImportRegex = /dynamic\(\s*async\s*\(\s*\)\s*=>\s*\{\s*typeof\s*require\.resolveWeak\s*!==\s*"undefined"\s*&&\s*require\.resolveWeak\(([^)]+)\);\s*\}/g;
+    if (dynamicImportRegex.test(code)) {
+      const s = new MagicString__default.default(code);
+      dynamicImportRegex.lastIndex = 0;
+      let match = dynamicImportRegex.exec(code);
+      while (match !== null) {
+        const [fullMatch, importPath] = match;
+        const newImport = `dynamic(() => import(${importPath})`;
+        s.overwrite(match.index, match.index + fullMatch.length, newImport);
+        match = dynamicImportRegex.exec(code);
+      }
+      return {
+        code: s.toString(),
+        map: s.generateMap({ hires: true })
+      };
+    }
+    return null;
+  }
+});
 
 // src/utils.ts
 var VITEST_PLUGIN_NAME = "vite-plugin-storybook-nextjs";
 var isVitestEnv = process.env.VITEST === "true";
 
+// src/plugins/next-image/alias/index.tsx
+var getEntryPoint = (subPath, env) => __require.resolve(`${VITEST_PLUGIN_NAME}/${env}/mocks/${subPath}`);
+var getAlias = (env) => ({
+  "sb-original/default-loader": getEntryPoint("image-default-loader", env),
+  "sb-original/image-context": getEntryPoint("image-context", env)
+});
+
 // src/plugins/next-image/plugin.ts
 var includePattern2 = /\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/;
 var excludeImporterPattern = /\.(css|scss|sass)$/;
@@ -746,11 +782,6 @@ try {
     "You have to install sharp in order to use image optimization features in Next.js. AVIF support is also disabled."
   );
 }
-var getEntryPoint = (subPath, env) => require3.resolve(`${VITEST_PLUGIN_NAME}/${env}/mocks/${subPath}`);
-var getAlias = (env) => ({
-  "sb-original/default-loader": getEntryPoint("image-default-loader", env),
-  "sb-original/image-context": getEntryPoint("image-context", env)
-});
 function vitePluginNextImage(nextConfigResolver) {
   let isBrowser = !isVitestEnv;
   return {
@@ -846,16 +877,21 @@ var getEntryPoint2 = (subPath, env) => require4.resolve(`${VITEST_PLUGIN_NAME}/$
 var getAlias2 = (env) => ({
   "next/headers": getEntryPoint2("headers", env),
   "@storybook/nextjs/headers.mock": getEntryPoint2("headers", env),
+  "@storybook/nextjs-vite/headers.mock": getEntryPoint2("headers", env),
   "next/navigation": getEntryPoint2("navigation", env),
   "@storybook/nextjs/navigation.mock": getEntryPoint2("navigation", env),
+  "@storybook/nextjs-vite/navigation.mock": getEntryPoint2("navigation", env),
   "next/router": getEntryPoint2("router", env),
   "@storybook/nextjs/router.mock": getEntryPoint2("router", env),
+  "@storybook/nextjs-vite/router.mock": getEntryPoint2("router", env),
   "next/cache": getEntryPoint2("cache", env),
   "@storybook/nextjs/cache.mock": getEntryPoint2("cache", env),
+  "@storybook/nextjs-vite/cache.mock": getEntryPoint2("cache", env),
   "server-only": getEntryPoint2("server-only", env),
   "@opentelemetry/api": require4.resolve(
-    "next/dist/compiled/@opentelemetry/api/index.js"
-  )
+    "next/dist/compiled/@opentelemetry/api"
+  ),
+  "next/dynamic": getEntryPoint2("dynamic", env)
 });
 var vitePluginNextMocks = () => ({
   name: "vite-plugin-next-mocks",
@@ -926,7 +962,8 @@ function VitePlugin({ dir = process.cwd() } = {}) {
     vitePluginNextSwc(dir, nextConfigResolver),
     vitePluginNextEnv(dir, nextConfigResolver),
     vitePluginNextImage(nextConfigResolver),
-    vitePluginNextMocks()
+    vitePluginNextMocks(),
+    vitePluginNextDynamic()
   ];
 }
 var src_default = VitePlugin;

package/dist/index.js

@@ -5,7 +5,6 @@ import fs3 from 'node:fs';
 import { loadEnvConfig } 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';
@@ -19,11 +18,18 @@ 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 { PHASE_DEVELOPMENT_SERVER, PHASE_TEST, PHASE_PRODUCTION_BUILD } from 'next/dist/shared/lib/constants.js';
+import MagicString from 'magic-string';
 import { cpus } from 'node:os';
 import { decode } from 'node:querystring';
 import imageSizeOf from 'image-size';
 
-// src/index.ts
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 var nextDistPath = /(next[\\/]dist[\\/]shared[\\/]lib)|(next[\\/]dist[\\/]client)|(next[\\/]dist[\\/]pages)/;
 async function loadEnvironmentConfig(dir, dev) {
   return loadEnvConfig(dir, dev, Log);
@@ -708,11 +714,40 @@ if (typeof Promise.withResolvers === "undefined") {
     return { promise, resolve: resolve4, reject };
   };
 }
+var vitePluginNextDynamic = () => ({
+  name: "vite-plugin-storybook-nextjs-dynamic",
+  transform(code, id) {
+    const dynamicImportRegex = /dynamic\(\s*async\s*\(\s*\)\s*=>\s*\{\s*typeof\s*require\.resolveWeak\s*!==\s*"undefined"\s*&&\s*require\.resolveWeak\(([^)]+)\);\s*\}/g;
+    if (dynamicImportRegex.test(code)) {
+      const s = new MagicString(code);
+      dynamicImportRegex.lastIndex = 0;
+      let match = dynamicImportRegex.exec(code);
+      while (match !== null) {
+        const [fullMatch, importPath] = match;
+        const newImport = `dynamic(() => import(${importPath})`;
+        s.overwrite(match.index, match.index + fullMatch.length, newImport);
+        match = dynamicImportRegex.exec(code);
+      }
+      return {
+        code: s.toString(),
+        map: s.generateMap({ hires: true })
+      };
+    }
+    return null;
+  }
+});
 
 // src/utils.ts
 var VITEST_PLUGIN_NAME = "vite-plugin-storybook-nextjs";
 var isVitestEnv = process.env.VITEST === "true";
 
+// src/plugins/next-image/alias/index.tsx
+var getEntryPoint = (subPath, env) => __require.resolve(`${VITEST_PLUGIN_NAME}/${env}/mocks/${subPath}`);
+var getAlias = (env) => ({
+  "sb-original/default-loader": getEntryPoint("image-default-loader", env),
+  "sb-original/image-context": getEntryPoint("image-context", env)
+});
+
 // src/plugins/next-image/plugin.ts
 var includePattern2 = /\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/;
 var excludeImporterPattern = /\.(css|scss|sass)$/;
@@ -732,11 +767,6 @@ try {
     "You have to install sharp in order to use image optimization features in Next.js. AVIF support is also disabled."
   );
 }
-var getEntryPoint = (subPath, env) => require3.resolve(`${VITEST_PLUGIN_NAME}/${env}/mocks/${subPath}`);
-var getAlias = (env) => ({
-  "sb-original/default-loader": getEntryPoint("image-default-loader", env),
-  "sb-original/image-context": getEntryPoint("image-context", env)
-});
 function vitePluginNextImage(nextConfigResolver) {
   let isBrowser = !isVitestEnv;
   return {
@@ -832,16 +862,21 @@ var getEntryPoint2 = (subPath, env) => require4.resolve(`${VITEST_PLUGIN_NAME}/$
 var getAlias2 = (env) => ({
   "next/headers": getEntryPoint2("headers", env),
   "@storybook/nextjs/headers.mock": getEntryPoint2("headers", env),
+  "@storybook/nextjs-vite/headers.mock": getEntryPoint2("headers", env),
   "next/navigation": getEntryPoint2("navigation", env),
   "@storybook/nextjs/navigation.mock": getEntryPoint2("navigation", env),
+  "@storybook/nextjs-vite/navigation.mock": getEntryPoint2("navigation", env),
   "next/router": getEntryPoint2("router", env),
   "@storybook/nextjs/router.mock": getEntryPoint2("router", env),
+  "@storybook/nextjs-vite/router.mock": getEntryPoint2("router", env),
   "next/cache": getEntryPoint2("cache", env),
   "@storybook/nextjs/cache.mock": getEntryPoint2("cache", env),
+  "@storybook/nextjs-vite/cache.mock": getEntryPoint2("cache", env),
   "server-only": getEntryPoint2("server-only", env),
   "@opentelemetry/api": require4.resolve(
-    "next/dist/compiled/@opentelemetry/api/index.js"
-  )
+    "next/dist/compiled/@opentelemetry/api"
+  ),
+  "next/dynamic": getEntryPoint2("dynamic", env)
 });
 var vitePluginNextMocks = () => ({
   name: "vite-plugin-next-mocks",
@@ -912,7 +947,8 @@ function VitePlugin({ dir = process.cwd() } = {}) {
     vitePluginNextSwc(dir, nextConfigResolver),
     vitePluginNextEnv(dir, nextConfigResolver),
     vitePluginNextImage(nextConfigResolver),
-    vitePluginNextMocks()
+    vitePluginNextMocks(),
+    vitePluginNextDynamic()
   ];
 }
 var src_default = VitePlugin;

package/dist/mocks/storybook.global.cjs

@@ -2,65 +2,56 @@
 
 var module$1 = require('module');
 var moduleAlias = require('module-alias');
-require('fs');
-var os = require('os');
-require('path');
-require('querystring');
-require('image-size');
-require('ts-dedent');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var moduleAlias__default = /*#__PURE__*/_interopDefault(moduleAlias);
 
-// src/mocks/storybook.global.ts
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 
 // src/utils.ts
 var VITEST_PLUGIN_NAME = "vite-plugin-storybook-nextjs";
 process.env.VITEST === "true";
 
-// src/plugins/next-image/plugin.ts
-var sharp;
-var require2 = module$1.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('out.js', document.baseURI).href)));
-try {
-  sharp = require2("sharp");
-  if (sharp && sharp.concurrency() > 1) {
-    const divisor = process.env.NODE_ENV === "development" ? 4 : 2;
-    sharp.concurrency(Math.floor(Math.max(os.cpus().length / divisor, 1)));
-  }
-} catch (e) {
-  console.warn(
-    "You have to install sharp in order to use image optimization features in Next.js. AVIF support is also disabled."
-  );
-}
-var getEntryPoint = (subPath, env) => require2.resolve(`${VITEST_PLUGIN_NAME}/${env}/mocks/${subPath}`);
+// src/plugins/next-image/alias/index.tsx
+var getEntryPoint = (subPath, env) => __require.resolve(`${VITEST_PLUGIN_NAME}/${env}/mocks/${subPath}`);
 var getAlias = (env) => ({
   "sb-original/default-loader": getEntryPoint("image-default-loader", env),
   "sb-original/image-context": getEntryPoint("image-context", env)
 });
-var require3 = module$1.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('out.js', document.baseURI).href)));
-var getEntryPoint2 = (subPath, env) => require3.resolve(`${VITEST_PLUGIN_NAME}/${env}/mocks/${subPath}`);
+var require2 = module$1.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('out.js', document.baseURI).href)));
+var getEntryPoint2 = (subPath, env) => require2.resolve(`${VITEST_PLUGIN_NAME}/${env}/mocks/${subPath}`);
 var getAlias2 = (env) => ({
   "next/headers": getEntryPoint2("headers", env),
   "@storybook/nextjs/headers.mock": getEntryPoint2("headers", env),
+  "@storybook/nextjs-vite/headers.mock": getEntryPoint2("headers", env),
   "next/navigation": getEntryPoint2("navigation", env),
   "@storybook/nextjs/navigation.mock": getEntryPoint2("navigation", env),
+  "@storybook/nextjs-vite/navigation.mock": getEntryPoint2("navigation", env),
   "next/router": getEntryPoint2("router", env),
   "@storybook/nextjs/router.mock": getEntryPoint2("router", env),
+  "@storybook/nextjs-vite/router.mock": getEntryPoint2("router", env),
   "next/cache": getEntryPoint2("cache", env),
   "@storybook/nextjs/cache.mock": getEntryPoint2("cache", env),
+  "@storybook/nextjs-vite/cache.mock": getEntryPoint2("cache", env),
   "server-only": getEntryPoint2("server-only", env),
-  "@opentelemetry/api": require3.resolve(
-    "next/dist/compiled/@opentelemetry/api/index.js"
-  )
+  "@opentelemetry/api": require2.resolve(
+    "next/dist/compiled/@opentelemetry/api"
+  ),
+  "next/dynamic": getEntryPoint2("dynamic", env)
 });
 
 // src/mocks/storybook.global.ts
-var require4 = module$1.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('out.js', document.baseURI).href)));
+var require3 = module$1.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('out.js', document.baseURI).href)));
 moduleAlias__default.default.addAliases({
   react: "next/dist/compiled/react",
-  "react-dom/test-utils": require4.resolve(
+  "react-dom/test-utils": require3.resolve(
     "next/dist/compiled/react-dom/cjs/react-dom-test-utils.production.js"
   ),
   "react-dom": "next/dist/compiled/react-dom",

package/dist/mocks/storybook.global.js

@@ -1,56 +1,50 @@
 import { createRequire } from 'node:module';
 import moduleAlias from 'module-alias';
-import { cpus } from 'node:os';
-import 'image-size';
-import 'ts-dedent';
 
-// src/mocks/storybook.global.ts
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 
 // src/utils.ts
 var VITEST_PLUGIN_NAME = "vite-plugin-storybook-nextjs";
 process.env.VITEST === "true";
 
-// src/plugins/next-image/plugin.ts
-var sharp;
-var require2 = createRequire(import.meta.url);
-try {
-  sharp = require2("sharp");
-  if (sharp && sharp.concurrency() > 1) {
-    const divisor = process.env.NODE_ENV === "development" ? 4 : 2;
-    sharp.concurrency(Math.floor(Math.max(cpus().length / divisor, 1)));
-  }
-} catch (e) {
-  console.warn(
-    "You have to install sharp in order to use image optimization features in Next.js. AVIF support is also disabled."
-  );
-}
-var getEntryPoint = (subPath, env) => require2.resolve(`${VITEST_PLUGIN_NAME}/${env}/mocks/${subPath}`);
+// src/plugins/next-image/alias/index.tsx
+var getEntryPoint = (subPath, env) => __require.resolve(`${VITEST_PLUGIN_NAME}/${env}/mocks/${subPath}`);
 var getAlias = (env) => ({
   "sb-original/default-loader": getEntryPoint("image-default-loader", env),
   "sb-original/image-context": getEntryPoint("image-context", env)
 });
-var require3 = createRequire(import.meta.url);
-var getEntryPoint2 = (subPath, env) => require3.resolve(`${VITEST_PLUGIN_NAME}/${env}/mocks/${subPath}`);
+var require2 = createRequire(import.meta.url);
+var getEntryPoint2 = (subPath, env) => require2.resolve(`${VITEST_PLUGIN_NAME}/${env}/mocks/${subPath}`);
 var getAlias2 = (env) => ({
   "next/headers": getEntryPoint2("headers", env),
   "@storybook/nextjs/headers.mock": getEntryPoint2("headers", env),
+  "@storybook/nextjs-vite/headers.mock": getEntryPoint2("headers", env),
   "next/navigation": getEntryPoint2("navigation", env),
   "@storybook/nextjs/navigation.mock": getEntryPoint2("navigation", env),
+  "@storybook/nextjs-vite/navigation.mock": getEntryPoint2("navigation", env),
   "next/router": getEntryPoint2("router", env),
   "@storybook/nextjs/router.mock": getEntryPoint2("router", env),
+  "@storybook/nextjs-vite/router.mock": getEntryPoint2("router", env),
   "next/cache": getEntryPoint2("cache", env),
   "@storybook/nextjs/cache.mock": getEntryPoint2("cache", env),
+  "@storybook/nextjs-vite/cache.mock": getEntryPoint2("cache", env),
   "server-only": getEntryPoint2("server-only", env),
-  "@opentelemetry/api": require3.resolve(
-    "next/dist/compiled/@opentelemetry/api/index.js"
-  )
+  "@opentelemetry/api": require2.resolve(
+    "next/dist/compiled/@opentelemetry/api"
+  ),
+  "next/dynamic": getEntryPoint2("dynamic", env)
 });
 
 // src/mocks/storybook.global.ts
-var require4 = createRequire(import.meta.url);
+var require3 = createRequire(import.meta.url);
 moduleAlias.addAliases({
   react: "next/dist/compiled/react",
-  "react-dom/test-utils": require4.resolve(
+  "react-dom/test-utils": require3.resolve(
     "next/dist/compiled/react-dom/cjs/react-dom-test-utils.production.js"
   ),
   "react-dom": "next/dist/compiled/react-dom",

package/dist/plugins/next-image/alias/next-image.d.cts

@@ -2,7 +2,7 @@ import * as next_dist_shared_lib_get_img_props from 'next/dist/shared/lib/get-im
 import * as _NextImage from 'next/image';
 import React__default from 'next/dist/compiled/react';
 
-declare const MockedNextImage: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "height" | "width" | "loading" | "ref" | "alt" | "src" | "srcSet"> & {
+declare const MockedNextImage: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "src" | "srcSet" | "ref" | "width" | "height" | "loading" | "alt"> & {
     src: string | next_dist_shared_lib_get_img_props.StaticImport;
     alt: string;
     width?: number | `${number}` | undefined;

package/dist/plugins/next-image/alias/next-image.d.ts

@@ -2,7 +2,7 @@ import * as next_dist_shared_lib_get_img_props from 'next/dist/shared/lib/get-im
 import * as _NextImage from 'next/image';
 import React__default from 'next/dist/compiled/react';
 
-declare const MockedNextImage: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "height" | "width" | "loading" | "ref" | "alt" | "src" | "srcSet"> & {
+declare const MockedNextImage: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "src" | "srcSet" | "ref" | "width" | "height" | "loading" | "alt"> & {
     src: string | next_dist_shared_lib_get_img_props.StaticImport;
     alt: string;
     width?: number | `${number}` | undefined;

package/dist/plugins/next-mocks/alias/cache/index.cjs

@@ -3,28 +3,22 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var test = require('@storybook/test');
-var unstableCache_js = require('next/dist/server/web/spec-extension/unstable-cache.js');
-var unstableNoStore_js = require('next/dist/server/web/spec-extension/unstable-no-store.js');
 
 // src/plugins/next-mocks/alias/cache/index.ts
 var revalidatePath = test.fn().mockName("next/cache::revalidatePath");
 var revalidateTag = test.fn().mockName("next/cache::revalidateTag");
+var unstable_cache = test.fn().mockName("next/cache::unstable_cache").mockImplementation((cb) => cb);
+var unstable_noStore = test.fn().mockName("next/cache::unstable_noStore");
 var cacheExports = {
-  unstable_cache: unstableCache_js.unstable_cache,
+  unstable_cache,
   revalidateTag,
   revalidatePath,
-  unstable_noStore: unstableNoStore_js.unstable_noStore
+  unstable_noStore
 };
 var cache_default = cacheExports;
 
-Object.defineProperty(exports, "unstable_cache", {
-  enumerable: true,
-  get: function () { return unstableCache_js.unstable_cache; }
-});
-Object.defineProperty(exports, "unstable_noStore", {
-  enumerable: true,
-  get: function () { return unstableNoStore_js.unstable_noStore; }
-});
 exports.default = cache_default;
 exports.revalidatePath = revalidatePath;
 exports.revalidateTag = revalidateTag;
+exports.unstable_cache = unstable_cache;
+exports.unstable_noStore = unstable_noStore;

package/dist/plugins/next-mocks/alias/cache/index.d.cts

@@ -1,16 +1,14 @@
 import * as vitest from 'vitest';
-import { unstable_cache } from 'next/dist/server/web/spec-extension/unstable-cache.js';
-export { unstable_cache } from 'next/dist/server/web/spec-extension/unstable-cache.js';
-import { unstable_noStore } from 'next/dist/server/web/spec-extension/unstable-no-store.js';
-export { unstable_noStore } from 'next/dist/server/web/spec-extension/unstable-no-store.js';
 
 declare const revalidatePath: vitest.Mock<any, any>;
 declare const revalidateTag: vitest.Mock<any, any>;
+declare const unstable_cache: vitest.Mock<any, any>;
+declare const unstable_noStore: vitest.Mock<any, any>;
 declare const cacheExports: {
-    unstable_cache: typeof unstable_cache;
+    unstable_cache: vitest.Mock<any, any>;
     revalidateTag: vitest.Mock<any, any>;
     revalidatePath: vitest.Mock<any, any>;
-    unstable_noStore: typeof unstable_noStore;
+    unstable_noStore: vitest.Mock<any, any>;
 };
 
-export { cacheExports as default, revalidatePath, revalidateTag };
+export { cacheExports as default, revalidatePath, revalidateTag, unstable_cache, unstable_noStore };

package/dist/plugins/next-mocks/alias/cache/index.d.ts

@@ -1,16 +1,14 @@
 import * as vitest from 'vitest';
-import { unstable_cache } from 'next/dist/server/web/spec-extension/unstable-cache.js';
-export { unstable_cache } from 'next/dist/server/web/spec-extension/unstable-cache.js';
-import { unstable_noStore } from 'next/dist/server/web/spec-extension/unstable-no-store.js';
-export { unstable_noStore } from 'next/dist/server/web/spec-extension/unstable-no-store.js';
 
 declare const revalidatePath: vitest.Mock<any, any>;
 declare const revalidateTag: vitest.Mock<any, any>;
+declare const unstable_cache: vitest.Mock<any, any>;
+declare const unstable_noStore: vitest.Mock<any, any>;
 declare const cacheExports: {
-    unstable_cache: typeof unstable_cache;
+    unstable_cache: vitest.Mock<any, any>;
     revalidateTag: vitest.Mock<any, any>;
     revalidatePath: vitest.Mock<any, any>;
-    unstable_noStore: typeof unstable_noStore;
+    unstable_noStore: vitest.Mock<any, any>;
 };
 
-export { cacheExports as default, revalidatePath, revalidateTag };
+export { cacheExports as default, revalidatePath, revalidateTag, unstable_cache, unstable_noStore };

package/dist/plugins/next-mocks/alias/cache/index.js

@@ -1,12 +1,10 @@
 import { fn } from '@storybook/test';
-import { unstable_cache } from 'next/dist/server/web/spec-extension/unstable-cache.js';
-export { unstable_cache } from 'next/dist/server/web/spec-extension/unstable-cache.js';
-import { unstable_noStore } from 'next/dist/server/web/spec-extension/unstable-no-store.js';
-export { unstable_noStore } from 'next/dist/server/web/spec-extension/unstable-no-store.js';
 
 // src/plugins/next-mocks/alias/cache/index.ts
 var revalidatePath = fn().mockName("next/cache::revalidatePath");
 var revalidateTag = fn().mockName("next/cache::revalidateTag");
+var unstable_cache = fn().mockName("next/cache::unstable_cache").mockImplementation((cb) => cb);
+var unstable_noStore = fn().mockName("next/cache::unstable_noStore");
 var cacheExports = {
   unstable_cache,
   revalidateTag,
@@ -15,4 +13,4 @@ var cacheExports = {
 };
 var cache_default = cacheExports;
 
-export { cache_default as default, revalidatePath, revalidateTag };
+export { cache_default as default, revalidatePath, revalidateTag, unstable_cache, unstable_noStore };

package/dist/plugins/next-mocks/alias/dynamic/index.cjs

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Loadable = require('next/dist/shared/lib/loadable.shared-runtime.js');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Loadable__default = /*#__PURE__*/_interopDefault(Loadable);
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/plugins/next-mocks/alias/dynamic/index.tsx
+function convertModule(mod) {
+  return { default: mod?.default || mod };
+}
+function noSSR() {
+  throw new Error("noSSR is not implemented in Storybook");
+}
+function dynamic(dynamicOptions, options) {
+  const loadableFn = Loadable__default.default;
+  if (options?.ssr === false) {
+    delete options.ssr;
+  }
+  let loadableOptions = {
+    // A loading component is not required, so we default it
+    loading: ({ error, isLoading, pastDelay }) => {
+      if (!pastDelay) return null;
+      if (process.env.NODE_ENV !== "production") {
+        if (isLoading) {
+          return null;
+        }
+        if (error) {
+          return /* @__PURE__ */ React__default.default.createElement("p", null, error.message, /* @__PURE__ */ React__default.default.createElement("br", null), error.stack);
+        }
+      }
+      return null;
+    }
+  };
+  if (dynamicOptions instanceof Promise) {
+    loadableOptions.loader = () => dynamicOptions;
+  } else if (typeof dynamicOptions === "function") {
+    loadableOptions.loader = dynamicOptions;
+  } else if (typeof dynamicOptions === "object") {
+    loadableOptions = { ...loadableOptions, ...dynamicOptions };
+  }
+  loadableOptions = { ...loadableOptions, ...options };
+  const loaderFn = loadableOptions.loader;
+  const loader = () => loaderFn != null ? loaderFn().then(convertModule) : Promise.resolve(convertModule(() => null));
+  if (loadableOptions.loadableGenerated) {
+    loadableOptions = {
+      ...loadableOptions,
+      ...loadableOptions.loadableGenerated
+    };
+    delete loadableOptions.loadableGenerated;
+  }
+  return loadableFn({ ...loadableOptions, loader });
+}
+
+exports.default = dynamic;
+exports.noSSR = noSSR;

package/dist/plugins/next-mocks/alias/dynamic/index.d.cts

@@ -0,0 +1,37 @@
+import React__default, { JSX } from 'react';
+
+type ComponentModule<P = Record<string, unknown>> = {
+    default: React__default.ComponentType<P>;
+};
+declare type LoaderComponent<P = Record<string, unknown>> = Promise<React__default.ComponentType<P> | ComponentModule<P>>;
+declare type Loader<P = Record<string, unknown>> = (() => LoaderComponent<P>) | LoaderComponent<P>;
+type LoaderMap = {
+    [module: string]: () => Loader<unknown>;
+};
+type LoadableGeneratedOptions = {
+    webpack?(): unknown;
+    modules?(): LoaderMap;
+};
+type DynamicOptionsLoadingProps = {
+    error?: Error | null;
+    isLoading?: boolean;
+    pastDelay?: boolean;
+    retry?: () => void;
+    timedOut?: boolean;
+};
+type DynamicOptions<P = Record<string, unknown>> = LoadableGeneratedOptions & {
+    loading?: (loadingProps: DynamicOptionsLoadingProps) => JSX.Element | null;
+    loader?: Loader<P> | LoaderMap;
+    loadableGenerated?: LoadableGeneratedOptions;
+    ssr?: boolean;
+};
+declare function noSSR<P = Record<string, unknown>>(): React__default.ComponentType<P>;
+/**
+ * This function lets you dynamically import a component.
+ * It uses [React.lazy()](https://react.dev/reference/react/lazy) with [Suspense](https://react.dev/reference/react/Suspense) under the hood.
+ *
+ * Read more: [Next.js Docs: `next/dynamic`](https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#nextdynamic)
+ */
+declare function dynamic<P = Record<string, unknown>>(dynamicOptions: DynamicOptions<P> | Loader<P>, options?: DynamicOptions<P>): React__default.ComponentType<P>;
+
+export { type LoaderComponent, dynamic as default, noSSR };

package/dist/plugins/next-mocks/alias/dynamic/index.d.ts

@@ -0,0 +1,37 @@
+import React__default, { JSX } from 'react';
+
+type ComponentModule<P = Record<string, unknown>> = {
+    default: React__default.ComponentType<P>;
+};
+declare type LoaderComponent<P = Record<string, unknown>> = Promise<React__default.ComponentType<P> | ComponentModule<P>>;
+declare type Loader<P = Record<string, unknown>> = (() => LoaderComponent<P>) | LoaderComponent<P>;
+type LoaderMap = {
+    [module: string]: () => Loader<unknown>;
+};
+type LoadableGeneratedOptions = {
+    webpack?(): unknown;
+    modules?(): LoaderMap;
+};
+type DynamicOptionsLoadingProps = {
+    error?: Error | null;
+    isLoading?: boolean;
+    pastDelay?: boolean;
+    retry?: () => void;
+    timedOut?: boolean;
+};
+type DynamicOptions<P = Record<string, unknown>> = LoadableGeneratedOptions & {
+    loading?: (loadingProps: DynamicOptionsLoadingProps) => JSX.Element | null;
+    loader?: Loader<P> | LoaderMap;
+    loadableGenerated?: LoadableGeneratedOptions;
+    ssr?: boolean;
+};
+declare function noSSR<P = Record<string, unknown>>(): React__default.ComponentType<P>;
+/**
+ * This function lets you dynamically import a component.
+ * It uses [React.lazy()](https://react.dev/reference/react/lazy) with [Suspense](https://react.dev/reference/react/Suspense) under the hood.
+ *
+ * Read more: [Next.js Docs: `next/dynamic`](https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#nextdynamic)
+ */
+declare function dynamic<P = Record<string, unknown>>(dynamicOptions: DynamicOptions<P> | Loader<P>, options?: DynamicOptions<P>): React__default.ComponentType<P>;
+
+export { type LoaderComponent, dynamic as default, noSSR };

package/dist/plugins/next-mocks/alias/dynamic/index.js

@@ -0,0 +1,51 @@
+import Loadable from 'next/dist/shared/lib/loadable.shared-runtime.js';
+import React from 'react';
+
+// src/plugins/next-mocks/alias/dynamic/index.tsx
+function convertModule(mod) {
+  return { default: mod?.default || mod };
+}
+function noSSR() {
+  throw new Error("noSSR is not implemented in Storybook");
+}
+function dynamic(dynamicOptions, options) {
+  const loadableFn = Loadable;
+  if (options?.ssr === false) {
+    delete options.ssr;
+  }
+  let loadableOptions = {
+    // A loading component is not required, so we default it
+    loading: ({ error, isLoading, pastDelay }) => {
+      if (!pastDelay) return null;
+      if (process.env.NODE_ENV !== "production") {
+        if (isLoading) {
+          return null;
+        }
+        if (error) {
+          return /* @__PURE__ */ React.createElement("p", null, error.message, /* @__PURE__ */ React.createElement("br", null), error.stack);
+        }
+      }
+      return null;
+    }
+  };
+  if (dynamicOptions instanceof Promise) {
+    loadableOptions.loader = () => dynamicOptions;
+  } else if (typeof dynamicOptions === "function") {
+    loadableOptions.loader = dynamicOptions;
+  } else if (typeof dynamicOptions === "object") {
+    loadableOptions = { ...loadableOptions, ...dynamicOptions };
+  }
+  loadableOptions = { ...loadableOptions, ...options };
+  const loaderFn = loadableOptions.loader;
+  const loader = () => loaderFn != null ? loaderFn().then(convertModule) : Promise.resolve(convertModule(() => null));
+  if (loadableOptions.loadableGenerated) {
+    loadableOptions = {
+      ...loadableOptions,
+      ...loadableOptions.loadableGenerated
+    };
+    delete loadableOptions.loadableGenerated;
+  }
+  return loadableFn({ ...loadableOptions, loader });
+}
+
+export { dynamic as default, noSSR };

package/dist/plugins/next-mocks/alias/navigation/index.d.cts

@@ -1,4 +1,4 @@
-import * as react from 'react';
+import * as React from 'react';
 import * as next_dist_shared_lib_app_router_context_shared_runtime from 'next/dist/shared/lib/app-router-context.shared-runtime';
 import { Mock } from '@storybook/test';
 import * as actual from 'next/dist/client/components/navigation.js';
@@ -28,7 +28,7 @@ declare const usePathname: Mock<[], string>;
 declare const useSelectedLayoutSegment: Mock<[parallelRouteKey?: string | undefined], string | null>;
 declare const useSelectedLayoutSegments: Mock<[parallelRouteKey?: string | undefined], string[]>;
 declare const useRouter: Mock<[], next_dist_shared_lib_app_router_context_shared_runtime.AppRouterInstance>;
-declare const useServerInsertedHTML: Mock<[callback: () => react.ReactNode], void>;
+declare const useServerInsertedHTML: Mock<[callback: () => React.ReactNode], void>;
 declare const notFound: Mock<[], never>;
 interface Params {
     [key: string]: string | string[];

package/dist/plugins/next-mocks/alias/navigation/index.d.ts

@@ -1,4 +1,4 @@
-import * as react from 'react';
+import * as React from 'react';
 import * as next_dist_shared_lib_app_router_context_shared_runtime from 'next/dist/shared/lib/app-router-context.shared-runtime';
 import { Mock } from '@storybook/test';
 import * as actual from 'next/dist/client/components/navigation.js';
@@ -28,7 +28,7 @@ declare const usePathname: Mock<[], string>;
 declare const useSelectedLayoutSegment: Mock<[parallelRouteKey?: string | undefined], string | null>;
 declare const useSelectedLayoutSegments: Mock<[parallelRouteKey?: string | undefined], string[]>;
 declare const useRouter: Mock<[], next_dist_shared_lib_app_router_context_shared_runtime.AppRouterInstance>;
-declare const useServerInsertedHTML: Mock<[callback: () => react.ReactNode], void>;
+declare const useServerInsertedHTML: Mock<[callback: () => React.ReactNode], void>;
 declare const notFound: Mock<[], never>;
 interface Params {
     [key: string]: string | string[];

package/dist/plugins/next-mocks/alias/router/index.d.cts

@@ -1,4 +1,4 @@
-import * as react from 'react';
+import * as React from 'react';
 import * as next_dist_client_with_router from 'next/dist/client/with-router';
 import * as next_types from 'next/types';
 import { Mock } from '@storybook/test';
@@ -40,6 +40,6 @@ declare const getRouter: () => {
 };
 
 declare const useRouter: Mock<[], originalRouter.NextRouter>;
-declare const withRouter: Mock<[ComposedComponent: next_types.NextComponentType<next_types.NextPageContext, any, next_dist_client_with_router.WithRouterProps>], react.ComponentType<next_dist_client_with_router.ExcludeRouterProps<next_dist_client_with_router.WithRouterProps>>>;
+declare const withRouter: Mock<[ComposedComponent: next_types.NextComponentType<next_types.NextPageContext, any, next_dist_client_with_router.WithRouterProps>], React.ComponentType<next_dist_client_with_router.ExcludeRouterProps<next_dist_client_with_router.WithRouterProps>>>;
 
 export { createRouter, getRouter, useRouter, withRouter };

package/dist/plugins/next-mocks/alias/router/index.d.ts

@@ -1,4 +1,4 @@
-import * as react from 'react';
+import * as React from 'react';
 import * as next_dist_client_with_router from 'next/dist/client/with-router';
 import * as next_types from 'next/types';
 import { Mock } from '@storybook/test';
@@ -40,6 +40,6 @@ declare const getRouter: () => {
 };
 
 declare const useRouter: Mock<[], originalRouter.NextRouter>;
-declare const withRouter: Mock<[ComposedComponent: next_types.NextComponentType<next_types.NextPageContext, any, next_dist_client_with_router.WithRouterProps>], react.ComponentType<next_dist_client_with_router.ExcludeRouterProps<next_dist_client_with_router.WithRouterProps>>>;
+declare const withRouter: Mock<[ComposedComponent: next_types.NextComponentType<next_types.NextPageContext, any, next_dist_client_with_router.WithRouterProps>], React.ComponentType<next_dist_client_with_router.ExcludeRouterProps<next_dist_client_with_router.WithRouterProps>>>;
 
 export { createRouter, getRouter, useRouter, withRouter };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-storybook-nextjs",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "",
   "keywords": [
     "vite-plugin",
@@ -28,6 +28,7 @@
     "./browser/mocks/headers": "./dist/plugins/next-mocks/alias/headers/index.js",
     "./browser/mocks/router": "./dist/plugins/next-mocks/alias/router/index.js",
     "./browser/mocks/server-only": "./dist/plugins/next-mocks/alias/rsc/server-only.js",
+    "./browser/mocks/dynamic": "./dist/plugins/next-mocks/alias/dynamic/index.js",
     "./browser/mocks/image": "./dist/plugins/next-image/alias/next-image.js",
     "./browser/mocks/legacy-image": "./dist/plugins/next-image/alias/next-legacy-image.js",
     "./browser/mocks/image-default-loader": "./dist/plugins/next-image/alias/image-default-loader.js",
@@ -37,6 +38,7 @@
     "./node/mocks/headers": "./dist/plugins/next-mocks/alias/headers/index.cjs",
     "./node/mocks/router": "./dist/plugins/next-mocks/alias/router/index.cjs",
     "./node/mocks/server-only": "./dist/plugins/next-mocks/alias/rsc/server-only.cjs",
+    "./node/mocks/dynamic": "./dist/plugins/next-mocks/alias/dynamic/index.cjs",
     "./node/mocks/image": "./dist/plugins/next-image/alias/next-image.cjs",
     "./node/mocks/legacy-image": "./dist/plugins/next-image/alias/next-legacy-image.cjs",
     "./node/mocks/image-default-loader": "./dist/plugins/next-image/alias/image-default-loader.cjs",
@@ -77,6 +79,7 @@
   "dependencies": {
     "@next/env": "^14.2.5",
     "image-size": "^1.1.1",
+    "magic-string": "^0.30.11",
     "module-alias": "^2.2.3",
     "ts-dedent": "^2.2.0"
   },