Storybook Build Failure: Sveltekit Remote Functions

[justindomingue]

Summary

Issue Summary

pnpm build-storybook fails with module resolution error, while pnpm storybook (dev mode) works fine.

Error:
(3:11): "getPosts" is not exported by "src/posts.remote.ts"

Root Cause

The issue occurs because:

1. Dev mode works: Vite's dev server can resolve $app/server from SvelteKit's runtime
2. Build mode fails: Static bundler tries to resolve all imports, but $app/server doesn't exist outside SvelteKit runtime context

Multiple files in the codebase import from $app/server (specifically getRequestEvent and query functions).

Example pattern:

import { getRequestEvent, query } from '$app/server'  // ❌ Fails in Storybook build

export const getSomeData = query(
  SomeSchema,
  async (params): Promise<...> => {
    const event = getRequestEvent()
    // ...
  }
)

Environment

- SvelteKit project with Storybook integration
- Storybook version: 10.x
- Build command: storybook build
- Dev command: storybook dev (works fine)

Attempted Solutions

Empty mock files were created in .storybook/mocks/ directory but are incomplete.

Question

How can I properly mock or alias $app/server imports so that Storybook's static build can resolve these modules, while maintaining
compatibility with the dev server?

Stories already provide mocked data and don't actually call these functions at runtime - they just need the modules to resolve during the
build step.

### Additional information

_No response_

### Create a reproduction

_No response_

[dosubot[bot]]

Hi @justindomingue! I'm Dosu and I’m helping the storybook team.

To resolve build-time errors from $app/server imports in Storybook with SvelteKit, you can mock or alias these modules so the static build succeeds, while keeping dev mode working.

The recommended approach is to create a mock file that exports the same named exports as $app/server (like getRequestEvent, query) but with empty or stub implementations. Then, alias $app/server to this mock in your Storybook Vite config. For example:

1. Create a mock file (e.g., .storybook/mocks/app-server.js):

// .storybook/mocks/app-server.js
export function getRequestEvent() {
  // no-op or return a dummy object
  return {};
}
export function query(...args) {
  // no-op or return a dummy function/promise
  return () => {};
}

2. In .storybook/main.ts, add a Vite alias in viteFinal:

import path from 'path';
import type { StorybookConfig } from '@storybook/sveltekit';

const config: StorybookConfig = {
  framework: '@storybook/sveltekit',
  viteFinal: async (config) => {
    config.resolve = config.resolve || {};
    config.resolve.alias = {
      ...config.resolve.alias,
      '$app/server': path.resolve(__dirname, './mocks/app-server.js'),
    };
    return config;
  },
};
export default config;

This ensures that during the build, any import from $app/server resolves to your mock, avoiding module resolution errors. Dev mode will continue to use Vite's runtime resolution, so SvelteKit's real modules are available there. See the official docs for more details and patterns.

If you want to use automocking or file-based mocks, those are also supported and described in the Storybook docs.

Make sure your mock exports match the real module's API to prevent further build errors. This approach is compatible with both build and dev modes in Storybook 1 2.

To reply, just mention @dosu.

---

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