Failed to fetch dynamically imported module in Storybook with Sveltekit

[cmseeling]

Hi,

I've been trying to use Panda with Sveltekit and Storybook and I'm running into an issue where Storybook won't load my component story.

I followed the Svelte setup instructions first, and then the Storybook instructions including updating the postcss.config.cjs file.

However, when I run storybook I and try to load my component I see this:

The component does work when I add it to a page.

Here's a link to my repo that has the issue: https://github.com/cmseeling/list-randomizer

Thanks!

[anubra266]

@cmseeling Storybook/vite will have a better error in your terminal. Can't debug anything with this screenshot. Could you paste the full error.

[cmseeling]

Here's the Vite error:

2:37:49 PM [vite] Pre-transform error: Failed to load url /styled-system/css/index.mjs (resolved id: /home/cs/dev/list-randomizer/styled-system/css/index.mjs) in /home/cs/dev/list-randomizer/src/components/NameInput/NameInput.svelte. Does the file exist?
The request url "/home/cs/dev/list-randomizer/styled-system/css/index.mjs" is outside of Vite serving allow list.

- /home/cs/dev/list-randomizer/src/lib
- /home/cs/dev/list-randomizer/src/routes
- /home/cs/dev/list-randomizer/.svelte-kit
- /home/cs/dev/list-randomizer/src
- /home/cs/dev/list-randomizer/node_modules
- /home/cs/dev/list-randomizer/.storybook

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

It appears storybook is not obeying the server configuration options defined in vite.config.ts. Here's my version of that file for reference:

import { defineConfig } from 'vitest/config';
import { sveltekit } from '@sveltejs/kit/vite';

export default defineConfig({
	plugins: [sveltekit()],
	server: {
		fs: {
			allow: ['styled-system']
		}
	},
	test: {
		include: ['src/**/*.{test,spec}.{js,ts}']
	}
});

That's exactly how it was shown in the Svelte guide.

So how do I get Storybook to obey the server configuration? Barring that, is there a way for Panda to generate the index.mjs file somewhere else that Storybook will be happy with?

[anubra266]

@cmseeling the storybook config accepts a viteFinal object, could you try configuring there also

// .storybook/main.ts

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

const config: StorybookConfig = {
  //...
  viteFinal: async (config) => {
    return mergeConfig(
      config,
      defineConfig({
        server: {
          fs: {
            allow: ['styled-system'],
          },
        },
      }),
    )
  },
}

I'm not sure if allow needs a relative path to styled-system but you can try that out.

[cmseeling]

That fixed it. Thank you!

[anubra266]

Awesome, curious if you needed a relative path? or it automatically read from project root?
Also if you're up for it, you could open a PR to update the svelte docs

[cmseeling]

It was automatically read from the project root. I'll look at making a PR later today.