Can't use SvelteKit $app stores in Stories

I’m trying to get a basic story working using SvelteKit + Storybook using the Vite builder. This story uses the page store from$app/stores which is imported into the Nav.svelte file as below:

import { page } from "$app/stores";

In my .storybook/main.js file, I have this config including the alias for the $app

const preprocess = require("svelte-preprocess");
const autoprefixer = require("autoprefixer");
const path = require("path");
const { mergeConfig } = require("vite");

module.exports = {
  stories: [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx|svelte)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-svelte-csf",
  ],
  framework: "@storybook/svelte",
  svelteOptions: {
    preprocess: preprocess({
      sourceMap: true,
      scss: {
        includePaths: ["src"],
        prependData: `@import 'src/styles/variables.scss';`,
      },
      postcss: {
        plugins: [autoprefixer()],
      },
      aliases: [["ts", "typescript"]],
    }),
  },
  core: {
    builder: "@storybook/builder-vite",
  },
  async viteFinal(config, { configType }) {
    config.resolve.alias = {
      $app: path.resolve("./.svelte-kit/runtime/app"),
    };
    console.log(config);
    return config;
  },
};

but when I try to view the Nav story, I get the below error

Cannot read properties of undefined (reading 'page')
TypeError: Cannot read properties of undefined (reading 'page')
    at getStores (http://localhost:6006/.svelte-kit/runtime/app/stores.js:23:22)
    at Object.subscribe (http://localhost:6006/.svelte-kit/runtime/app/stores.js:45:17)
    at subscribe (http://localhost:6006/node_modules/.vite-storybook/chunk-R7OMEHAZ.js?v=3466fb57:61:23)
    at component_subscribe (http://localhost:6006/node_modules/.vite-storybook/chunk-R7OMEHAZ.js?v=3466fb57:70:32)
    at instance (http://localhost:6006/src/components/Nav/Nav.svelte:121:2)
    at init (http://localhost:6006/node_modules/.vite-storybook/chunk-R7OMEHAZ.js?v=3466fb57:1686:23)
    at new Nav (http://localhost:6006/src/components/Nav/Nav.svelte:137:3)
    at createProxiedComponent (http://localhost:6006/node_modules/svelte-hmr/runtime/svelte-hooks.js:266:9)
    at new ProxyComponent (http://localhost:6006/node_modules/svelte-hmr/runtime/proxy.js:239:20)
    at new Proxy<Nav> (http://localhost:6006/node_modules/svelte-hmr/runtime/proxy.js:346:11)

Has anyone been able to successfully set an alias to the $app/stores?

[IanVS]

I’m going to close this out since it doesn’t sound like a builder-vite bug, but please report back @kyleshepherd if you think it is, or if you find a good solution that you think might be useful to others.

[kyleshepherd]

I did try it with Webpack but was getting a similar error.

I’ll try and do some more digging now knowing that the alias is working itself and see if I can figure anything out. Thank you for looking into it!