Nextjs-Vite: Re-export vite-plugin-storybook-nextjs

code/addons/vitest/src/postinstall.ts

@@ -64,10 +64,19 @@ export default async function postInstall(options: PostinstallOptions) {
     logger.info(
       dedent`
         We detected that you're using Next.js.
-        We will configure the vite-plugin-storybook-nextjs plugin to allow you to run tests in Vitest.
+        We will configure the @storybook/experimental-nextjs-vite/vite-plugin to allow you to run tests in Vitest.
       `
     );
-    packages.push('vite-plugin-storybook-nextjs@latest');
+
+    try {
+      const storybookVersion = await packageManager.getInstalledVersion('storybook');
+
+      packages.push(`@storybook/experimental-nextjs-vite@^${storybookVersion}`);
+    } catch (e) {
+      console.error(
+        'Failed to install @storybook/experimental-nextjs-vite. Please install it manually'
+      );
+    }
   }
 
   logger.info(c.bold('Installing packages...'));
@@ -189,8 +198,9 @@ const getVitestPluginInfo = (framework: string) => {
   let frameworkPluginCall = '';
 
   if (framework === '@storybook/nextjs') {
-    frameworkPluginImport = "import vitePluginNext from 'vite-plugin-storybook-nextjs'";
-    frameworkPluginCall = 'vitePluginNext()';
+    frameworkPluginImport =
+      "import { storybookNextJsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin'";
+    frameworkPluginCall = 'storybookNextJsPlugin()';
   }
 
   if (framework === '@storybook/sveltekit') {

code/frameworks/experimental-nextjs-vite/package.json

@@ -53,6 +53,11 @@
       "import": "./dist/export-mocks/router/index.mjs",
       "require": "./dist/export-mocks/router/index.js"
     },
+    "./vite-plugin": {
+      "types": "./dist/vite-plugin/index.d.ts",
+      "import": "./dist/vite-plugin/index.js",
+      "require": "./dist/vite-plugin/index.cjs"
+    },
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -93,21 +98,20 @@
     "@storybook/builder-vite": "workspace:*",
     "@storybook/react": "workspace:*",
     "@storybook/test": "workspace:*",
-    "styled-jsx": "5.1.6"
+    "styled-jsx": "5.1.6",
+    "vite-plugin-storybook-nextjs": "^1.0.10"
   },
   "devDependencies": {
     "@types/node": "^18.0.0",
     "next": "^14.2.5",
-    "typescript": "^5.3.2",
-    "vite-plugin-storybook-nextjs": "^1.0.0"
+    "typescript": "^5.3.2"
   },
   "peerDependencies": {
     "next": "^14.1.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "storybook": "workspace:^",
-    "vite": "^5.0.0",
-    "vite-plugin-storybook-nextjs": "^1.0.8"
+    "vite": "^5.0.0"
   },
   "peerDependenciesMeta": {
     "typescript": {
@@ -126,6 +130,7 @@
   "bundler": {
     "entries": [
       "./src/index.ts",
+      "./src/vite-plugin/index.ts",
       "./src/preset.ts",
       "./src/preview.tsx",
       "./src/export-mocks/cache/index.ts",

code/frameworks/experimental-nextjs-vite/src/index.ts

@@ -1,2 +1,10 @@
+import type vitePluginStorybookNextJs from 'vite-plugin-storybook-nextjs';
+
 export * from './types';
 export * from './portable-stories';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+declare module '@storybook/experimental-nextjs-vite/vite-plugin' {
+  export const storybookNextJsPlugin: typeof vitePluginStorybookNextJs;
+}

code/frameworks/experimental-nextjs-vite/src/preset.ts

@@ -6,7 +6,6 @@ import type { PresetProperty } from 'storybook/internal/types';
 import type { StorybookConfigVite } from '@storybook/builder-vite';
 
 import { dirname, join } from 'path';
-// @ts-expect-error - tsconfig settings have to be moduleResolution=Bundler and module=Preserve
 import vitePluginStorybookNextjs from 'vite-plugin-storybook-nextjs';
 
 import type { FrameworkOptions } from './types';

code/frameworks/experimental-nextjs-vite/src/vite-plugin/index.ts

@@ -0,0 +1,3 @@
+import vitePluginStorybookNextJs from 'vite-plugin-storybook-nextjs';
+
+export const storybookNextJsPlugin = vitePluginStorybookNextJs;

code/lib/cli-storybook/src/sandbox-templates.ts

@@ -216,12 +216,7 @@ const baseTemplates = {
         framework: '@storybook/experimental-nextjs-vite',
         features: { experimentalRSC: true },
       },
-      extraDependencies: [
-        'server-only',
-        'vite-plugin-storybook-nextjs',
-        '@storybook/experimental-nextjs-vite',
-        'vite',
-      ],
+      extraDependencies: ['server-only', '@storybook/experimental-nextjs-vite', 'vite'],
     },
     skipTasks: ['e2e-tests-dev', 'bench'],
   },

code/yarn.lock

@@ -6155,14 +6155,13 @@ __metadata:
     sharp: "npm:^0.33.3"
     styled-jsx: "npm:5.1.6"
     typescript: "npm:^5.3.2"
-    vite-plugin-storybook-nextjs: "npm:^1.0.0"
+    vite-plugin-storybook-nextjs: "npm:^1.0.10"
   peerDependencies:
     next: ^14.1.0
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     storybook: "workspace:^"
     vite: ^5.0.0
-    vite-plugin-storybook-nextjs: ^1.0.8
   dependenciesMeta:
     sharp:
       optional: true
@@ -28374,9 +28373,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite-plugin-storybook-nextjs@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "vite-plugin-storybook-nextjs@npm:1.0.0"
+"vite-plugin-storybook-nextjs@npm:^1.0.10":
+  version: 1.0.10
+  resolution: "vite-plugin-storybook-nextjs@npm:1.0.10"
   dependencies:
     "@next/env": "npm:^14.2.5"
     image-size: "npm:^1.1.1"
@@ -28386,13 +28385,13 @@ __metadata:
     ts-dedent: "npm:^2.2.0"
   peerDependencies:
     "@storybook/test": ^8.3.0-alpha.3
-    next: ^14.2.5
+    next: ^14.1.0
     storybook: ^8.3.0-alpha.3
     vite: ^5.0.0
   dependenciesMeta:
     sharp:
       optional: true
-  checksum: 10c0/6ca17326e0387044d7bfa4373e6ccb64e8bb5bec1f19898ba9b8338c7817d8bea0fb01169adfb623f652fded5e6f59170129f7c8c4d4c3c54ca3764727e5a195
+  checksum: 10c0/e0e373ef94e1761b871b2cc846c205a846901d93c7e61f9d9ee3c69740681e42e6403a7d61109c59f2d98d5829476c3e6d4e9d5a329c4bd51e758b763fa8ea9e
   languageName: node
   linkType: hard
 

docs/api/portable-stories/portable-stories-vitest.mdx

@@ -28,7 +28,7 @@ sidebar:
 
   <If renderer="react">
     <Callout variant="warning">
-      **Using `Next.js`?** You can test your Next.js stories with Vitest by installing and setting up the [`vite-plugin-storybook-nextjs`](https://github.com/storybookjs/vite-plugin-storybook-nextjs) package. 
+      **Using `Next.js`?** You can test your Next.js stories with Vitest by installing and setting up the `@storybook/experimental-nextjs-vite` which re-exports [vite-plugin-storybook-nextjs](https://github.com/storybookjs/vite-plugin-storybook-nextjs) package. 
     </Callout>
   </If>
 

scripts/tasks/sandbox-parts.ts

@@ -369,8 +369,9 @@ const getVitestPluginInfo = (details: TemplateDetails) => {
   const isSveltekit = framework.includes('sveltekit');
 
   if (isNextjs) {
-    frameworkPluginImport = "import vitePluginNext from 'vite-plugin-storybook-nextjs'";
-    frameworkPluginCall = 'vitePluginNext()';
+    frameworkPluginImport =
+      "import { storybookNextJsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin'";
+    frameworkPluginCall = 'storybookNextJsPlugin()';
   }
 
   if (isSveltekit) {

scripts/tasks/sandbox.ts

@@ -98,7 +98,7 @@ export const sandbox: Task = {
       );
 
       if (details.template.expected.framework.includes('nextjs')) {
-        extraDeps.push('vite-plugin-storybook-nextjs', 'jsdom');
+        extraDeps.push('@storybook/experimental-nextjs-vite', 'jsdom');
       }
 
       // if (details.template.expected.renderer === '@storybook/svelte') {