-
-
Notifications
You must be signed in to change notification settings - Fork 9.7k
Open
storybookjs/vite-plugin-storybook-nextjs
#57Description
Describe the bug
In Storybook’s Next.js + Vite setup, the next/image
component is being mocked by a virtual module (virtual:next-image
).
On Windows, an image import such as this:
import ContextImage from './assets/context.png';
... ends up like this (notice the backslashes):
virtual:next-image?imagePath=.\src\stories\assets\context.png
When Rollup/Vite try to resolve it as a file, it replaces the backslashes resulting in the following error:
[vite]: Rollup failed to resolve import "D:Devstorybook-next-image-bugsrcstoriesassetscontext.png?ignore" from "virtual:next-image?imagePath=.\src\stories\assets\context.png".
This only happens on Windows machines.
Reproduction link
https://github.com/brettpostin/storybook-next-image-bug
Reproduction steps
- Go to above link
- Run "build-storybook" task
System
System:
OS: Windows 11 10.0.26100
CPU: (22) x64 Intel(R) Core(TM) Ultra 9 185H
Binaries:
Node: 22.15.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
npm: 11.4.1 - C:\Program Files\nodejs\npm.CMD
pnpm: 10.12.1 - ~\AppData\Local\pnpm\pnpm.CMD <----- active
Browsers:
Edge: Chromium (139.0.3405.111)
npmPackages:
@storybook/addon-a11y: 9.1.3 => 9.1.3
@storybook/addon-docs: 9.1.3 => 9.1.3
@storybook/addon-vitest: 9.1.3 => 9.1.3
@storybook/nextjs-vite: ^9.1.3 => 9.1.3
eslint-plugin-storybook: 9.1.3 => 9.1.3
storybook: 9.1.3 => 9.1.3
Additional context
No response
dosubot