[Bug]: the import path of vite-inject-mocker-entry.js should be relative

[tmkx]

Describe the bug

Storybook artifacts are not necessarily hosted at the root path (for example, we host them on GitHub Pages), so the import path cannot be an absolute path.

Comparison with other assets:

Reproduction link

none

Reproduction steps

1. Use @storybook/react-vite
2. storybook build

System

Storybook Environment Info:

  System:
    OS: macOS 26.0
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.18.0 - ~/.local/share/mise/installs/node/22.18.0/bin/node
    npm: 10.9.3 - ~/.local/share/mise/installs/node/22.18.0/bin/npm
    pnpm: 10.15.1 - ~/.local/share/mise/installs/node/22.18.0/bin/pnpm <----- active
  Browsers:
    Chrome: 140.0.7339.81
    Safari: 26.0
  npmPackages:
    @storybook/addon-docs: ^9.1.5 => 9.1.5 
    @storybook/react: ^9.1.5 => 9.1.5 
    @storybook/react-vite: ^9.1.5 => 9.1.5 
    storybook: ^9.1.5 => 9.1.5

Additional context

Source code:

storybook/code/core/src/core-server/presets/vitePlugins/vite-inject-mocker/plugin.ts

Line 11 in 2657cc3

const entryPath = '/vite-inject-mocker-entry.js';

[dosubot]

You’re right—the import path for vite-inject-mocker-entry.js is currently hardcoded as an absolute path (/vite-inject-mocker-entry.js) in the plugin code, which causes issues when Storybook is hosted on a subpath (like GitHub Pages) because the browser tries to load the asset from the root instead of relative to the current location. Other Storybook assets use relative paths, so this is inconsistent and breaks static hosting scenarios source.

There’s no official config or documented workaround for this specific asset. Some users have had partial success using Vite’s base option in vite.config.js or via the viteFinal hook in .storybook/main.ts, but this doesn’t fix all asset paths and doesn’t affect the hardcoded script tag injected by the plugin docs. Community workarounds for similar issues include using a <base> tag in the HTML head, symlinks, custom middleware, or writing a Vite plugin to normalize asset paths, but none are officially supported for this case discussion.

The best long-term fix is to update the plugin to use a relative path or resolve the asset path dynamically based on Vite’s config. Until then, you may need to patch the plugin locally or experiment with a custom Vite plugin in your viteFinal hook to rewrite the injected script tag’s path. If you need an example or want to discuss possible code changes, let me know!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[Spencer6497]

We are also facing this issue. Current workaround is to inject

<script type="module" src="/storybook/vite-inject-mocker-entry.js"></script>

into your preview-head.html, just like you would custom fonts.

https://storybook.js.org/docs/api/main-config/main-config-preview-head

[thibaultplus]

Another alternative is adding the code below to preview-head.html:

<script>
   document.addEventListener('DOMContentLoaded', function () {
    const script = document.querySelector('script[src="/vite-inject-mocker-entry.js"]');
    if (script) {
      script.src = './vite-inject-mocker-entry.js';
    }
  });
</script>

[tmkx]

thank you for sharing. I can also provide a workaround that has the benefit of zero runtime overhead:

import type { StorybookConfig } from '@storybook/react-vite';
import { Plugin, defineConfig, mergeConfig } from 'vite';

const config: StorybookConfig = {
  // ...
  framework: '@storybook/react-vite',
  viteFinal: (config) =>
    mergeConfig(
      config,
      defineConfig({
        plugins: [
          fixStorybookMockerEntryPlugin(), //
        ],
      })
    ),
};

function fixStorybookMockerEntryPlugin(): Plugin {
  return {
    name: 'fix-storybook-mocker-entry',
    enforce: 'post',
    transformIndexHtml(html) {
      // https://github.com/storybookjs/storybook/blob/2657cc33826d1abf76334f94fef4b82b10f1e1c0/code/core/src/core-server/presets/vitePlugins/vite-inject-mocker/plugin.ts#L11
      const entryPath = '/vite-inject-mocker-entry.js';
      return html.replace(`"${entryPath}"`, `".${entryPath}"`);
    },
  };
}