@@ -14,3 +14,20 @@ export const SUPPORTED_FRAMEWORKS: readonly SupportedFramework[] = [
   SupportedFramework.WEB_COMPONENTS_VITE,
   SupportedFramework.TANSTACK_REACT,
 ];
+
+/**
+ * The `@types/node` optional peer range declared by the latest Vitest major (Vitest 5.0.0 dropped
+ * `^20`). A project whose own `@types/node` range does not intersect this range (e.g.
+ * create-next-app scaffolds pinning `@types/node@^20`) hard-fails npm's peer resolution for an
+ * unpinned Vitest install, so those projects get VITEST_FALLBACK_SPECIFIER instead. Keep this in
+ * sync with the latest Vitest major's peerDependencies.
+ */
+export const LATEST_VITEST_TYPES_NODE_PEER = '^22.0.0 || >=24.0.0';
+
+/**
+ * Vitest range installed when the project does not declare its own Vitest version AND its
+ * `@types/node` range conflicts with LATEST_VITEST_TYPES_NODE_PEER. `^4` is the family
+ * @storybook/addon-vitest's devDependencies are tested against. Keep this in sync with the
+ * addon's supported majors.
+ */
+export const VITEST_FALLBACK_SPECIFIER = '^4';
@@ -12,7 +12,7 @@ import * as find from 'empathic/find';
 import type { ResultPromise } from 'execa';
 
 import { SupportedBuilder, SupportedFramework } from '../types/index.ts';
-import { AddonVitestService } from './AddonVitestService.ts';
+import { AddonVitestService, canInstallLatestVitest } from './AddonVitestService.ts';
 
 vi.mock('node:fs/promises', { spy: true });
 vi.mock('node:os', { spy: true });
