Skip to content

[Bug]: next-image mock in nextjs/vite produces invalid paths on windows builds #32355

@brettpostin

Description

@brettpostin

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

  1. Go to above link
  2. 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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions