Addon Test: Prompt switch to experimental-nextjs-vite

code/addons/test/src/postinstall.ts

@@ -2,13 +2,17 @@ import { existsSync } from 'node:fs';
 import * as fs from 'node:fs/promises';
 import { writeFile } from 'node:fs/promises';
 
+import type { types } from 'storybook/internal/babel';
+import { traverse } from 'storybook/internal/babel';
 import {
   JsPackageManagerFactory,
   extractProperFrameworkName,
   loadAllPresets,
   loadMainConfig,
+  serverResolve,
   validateFrameworkName,
 } from 'storybook/internal/common';
+import { readConfig, writeConfig } from 'storybook/internal/csf-tools';
 import { colors, logger } from 'storybook/internal/node-logger';
 
 // eslint-disable-next-line depend/ban-dependencies
@@ -53,6 +57,56 @@ export default async function postInstall(options: PostinstallOptions) {
   // if Vitest is installed, we use the same version to keep consistency across Vitest packages
   const vitestVersionToInstall = vitestVersionSpecifier ?? 'latest';
 
+  const mainJsPath = serverResolve(resolve(options.configDir, 'main')) as string;
+  const config = await readConfig(mainJsPath);
+
+  const hasCustomWebpackConfig = !!config.getFieldNode(['webpackFinal']);
+
+  if (info.frameworkPackageName === '@storybook/nextjs' && !hasCustomWebpackConfig) {
+    const out = process.env.CI
+      ? {
+          migrateToExperimentalNextjsVite: true,
+        }
+      : await prompts({
+          type: 'confirm',
+          name: 'migrateToExperimentalNextjsVite',
+          message: dedent`
+        The addon requires the use of @storybook/experimental-nextjs-vite to work with Next.js.
+        https://storybook.js.org/docs/writing-tests/test-addon#install-and-set-up
+
+        Do you want to migrate?
+      `,
+          initial: true,
+        });
+
+    if (out.migrateToExperimentalNextjsVite) {
+      await packageManager.addDependencies({ installAsDevDependencies: true }, [
+        '@storybook/experimental-nextjs-vite',
+      ]);
+
+      await packageManager.removeDependencies({}, ['@storybook/next']);
+
+      const mainJsPath = serverResolve(resolve(options.configDir, 'main')) as string;
+      const config = await readConfig(mainJsPath);
+
+      const node = config.getFieldNode(['framework']);
+
+      traverse(node, {
+        StringLiteral(path) {
+          if (path.node.value === '@storybook/next') {
+            path.node.value = '@storybook/experimental-nextjs-vite';
+          }
+        },
+      });
+
+      config.setFieldNode(['framework'], node as types.Expression);
+
+      await writeConfig(config, mainJsPath);
+
+      info.frameworkPackageName = '@storybook/experimental-nextjs-vite';
+    }
+  }
+
   const annotationsImport = [
     '@storybook/nextjs',
     '@storybook/experimental-nextjs-vite',
@@ -72,6 +126,10 @@ export default async function postInstall(options: PostinstallOptions) {
   const prerequisiteCheck = async () => {
     const reasons = [];
 
+    if (hasCustomWebpackConfig) {
+      reasons.push('• The addon can not be used with a custom Webpack configuration.');
+    }
+
     if (
       info.frameworkPackageName !== '@storybook/nextjs' &&
       info.builderPackageName !== '@storybook/builder-vite'