@@ -61,11 +61,12 @@ describe('AddonVitestService', () => {
     it('should collect base packages when not installed', async () => {
       const deps = await service.collectDependencies();
 
-      expect(deps).toContain('vitest');
-      // The addon always installs the Vitest 4 browser provider
-      expect(deps).toContain('@vitest/browser-playwright');
+      // No vitest version is declared and no @types/node conflict exists, so the fresh install
+      // resolves latest Vitest
+      expect(deps).toContain('vitest@latest');
+      expect(deps).toContain('@vitest/browser-playwright@latest');
       expect(deps).toContain('playwright');
-      expect(deps).toContain('@vitest/coverage-v8');
+      expect(deps).toContain('@vitest/coverage-v8@latest');
     });
 
     it('should not include base packages if already installed', async () => {
@@ -92,11 +93,10 @@ describe('AddonVitestService', () => {
       const deps = await service.collectDependencies();
 
       // Should only contain base packages, not framework-specific ones
-      expect(deps).toContain('vitest');
-      // The addon always installs the Vitest 4 browser provider
-      expect(deps).toContain('@vitest/browser-playwright');
+      expect(deps).toContain('vitest@latest');
+      expect(deps).toContain('@vitest/browser-playwright@latest');
       expect(deps).toContain('playwright');
-      expect(deps).toContain('@vitest/coverage-v8');
+      expect(deps).toContain('@vitest/coverage-v8@latest');
       expect(deps.every((d) => !d.includes('nextjs-vite'))).toBe(true);
     });
 
@@ -143,14 +143,88 @@ describe('AddonVitestService', () => {
       );
     });
 
-    it('does not pin anything when the vitest version cannot be resolved', async () => {
+    it('falls back to the Vitest 4 family when no vitest is declared and @types/node conflicts', async () => {
       vi.mocked(mockPackageManager.getDeclaredVersionSpecifier).mockResolvedValue(null);
+      vi.mocked(mockPackageManager.getAllDependencies).mockReturnValue({
+        '@types/node': '^20', // e.g. create-next-app scaffolds
+      });
+
+      const deps = await service.collectDependencies();
+
+      expect(deps).toContain('vitest@^4');
+      expect(deps).toContain('@vitest/browser-playwright@^4');
+      expect(deps).toContain('@vitest/coverage-v8@^4');
+      expect(deps).toContain('playwright'); // playwright is versioned independently
+      // The fallback flows through the same alignment path as a declared specifier, so the
+      // package manager applies its own convention (e.g. pnpm catalog registration).
+      expect(mockPackageManager.applyVersionToRelatedPackages).toHaveBeenCalledWith(
+        ['vitest', '@vitest/browser-playwright', '@vitest/coverage-v8'],
+        '^4',
+        'vitest'
+      );
+    });
+
+    it('falls back instead of blowing up collectDependencies on a pnpm catalog @types/node', async () => {
+      vi.mocked(mockPackageManager.getDeclaredVersionSpecifier).mockResolvedValue(null);
+      vi.mocked(mockPackageManager.getAllDependencies).mockReturnValue({
+        '@types/node': 'catalog:', // pnpm catalog reference; unparseable as a semver range
+      });
+
+      const deps = await service.collectDependencies();
+
+      expect(deps).toContain('vitest@^4');
+      expect(deps).toContain('@vitest/browser-playwright@^4');
+    });
+
+    it('installs latest Vitest when no vitest is declared and no peer conflict exists', async () => {
+      vi.mocked(mockPackageManager.getDeclaredVersionSpecifier).mockResolvedValue(null);
+      vi.mocked(mockPackageManager.getAllDependencies).mockReturnValue({});
 
       const deps = await service.collectDependencies();
 
-      expect(deps).toContain('@vitest/coverage-v8');
-      expect(deps.every((d) => !d.includes('@catalog:') && !d.includes('@3.'))).toBe(true);
-      expect(mockPackageManager.applyVersionToRelatedPackages).not.toHaveBeenCalled();
+      expect(deps).toContain('vitest@latest');
+      expect(deps).toContain('@vitest/browser-playwright@latest');
+      expect(deps).toContain('@vitest/coverage-v8@latest');
+      expect(deps).toContain('playwright');
+      expect(mockPackageManager.applyVersionToRelatedPackages).toHaveBeenCalledWith(
+        ['vitest', '@vitest/browser-playwright', '@vitest/coverage-v8'],
+        'latest',
+        'vitest'
+      );
+    });
+
+    it('installs latest Vitest when the project @types/node range satisfies the latest peer', async () => {
+      vi.mocked(mockPackageManager.getDeclaredVersionSpecifier).mockResolvedValue(null);
+      vi.mocked(mockPackageManager.getAllDependencies).mockReturnValue({
+        '@types/node': '^22',
+      });
+
+      const deps = await service.collectDependencies();
+
+      expect(deps).toContain('vitest@latest');
+    });
+  });
+
+  describe('canInstallLatestVitest', () => {
+    it('allows latest when @types/node is absent or unversioned', () => {
+      expect(canInstallLatestVitest({})).toBe(true);
+      expect(canInstallLatestVitest({ '@types/node': '*' })).toBe(true);
+    });
+
+    it('blocks latest when the @types/node range cannot satisfy the latest peer range', () => {
+      expect(canInstallLatestVitest({ '@types/node': '^20' })).toBe(false);
+      expect(canInstallLatestVitest({ '@types/node': '20.19.0' })).toBe(false);
+    });
+
+    it('allows latest when the @types/node range intersects the latest peer range', () => {
+      expect(canInstallLatestVitest({ '@types/node': '^22' })).toBe(true);
+      expect(canInstallLatestVitest({ '@types/node': '>=20' })).toBe(true);
+    });
+
+    it('falls back instead of throwing on unparseable specifiers like pnpm catalog references', () => {
+      expect(() => canInstallLatestVitest({ '@types/node': 'catalog:' })).not.toThrow();
+      expect(canInstallLatestVitest({ '@types/node': 'catalog:' })).toBe(false);
+      expect(canInstallLatestVitest({ '@types/node': 'workspace:*' })).toBe(false);
     });
   });
 
 
@@ -9,11 +9,15 @@ import { logger, prompt } from 'storybook/internal/node-logger';
 import { ErrorCollector } from 'storybook/internal/telemetry';
 
 import * as find from 'empathic/find';
-import { coerce, minVersion, satisfies, validRange } from 'semver';
+import { coerce, intersects, minVersion, satisfies, validRange } from 'semver';
 import { dedent } from 'ts-dedent';
 
 import { SupportedBuilder, type SupportedFramework } from '../types/index.ts';
-import { SUPPORTED_FRAMEWORKS } from './AddonVitestService.constants.ts';
+import {
+  LATEST_VITEST_TYPES_NODE_PEER,
+  SUPPORTED_FRAMEWORKS,
+  VITEST_FALLBACK_SPECIFIER,
+} from './AddonVitestService.constants.ts';
 
 type Result = {
   compatible: boolean;
@@ -26,6 +30,24 @@ export interface AddonVitestCompatibilityOptions {
   projectRoot?: string;
 }
 
+/**
+ * Whether an unpinned `latest` Vitest install can resolve for this project. The latest Vitest
+ * major declares LATEST_VITEST_TYPES_NODE_PEER as an optional `@types/node` peer; a project whose
+ * own `@types/node` range never intersects that range (e.g. create-next-app scaffolds pinning
+ * `@types/node@^20`) hard-fails npm's peer resolution, so `latest` must be skipped in favor of
+ * VITEST_FALLBACK_SPECIFIER. No declared `@types/node` at all means nothing to conflict with.
+ * Unparseable specifiers (pnpm `catalog:` references) cannot be checked for peer compatibility,
+ * so they also fall back rather than risk an ERESOLVE — or throw on an invalid comparator.
+ */
+export const canInstallLatestVitest = (allDependencies: Record<string, string>): boolean => {
+  const typesNodeRange = allDependencies['@types/node'];
+  if (!typesNodeRange) {
+    return true;
+  }
+  const range = validRange(typesNodeRange);
+  return range ? intersects(range, LATEST_VITEST_TYPES_NODE_PEER) : false;
+};
+
 /**
  * Centralized service for @storybook/addon-vitest dependency collection and compatibility
  * validation
@@ -68,7 +90,13 @@ export class AddonVitestService {
 
     // Resolve the Vitest version/range to keep the derived `@vitest/*` packages on a compatible
     // major. The package manager owns the resolution (e.g. reading a pnpm `catalog:` reference).
-    const vitestVersionSpecifier = await this.packageManager.getDeclaredVersionSpecifier('vitest');
+    // Projects declaring no Vitest at all install `latest`, unless the project's `@types/node`
+    // range conflicts with the latest Vitest major's `@types/node` peer (e.g. create-next-app's
+    // `@types/node@^20` vs. Vitest 5's `^22.0.0 || >=24.0.0`) — those fall back to the Vitest 4
+    // family, which is what the addon's devDependencies are tested against.
+    const vitestVersionSpecifier =
+      (await this.packageManager.getDeclaredVersionSpecifier('vitest')) ??
+      (canInstallLatestVitest(allDeps) ? 'latest' : VITEST_FALLBACK_SPECIFIER);
 
     // only install these dependencies if they are not already installed
     const basePackages = ['vitest', 'playwright', '@vitest/browser-playwright'];
@@ -90,10 +118,6 @@ export class AddonVitestService {
       dependencies.push('@vitest/coverage-v8');
     }
 
-    if (!vitestVersionSpecifier) {
-      return dependencies;
-    }
-
     // Pin the vitest-related packages to the resolved vitest version, letting the package manager
     // apply its own convention (e.g. registering pnpm catalog entries). Playwright is versioned
     // independently, so it is left untouched.
 
@@ -1,7 +1,11 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
+import { logger, prompt } from 'storybook/internal/node-logger';
+
 import { JsPackageManager } from './JsPackageManager.ts';
 
+vi.mock('storybook/internal/node-logger', { spy: true });
+
 const mockVersions = vi.hoisted(() => ({
   '@storybook/react': '8.3.0',
 }));
@@ -88,4 +92,73 @@ describe('JsPackageManager', () => {
       expect(result).toEqual(['some-other-package']);
     });
   });
+
+  describe('installDependencies method', () => {
+    it('propagates a truncated npm stderr tail into the thrown error', async () => {
+      const stderr = [
+        'npm error code ERESOLVE',
+        ...Array.from({ length: 30 }, (_, i) => `npm error while resolving line ${i}`),
+        'npm error Could not resolve dependency: vitest@5.0.0',
+      ].join('\n');
+      vi.mocked(prompt.executeTaskWithSpinner).mockRejectedValue(
+        Object.assign(new Error('Command failed: npm install'), { stderr })
+      );
+
+      const error = await jsPackageManager.installDependencies().then(
+        () => null,
+        (e) => e
+      );
+
+      // The tail (last 15 lines) is folded into the error message...
+      expect(error.message).toContain('Could not resolve dependency: vitest@5.0.0');
+      // ...truncated: the head of a long stderr does not leak into the message...
+      expect(error.message).not.toContain('npm error code ERESOLVE');
+      // ...and is printed so failures behind the spinner name themselves.
+      expect(vi.mocked(logger.error)).toHaveBeenCalledWith(expect.stringContaining('vitest@5.0.0'));
+    });
+
+    it('logs and folds a short stderr tail into the thrown error', async () => {
+      const stderr = [
+        'npm error code ERESOLVE',
+        'npm error Could not resolve dependency: vitest@5.0.0',
+      ].join('\n');
+      vi.mocked(prompt.executeTaskWithSpinner).mockRejectedValue(
+        Object.assign(new Error('Command failed: npm install'), { stderr })
+      );
+
+      const error = await jsPackageManager.installDependencies().then(
+        () => null,
+        (e) => e
+      );
+
+      // Short outputs are surfaced too — not silently dropped because they fit the tail window.
+      expect(vi.mocked(logger.error)).toHaveBeenCalledWith(expect.stringContaining('ERESOLVE'));
+      expect(error.message).toContain('Could not resolve dependency: vitest@5.0.0');
+    });
+
+    it('does not duplicate the tail when the error message already contains it', async () => {
+      // A plain Error with no structured stderr: getErrorLogs falls back to the message itself,
+      // so the tail equals the message and appending would duplicate it.
+      const message =
+        'Command failed: npm install\nnpm error code ERESOLVE\nnpm error Could not resolve dependency: vitest@5.0.0';
+      vi.mocked(prompt.executeTaskWithSpinner).mockRejectedValue(new Error(message));
+
+      const error = await jsPackageManager.installDependencies().then(
+        () => null,
+        (e) => e
+      );
+
+      // The tail is still printed, but not appended a second time.
+      expect(vi.mocked(logger.error)).toHaveBeenCalledWith(expect.stringContaining('ERESOLVE'));
+      expect(error.message).toBe(message);
+    });
+
+    it('resolves and clears the installed version cache on success', async () => {
+      const clearSpy = vi.spyOn(jsPackageManager, 'clearInstalledVersionCache');
+      vi.mocked(prompt.executeTaskWithSpinner).mockResolvedValue(undefined);
+
+      await expect(jsPackageManager.installDependencies()).resolves.toBeUndefined();
+      expect(clearSpy).toHaveBeenCalled();
+    });
+  });
 });
@@ -20,6 +20,7 @@ import { findFilesUp, getProjectRoot } from '../utils/paths.ts';
 import storybookPackagesVersions from '../versions.ts';
 import type { PackageJson, PackageJsonWithDepsAndDevDeps } from './PackageJson.ts';
 import type { InstallationMetadata } from './types.ts';
+import { getInstallErrorTail } from './util.ts';
 import { getVitePlusVersions } from './vite-plus-versions.ts';
 
 export enum PackageManagerName {
@@ -185,12 +186,26 @@ export abstract class JsPackageManager {
   }
 
   async installDependencies(options?: { force?: boolean }) {
-    await prompt.executeTaskWithSpinner(() => this.runInstall(options), {
-      id: 'install-dependencies',
-      intro: 'Installing dependencies...',
-      error: 'Installation of dependencies failed!',
-      success: 'Dependencies installed',
-    });
+    try {
+      await prompt.executeTaskWithSpinner(() => this.runInstall(options), {
+        id: 'install-dependencies',
+        intro: 'Installing dependencies...',
+        error: 'Installation of dependencies failed!',
+        success: 'Dependencies installed',
+      });
+    } catch (error) {
+      // The spinner only shows a generic message, and callers like the init flow continue without
+      // printing the thrown error. Surface the captured output tail so package-manager errors
+      // (e.g. an npm ERESOLVE) name themselves instead of surfacing later as a missing binary.
+      const tail = getInstallErrorTail(error);
+      if (tail) {
+        logger.error(tail);
+        if (error instanceof Error && !error.message.includes(tail)) {
+          error.message = `${error.message}\n\n${tail}`;
+        }
+      }
+      throw error;
+    }
 
     // Clear installed version cache after installation
     this.clearInstalledVersionCache();
 
@@ -206,3 +206,22 @@ export const getErrorLogs = (error: unknown): string => {
 
   return String(error);
 };
+
+/** Number of trailing output lines surfaced when a package install fails. */
+export const INSTALL_ERROR_TAIL_LINES = 15;
+
+/**
+ * The tail of a failed package install's captured output (see `getErrorLogs`). Output longer than
+ * `lines` lines is truncated to the last `lines` — package managers print their own error summary
+ * (e.g. an npm ERESOLVE explanation) at the end. Returns '' only when there is no captured output
+ * at all; short outputs are returned in full so they are still logged and folded into the error.
+ */
+export const getInstallErrorTail = (error: unknown, lines: number = INSTALL_ERROR_TAIL_LINES) => {
+  const output = getErrorLogs(error).trimEnd();
+  if (!output) {
+    return '';
+  }
+
+  const allLines = output.split('\n');
+  return allLines.slice(-lines).join('\n').trim();
+};