🟧 Sveltekit: Can't import Sveltekit modules in components (i.e. $path)

[oneezy]

Describe the bug

When trying to import Sveltekit Modules such as the $path store in a component,

❌ I get an error in Histoire (port 6006)
✅ I don't get an error in Sveltekit (port 5173).

Stackblitz Repro:
https://stackblitz.com/edit/sveltejs-kit-template-default-9wclu1?file=src/lib/PageTitle/PageTitle.svelte

 
Example: a component that displays the <PageTitle />
Output: "histoire-dev/histoire/issues/384"
 

<!-- PageTitle.svelte -->
<script>
  import { page } from '$app/stores'
</script>

<h1>{$page.url.pathname}</h1>

sveltekit-histoire-bug.webm

Error

> oneezy@oneezy MINGW64 ~/Desktop/www/10.Repros/indaco-histoire-sveltekit-repro (main)
$ pnpm story

> histoire-sveltekit@0.0.1 story C:\Users\oneezy\Desktop\www\10.Repros\indaco-histoire-sveltekit-repro
> svelte-kit sync && histoire dev

  ➜  Local:   http://localhost:6006/
  ➜  Network: use --host to expose
Collect stories start all
Failed to resolve import "$app/stores" from "src\lib\components\URLpath\URLpath.svelte". Does the file exist?
Error while collecting story C:/Users/oneezy/Desktop/www/10.Repros/indaco-histoire-sveltekit-repro/src/stories/URLpath/URLpath.story.svelte:
Error: Failed to resolve import "$app/stores" from "src\lib\components\URLpath\URLpath.svelte". Does the file exist?
    at formatError (file:///C:/Users/oneezy/Desktop/www/10.Repros/indaco-histoire-sveltekit-repro/node_modules/.pnpm/vite@3.1.4/node_modules/vite/dist/node/chunks/dep-6b3a5aff.js:40854:46)
    at TransformContext.error (file:///C:/Users/oneezy/Desktop/www/10.Repros/indaco-histoire-sveltekit-repro/node_modules/.pnpm/vite@3.1.4/node_modules/vite/dist/node/chunks/dep-6b3a5aff.js:40850:19)
    at normalizeUrl (file:///C:/Users/oneezy/Desktop/www/10.Repros/indaco-histoire-sveltekit-repro/node_modules/.pnpm/vite@3.1.4/node_modules/vite/dist/node/chunks/dep-6b3a5aff.js:37587:33)
    at async TransformContext.transform (file:///C:/Users/oneezy/Desktop/www/10.Repros/indaco-histoire-sveltekit-repro/node_modules/.pnpm/vite@3.1.4/node_modules/vite/dist/node/chunks/dep-6b3a5aff.js:37720:47)
    at async Object.transform (file:///C:/Users/oneezy/Desktop/www/10.Repros/indaco-histoire-sveltekit-repro/node_modules/.pnpm/vite@3.1.4/node_modules/vite/dist/node/chunks/dep-6b3a5aff.js:41103:30)
    at async loadAndTransform (file:///C:/Users/oneezy/Desktop/www/10.Repros/indaco-histoire-sveltekit-repro/node_modules/.pnpm/vite@3.1.4/node_modules/vite/dist/node/chunks/dep-6b3a5aff.js:37365:29)
Collect stories end 3952 ms
The request url "C:/Users/oneezy/Desktop/www/2.Starters/monorepo/node_modules/.pnpm/@histoire+app@0.11.7_vite@3.2.4/node_modules/@histoire/app/dist/bundle-main.js" is outside of Vite serving allow list.

- C:/Users/oneezy/Desktop/www/10.Repros/indaco-histoire-sveltekit-repro/node_modules/.pnpm/@histoire+app@0.11.0_vite@3.1.4/node_modules/@histoire/app/dist
- C:/Users/oneezy/Desktop/www/10.Repros/indaco-histoire-sveltekit-repro/node_modules/.histoire
- C:/Users/oneezy/Desktop/www/10.Repros/indaco-histoire-sveltekit-repro
- C:/Users/oneezy/Desktop/www/10.Repros/indaco-histoire-sveltekit-repro

Refer to docs https://vitejs.dev/config/server-options.html#server-fs-allow for configurations and more details.

Reproduction

Stackblitz Repro:
https://stackblitz.com/edit/sveltejs-kit-template-default-9wclu1?file=src/lib/PageTitle/PageTitle.svelte

System Info

OS: Windows 11 Pro (build - 22000.1219)
Browser: Chrome - Version 107.0.5304.122 (Official Build) (64-bit)
Node: 18.8.0
PNPM: 7.17.1
Terminal: Git Bash

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• sveltejs-kit-template-default-9wclu1 (Open reproduction)

[oneezy]

related issues:

#241
#281
#375
indaco/histoire-sveltekit#2

edit: made repro easier to understand
https://stackblitz.com/edit/sveltejs-kit-template-default-9wclu1?file=src/lib/PageTitle/PageTitle.svelte

[benzara-tahar]

Am having the same issue, I am trying to resolve the $app/stores inside the histoire.config.js but I don't know where is the file exporting it
Any idea?

import { defineConfig, defaultColors } from 'histoire';
import { HstSvelte } from '@histoire/plugin-svelte';
import { resolve } from 'path';

export default defineConfig({
  setupFile: './histoire-setup.js',
  theme: {
    title: 'Qomino Design System',
    colors: {
      primary: defaultColors.cyan,
    },
    favicon: './static/favicon.svg',
  },
  vite: {
    resolve: {

      alias: {
         '$lib': resolve('.src/lib'),
         '@components': resolve('./src/lib/components'),
         '@utils': resolve('./src/lib/utils'),
         '@icons': resolve('./src/lib/icons'),
+        '$app/stores': resolve('./node_modules/@sveltejs/kit/types'), // <-- how to resove this?
      },

    }
  },

  plugins: [HstSvelte()],
});

[benzara-tahar]

One workaround is to mock the modules you need , for my cases i only used $page.url so I mocked that

[oneezy]

@benzara-tahar Thanks for posting a possible workaround!

I was sifting through the docs earlier and saw this so figured I'd post it here

https://kit.svelte.dev/docs/packaging

[benmccann]

I hope this will be fixed if we leave SvelteKit's setup plugin in place and remove it's compile plugin. See my comment here: #393 (comment)

[oneezy]

Thanks for giving this one attention @benmccann !

Sveltekit + Histoire are a match made in heaven :)

I'll follow that thread and help test where I can

[oneezy]

@Akryum , this bug still exists

[benmccann]

Some SvelteKit modules will work and some won't. You can see a summary here: https://github.com/storybookjs/storybook/tree/next/code/frameworks/sveltekit#supported-features