I have been setting up storybook with Vite, Svelte and Typescript. It basically works fine except the Typescript part in the stories. For some reason Typescript preprocessing is being ignored in my *.stories.svelte files (in the component files it works fine).
I keep getting errors like this:
[vite] Internal server error: Unexpected token
Plugin: storybook-addon-svelte-csf
File: C:/projects/personal/exif-renamer/src/ui/1_globals/theme/font.stories.svelte
2: import { Meta,Story,Template } from '@storybook/addon-svelte-csf';
3: import { css } from '~/ui/1_globals/core/css';
4: import type { FontType } from './font';
^
5: import { font } from './font';
For a *.stories.svelte file that has a script tag like this:
<script lang="ts">
import { Meta,Story,Template } from '@storybook/addon-svelte-csf';
import { css } from '~/ui/1_globals/core/css';
import type { FontType } from './font';
import { font } from './font';
const cn = (type: FontType) => css`${font(type)}`;
</script>
My .storybook/main.js (where I have tried to force svelte preprocessing):
const { resolve } = require('path');
const { svelte } = require('@sveltejs/vite-plugin-svelte');
const { typescript: svelteTS } = require('svelte-preprocess');
module.exports = {
stories: [resolve('src/**/*.stories.@(ts|svelte)')],
addons: ['@storybook/addon-essentials', '@storybook/addon-svelte-csf'],
core: {
builder: 'storybook-builder-vite',
},
async viteFinal(config) {
const { default: viteConfig } = await import('../vite.config.js');
const svelteIndex = config.plugins.findIndex(
({ name }) => name === 'vite-plugin-svelte'
);
config.plugins[svelteIndex] = svelte({
preprocess: [svelteTS()],
});
// customize the Vite config here
config.resolve.alias = viteConfig.resolve.alias;
// return the customized config
return config;
},
};
Any ideas why Typescript preprocessing is being ignored in my .stories files??