Registry / testing / vite-plugin-storybook-nextjs

vite-plugin-storybook-nextjs

library3.2.4jsnpmunverified

Vite plugin enabling Next.js features in Vite environments, primarily for Storybook portable stories in Vitest. Current stable version 3.2.4, actively maintained by Storybook team. Released monthly with patch and minor updates. Key differentiator: bridges Next.js-specific APIs (image optimization, SWC compilation, routing) with Vite-based testing/Storybook workflows. Supports Next.js 14-16, Storybook 9-10, Vite 5-8. Includes TypeScript types. Based on official Storybook integration.

testing web-framework

npm install vite-plugin-storybook-nextjs

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-STORYB

vite-plugin-storybook-nextjs

testingjavascriptv3.2.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import next from 'vite-plugin-storybook-nextjs'

✗ import { next } from 'vite-plugin-storybook-nextjs'

Default export is the plugin function; named export not available.

storybookNextJsPlugin

✓ import { storybookNextJsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin'

✗ import { storybookNextJsPlugin } from 'vite-plugin-storybook-nextjs'

Re-exported from the experimental Next.js Vite framework package, not from this plugin directly.

Configures Vitest to use the Next.js plugin, enabling testing of Next.js components in Vite.

// vitest.config.ts import { defineConfig } from 'vite'; import next from 'vite-plugin-storybook-nextjs'; export default defineConfig({ plugins: [next()], });

Debug

Known issues

breakingVite 8 drops support for vite-tsconfig-paths injection; use Vite's native resolve.tsconfigPaths

fix

Enable `resolve.tsconfigPaths: true` in Vite config.

affects: >=3.2.3

gotchaSVG imports with `?react` query may conflict with vite-plugin-svgr if include/exclude patterns not configured

fix

Set `image.exclude: ['**/*.svg?react']` in plugin options.

affects: *

deprecatedUsage with `@storybook/experimental-nextjs-vite` is replaced by direct plugin usage

fix

Use `vite-plugin-storybook-nextjs` directly in Vitest config; the experimental package re-exports it.

affects: >=3.0.0

Errors

Common errors & fixes

Cannot find module 'next/router' or its corresponding type declarations

Vite environment missing Next.js routing types

fix

Install `@types/node` and ensure `tsconfig.json` includes `"types": ["node"]`.

Module not found: Can't resolve 'next/image'

Plugin not properly initialized or Next.js peer dependency missing

fix

Check peer deps: next >=14.1.0. Verify plugin is added to Vite config as `next()`.

Upgrade

Version history

3.2.4latest on npm

Audit

Dependencies

nextrequiredPeer dependency: provides Next.js runtime APIs (image, router, etc.)

storybookrequiredPeer dependency: required for Storybook integration and portable stories

viterequiredPeer dependency: plugin runs in Vite's plugin system

Agent activity

18 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/storybookjs/vite-plugin-storybook-nextjs ↗

packagehttps://www.npmjs.com/package/vite-plugin-storybook-nextjs ↗

homepagehttps://storybook.js.org ↗