Unable to use Sveltekit modules in components (i.e. $path)

[oneezy]

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).

 
Example: a component that displays the <URLpath />
Output: "indaco/histoire-sveltekit/issues/2"
 

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

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

sveltekit-histoire-bug.webm

Error

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

> [email protected] 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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/@[email protected][email protected]/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/@[email protected][email protected]/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.

[oneezy]

Here's the full reproduction:
https://github.com/oneezy/indaco-histoire-sveltekit-repro

[indaco]

@oneezy the same happens with histoire-dev blank project too.

I would suggest to open an issue there as I did for the other issue you reported here.

Is it something feasible to you?

Thanks

[oneezy]

@indaco yeah I had noticed that too.

I actually tested that one out first, then yours, and am currently testing @sw-yx 's , though he's archived his for some reason.

I'll create a bug report over at Histoire

[indaco]

@oneezy can you reference the issue here once you open it there? thanks

Looking at your repos...I found https://github.com/oneezy/monorepo
does it work for your repo?

[oneezy]

@indaco will do, sorry had to get some rest but I will reference it here afterwards.

No, it doesn't work there but that's exactly my plan. All apps in oneezy/monorepo are Sveltekit other than histoire (only Svelte) .. So none of the Sveltekit specific things are working.

That's really one of the final pieces to getting that starter project to v1

[oneezy]

Done.

[oneezy]

have you got this to work yet? said it was fixed but i'm still unable to get it working

[indaco]

Will check and keep you posted

[indaco]

@oneezy sveltejs/kit#8838 will be part of Kit 1.4.0 - sveltejs/kit#8861